@soyio/soyio-webview-rn v0.2.2

Installation

Install using npm! (or your favourite package manager)

# Using npm
npm install @soyio/soyio-webview-rn

# Using yarn
yarn add @soyio/soyio-webview-rn

Usage

Soyio React Native exports a single hook called useSoyioAuth. This is a hook that opens a WebBrowser using the openAuthSessionAsync method by expo.

To use the Soyio hook, use the following snippet:

import { useSoyioAuth } from "@soyio/soyio-webview-rn";

After retrieving the useSoyioAuth hook, you are ready to instantiate the widget:

export default function App() {
  const options = {
    userReference: "<company identifier of user>", // OPTIONAL
    companyId: "<company id>",             // Starts with 'com_'
  };

  // For registering a new identity
  const registerParams = {
    flowTemplateId: "<flow template id>", // Starts with 'vft_'
    userEmail: "<user email>",            // OPTIONAL
  };

  // For authenticate existing identity
  const authenticateParams = {
    identityId: "<identity id>",          // Starts with 'id_'
  };

    const onEventChange = (event) => {
    console.log('Event:', event);
  }

  const { register, authenticate } = useSoyioAuth({ options, onEventChange });

  const registerNewIdentity = () => {
    register(registerParams);
  }

  const authenticateIdentity = () => {
    authenticate(authenticateParams);
  }

  return (
    <View>
      <Button title="Register new user" onPress={registerNewIdentity} />
      <Button title="Authenticate identity" onPress={authenticateIdentity} />
    </View>
  );
}

In this implementation, the WebBrowser will not open until either register() or authenticate() is invoked.

The onEventChange function returns an object with the following properties:

• type: Indicates the type of event being triggered. Possible values are:

  • "open register": Triggered when the user initiates the register method.
  • "open authenticate": Triggered when the user initiates the authenticate method.
  • "close": Triggered when the user closes the WebBrowser.
  • "success": Triggered when the authentication flow is successfully completed.

• url (optional): URL associated only with the success event.

  • For registration: "demo://registered?userReference=<company user reference>&id=<identity_id>"
  • For authentication: "demo://authenticated?userReference=<company user reference>&id=<identity_id>"

  where <identity_id> is the unique identifier of the newly registered or authenticated user, respectively.

The onEventChange function should be defined as follows:

onEventChange?: (event: { type: string; url?: string }) => void;

TypeScript support

This package includes TypeScript declarations for the Soyio View.

Developing

To develop the package, you need to use npm. Install the dependencies:

npm install

To test locally, I recommend packaging the app. Remember to build the library first:

npm run build
npm pack

This will create a soyio-soyio-webview-rn-x.x.x.tgz file (with the corresponding package version). Now, go to another directory and create a React Native app (using Expo, perhaps). After createing the new application, add the following dependency to its package.json file:

{
  "dependencies": {
    ...,
    "@soyio/soyio-webview-rn": "file:./path/to/soyio-soyio-webview-rn-x.x.x.tgz",
    ...
  }
}

Where ./path/to/soyio-soyio-webview-rn-x.x.x.tgz corresponds to the path to the .tgz file created on the npm pack step. After running npm install on the new React Native app, you should be able to use Soyio React Native to import the Soyio View.

If you want to create a new release, you can run:

git switch main
npm run bump! <major|minor|patch>

This will create a new branch with the updated version from main.

Acknowledgements

This implementation was written based on the input and experience of fintoc integrating the WebView using React Native, which served as a good starting point for the general idea of this library.