@soyio/soyio-rn-sdk 0.1.0

package/README.md

@@ -0,0 +1,156 @@
+<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-rn-sdk" target="_blank">
+    <img src="https://img.shields.io/npm/v/@soyio/soyio-rn-sdk?label=version&logo=nodedotjs&logoColor=%23fff&color=306998" alt="NPM - Version">
+</a>
+</p>
+
+## Installation
+
+Install using npm! (or your favorite package manager)
+
+```sh
+# Using npm
+npm install @soyio/soyio-rn-sdk
+
+# Using yarn
+yarn add @soyio/soyio-rn-sdk
+```
+
+**IMPORTANT:**
+For developers working with a bare React Native application, it is essential to include Expo modules to ensure full compatibility and functionality of the Soyio SDK. To install Expo modules, run the following command in your project directory:
+
+```bash
+npx install-expo-modules
+```
+
+## 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-rn-sdk";
+```
+
+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_'
+    isSandbox: true, // Optional. Default is false
+  };
+
+  // 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-rn-sdk-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 creating the new application, add the following dependency to its `package.json` file:
+
+```json
+{
+  "dependencies": {
+    ...,
+    "@soyio/soyio-rn-sdk": "file:./path/to/soyio-soyio-rn-sdk-x.x.x.tgz",
+    ...
+  }
+}
+```
+
+Where `./path/to/soyio-soyio-rn-sdk-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/index.ts

@@ -0,0 +1,8 @@
+export { useSoyioAuth } from './src/core';
+
+export type {
+  SoyioWidgetParams,
+  RegisterParams,
+  AuthenticateParams,
+  SoyioWidgetViewPropsType,
+} from './src/types';

package/package/index.d.ts

@@ -0,0 +1,2 @@
+export { useSoyioAuth } from './src/core';
+export type { SoyioWidgetParams, RegisterParams, AuthenticateParams, SoyioWidgetViewPropsType, } from './src/types';

package/package/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSoyioAuth = void 0;
+var core_1 = require("./src/core");
+Object.defineProperty(exports, "useSoyioAuth", { enumerable: true, get: function () { return core_1.useSoyioAuth; } });
+//# sourceMappingURL=index.js.map

package/package/src/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const PRODUCTION_URL = "https://app.soyio.id/widget";
+export declare const SANDBOX_URL = "https://sandbox.soyio.id/widget";
+export declare const SOYIO_REDIRECT_URL = "demo://";

package/package/src/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SOYIO_REDIRECT_URL = exports.SANDBOX_URL = exports.PRODUCTION_URL = void 0;
+exports.PRODUCTION_URL = 'https://app.soyio.id/widget';
+exports.SANDBOX_URL = 'https://sandbox.soyio.id/widget';
+exports.SOYIO_REDIRECT_URL = 'demo://';
+//# sourceMappingURL=constants.js.map

package/package/src/core.d.ts

@@ -0,0 +1,5 @@
+import type { SoyioWidgetViewPropsType, RegisterParams, AuthenticateParams } from './types';
+export declare const useSoyioAuth: ({ options, onEventChange }: SoyioWidgetViewPropsType) => {
+    register: (registerParams: RegisterParams) => Promise<void>;
+    authenticate: (authenticateParams: AuthenticateParams) => Promise<void>;
+};

package/package/src/core.jsx

