@soyio/soyio-rn-sdk 0.2.2

package/.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

package/.eslintrc.js

@@ -0,0 +1,46 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'airbnb-base',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  plugins: ['import', '@typescript-eslint'],
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+      },
+      typescript: {
+        project: './',
+      },
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'import/prefer-default-export': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+};

package/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/.expo/metro/externals/assert/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:assert');

package/.expo/metro/externals/async_hooks/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:async_hooks');

package/.expo/metro/externals/buffer/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:buffer');

package/.expo/metro/externals/child_process/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:child_process');

package/.expo/metro/externals/cluster/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:cluster');

package/.expo/metro/externals/console/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:console');

package/.expo/metro/externals/constants/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:constants');

package/.expo/metro/externals/crypto/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:crypto');

package/.expo/metro/externals/dgram/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:dgram');

package/.expo/metro/externals/diagnostics_channel/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:diagnostics_channel');

package/.expo/metro/externals/dns/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:dns');

package/.expo/metro/externals/domain/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:domain');

package/.expo/metro/externals/events/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:events');

package/.expo/metro/externals/fs/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:fs');

package/.expo/metro/externals/fs/promises/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:fs/promises');

package/.expo/metro/externals/http/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:http');

package/.expo/metro/externals/http2/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:http2');

package/.expo/metro/externals/https/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:https');

package/.expo/metro/externals/inspector/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:inspector');

package/.expo/metro/externals/module/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:module');

package/.expo/metro/externals/net/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:net');

package/.expo/metro/externals/os/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:os');

package/.expo/metro/externals/path/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:path');

package/.expo/metro/externals/perf_hooks/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:perf_hooks');

package/.expo/metro/externals/process/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:process');

package/.expo/metro/externals/punycode/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:punycode');

package/.expo/metro/externals/querystring/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:querystring');

package/.expo/metro/externals/readline/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:readline');

package/.expo/metro/externals/repl/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:repl');

package/.expo/metro/externals/stream/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:stream');

package/.expo/metro/externals/string_decoder/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:string_decoder');

package/.expo/metro/externals/timers/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:timers');

package/.expo/metro/externals/tls/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:tls');

package/.expo/metro/externals/trace_events/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:trace_events');

package/.expo/metro/externals/tty/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:tty');

package/.expo/metro/externals/url/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:url');

package/.expo/metro/externals/util/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:util');

package/.expo/metro/externals/v8/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:v8');

package/.expo/metro/externals/vm/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:vm');

package/.expo/metro/externals/wasi/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:wasi');

package/.expo/metro/externals/worker_threads/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:worker_threads');

package/.expo/metro/externals/zlib/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:zlib');

package/.expo/metro/polyfill.js

@@ -0,0 +1 @@
+global.$$require_external = typeof window === "undefined" ? require : () => null;

package/.expo/metro/polyfill.native.js

@@ -0,0 +1 @@
+global.$$require_external = (moduleId) => {throw new Error(`Node.js standard library module ${moduleId} is not available in this JavaScript environment`);}

package/.expo/metro/shims/react-native-web/dist/cjs/exports/AppRegistry/AppContainer.js

@@ -0,0 +1,13 @@
+// NOTE(EvanBacon): `react-native-web` adds a extra `div`s around the root HTML, these
+// make static rendering much harder as we expect the root element to be `<html>`.
+// This resolution will alias to a simple in-out component to avoid the extra HTML.
+function AppContainer({ children }) {
+  return children;
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  AppContainer.displayName = 'AppContainer';
+}
+
+module.exports = AppContainer;
+module.exports.default = AppContainer;

package/.expo/metro/shims/react-native-web/dist/cjs/exports/BackHandler/index.js

@@ -0,0 +1,10 @@
+'use strict';
+function emptyFunction() {}
+(exports.__esModule = !0), (exports.default = void 0);
+var BackHandler = {
+    exitApp: emptyFunction,
+    addEventListener: () => ({ remove: emptyFunction }),
+    removeEventListener: emptyFunction,
+  },
+  _default = BackHandler;
+(exports.default = _default), (module.exports = exports.default);

package/.expo/metro/shims/react-native-web/dist/exports/AppRegistry/AppContainer.js

@@ -0,0 +1,12 @@
+// NOTE(EvanBacon): `react-native-web` adds a extra `div`s around the root HTML, these
+// make static rendering much harder as we expect the root element to be `<html>`.
+// This resolution will alias to a simple in-out component to avoid the extra HTML.
+function AppContainer({ children }) {
+  return children;
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  AppContainer.displayName = 'AppContainer';
+}
+
+export default AppContainer;

package/.expo/metro/shims/react-native-web/dist/exports/BackHandler/index.js

@@ -0,0 +1,7 @@
+function emptyFunction() {}
+var BackHandler = {
+  exitApp: emptyFunction,
+  addEventListener: () => ({ remove: emptyFunction }),
+  removeEventListener: emptyFunction,
+};
+export default BackHandler;

package/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

package/.github/actions/setup/action.yml

@@ -0,0 +1,27 @@
+name: Setup
+description: Setup Node.js and install dependencies
+
+runs:
+  using: composite
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: .node-version
+
+    - name: Cache dependencies
+      id: npm-cache
+      uses: actions/cache@v3
+      with:
+        path: |
+          **/node_modules
+          .npm/install-state.gz
+        key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
+        restore-keys: |
+          ${{ runner.os }}-npm-${{ hashFiles('npm.lock') }}
+          ${{ runner.os }}-npm-
+
+    - name: Install dependencies
+      if: steps.npm-cache.outputs.cache-hit != 'true'
+      run: npm install --immutable
+      shell: bash

package/.node-version

@@ -0,0 +1 @@
+20

package/README.md

@@ -0,0 +1,148 @@
+<h1 align="center">Soyio React Native</h1>
+
+<p align="center">
+    <em>
+        Use the Soyio widget within your React Native application as a View.
+    </em>
+</p>
+
+<p align="center">
+<a href="https://www.npmjs.com/package/@soyio/soyio-webview-rn" target="_blank">
+    <img src="https://img.shields.io/npm/v/@soyio/soyio-webview-rn?label=version&logo=nodedotjs&logoColor=%23fff&color=306998" alt="NPM - Version">
+</a>
+</p>
+
+## Installation
+
+Install using npm! (or your favourite package manager)
+
+```sh
+# 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](https://docs.expo.dev/versions/latest/sdk/webbrowser/#webbrowseropenauthsessionasyncurl-redirecturl-options).
+
+To use the Soyio hook, use the following _snippet_:
+
+```js
+import { useSoyioAuth } from "@soyio/soyio-webview-rn";
+```
+
+After retrieving the `useSoyioAuth` hook, you are ready to instantiate the widget:
+
+```jsx
+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:
+
+```typescript
+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:
+
+```sh
+npm install
+```
+
+To test locally, I recommend packaging the app. Remember to build the library first:
+
+```sh
+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:
+
+```json
+{
+  "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:
+
+```sh
+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**](https://github.com/fintoc-com/fintoc-react-native) integrating the WebView using React Native, which served as a good starting point for the general idea of this library.

package/app.json

@@ -0,0 +1,13 @@
+{
+  "expo": {
+    "name": "@soyio/soyio-webview-rn",
+    "slug": "soyio-webview-rn",
+    "version": "0.1.33",
+    "sdkVersion": "50.0.0",
+    "scheme": "demo",
+    "platforms": [
+      "ios",
+      "android"
+    ]
+  }
+}