@@ -0,0 +1,114 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSoyioAuth = void 0;
+var react_1 = require("react");
+var WebBrowser = __importStar(require("expo-web-browser"));
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
+var useSoyioAuth = function (_a) {
+    var options = _a.options, onEventChange = _a.onEventChange;
+    var webBrowserOptions = {
+        dismissButtonStyle: 'cancel',
+        createTask: false,
+        enableBarCollapsing: true,
+        showTitle: true,
+    };
+    var register = (0, react_1.useCallback)(function (registerParams) { return __awaiter(void 0, void 0, void 0, function () {
+        var registerBaseUri, registerUri, registerResult;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    registerBaseUri = (0, utils_1.getFlowUrl)(options, 'register');
+                    registerUri = "".concat(registerBaseUri, "?").concat((0, utils_1.buildUrlParams)(options, registerParams));
+                    if (onEventChange)
+                        onEventChange({ type: 'open register' });
+                    return [4 /*yield*/, WebBrowser.openAuthSessionAsync(registerUri, constants_1.SOYIO_REDIRECT_URL, webBrowserOptions)];
+                case 1:
+                    registerResult = _a.sent();
+                    if (onEventChange)
+                        onEventChange(registerResult);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [options, onEventChange]);
+    var authenticate = (0, react_1.useCallback)(function (authenticateParams) { return __awaiter(void 0, void 0, void 0, function () {
+        var authenticateBaseUri, authenticateUri, authenticateResult;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    authenticateBaseUri = (0, utils_1.getFlowUrl)(options, 'authenticate');
+                    authenticateUri = "".concat(authenticateBaseUri, "?").concat((0, utils_1.buildUrlParams)(options, authenticateParams));
+                    if (onEventChange)
+                        onEventChange({ type: 'open authenticate' });
+                    return [4 /*yield*/, WebBrowser.openAuthSessionAsync(authenticateUri, constants_1.SOYIO_REDIRECT_URL, webBrowserOptions)];
+                case 1:
+                    authenticateResult = _a.sent();
+                    if (onEventChange)
+                        onEventChange(authenticateResult);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [options, onEventChange]);
+    return { register: register, authenticate: authenticate };
+};
+exports.useSoyioAuth = useSoyioAuth;
+//# sourceMappingURL=core.jsx.map

package/package/src/types.d.ts

@@ -0,0 +1,20 @@
+export type SoyioWidgetParams = {
+    companyId: string;
+    userReference?: string;
+    isSandbox?: boolean;
+    developmentUrl?: string;
+};
+export type RegisterParams = {
+    flowTemplateId: string;
+    userEmail?: string;
+};
+export type AuthenticateParams = {
+    identityId: string;
+};
+export type SoyioWidgetViewPropsType = {
+    options: SoyioWidgetParams;
+    onEventChange?: (event: {
+        type: string;
+        url?: string;
+    }) => void;
+};

package/package/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/package/src/utils.d.ts

@@ -0,0 +1,3 @@
+import { RegisterParams, AuthenticateParams, SoyioWidgetParams } from './types';
+export declare function getFlowUrl(options: SoyioWidgetParams, flow: 'authenticate' | 'register'): string;
+export declare function buildUrlParams(widgetParams: SoyioWidgetParams, flowParams: RegisterParams | AuthenticateParams): string;

package/package/src/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildUrlParams = exports.getFlowUrl = void 0;
+var constants_1 = require("./constants");
+function getFlowUrl(options, flow) {
+    var baseUrl = options.developmentUrl || (options.isSandbox ? constants_1.SANDBOX_URL : constants_1.PRODUCTION_URL);
+    return "".concat(baseUrl, "/").concat(flow);
+}
+exports.getFlowUrl = getFlowUrl;
+function buildUrlParams(widgetParams, flowParams) {
+    var baseParams = "platform=rn&companyId=".concat(widgetParams.companyId);
+    if (widgetParams.userReference) {
+        baseParams += "&userReference=".concat(widgetParams.userReference);
+    }
+    var dynamicParams = Object.entries(flowParams)
+        .map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return "".concat(key, "=").concat(encodeURIComponent(value));
+    })
+        .join('&');
+    return "".concat(baseParams, "&").concat(dynamicParams);
+}
+exports.buildUrlParams = buildUrlParams;
+//# sourceMappingURL=utils.js.map

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@soyio/soyio-rn-sdk",
+  "version": "0.1.0",
+  "main": "./package/index.js",
+  "types": "./package/index.d.ts",
+  "scripts": {
+    "bump!": "sh scripts/bump.sh",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs"
+  },
+  "dependencies": {
+    "expo": "~50.0.14",
+    "expo-status-bar": "~1.11.1",
+    "expo-web-browser": "~12.8.2",
+    "react": "18.2.0",
+    "react-native": "0.73.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.1.3"
+  }
+}