@openfort/react-native 0.0.1 → 0.0.2

package/README.md

@@ -2,7 +2,7 @@
 
 ## Install required packages:
 
-Using the package manager of your preference, install the openfort-js react native library, e.g. with yarn: `yarn add @openfort/react-native`.
+Using the package manager of your preference, install the openfort-js react native library, e.g. with yarn: `yarn add @openfort/react-native @openfort/openfort-js`.
 
 Since react native requires installing native dependencies directly, you also have to install these required dependencies
 ```
@@ -37,6 +37,23 @@ import  "@openfort/react-native/polyfills";
 ```
 This will ensure the correct modules are imported and will ensure `openfort-js` works properly.
 
+## Configure `Openfort`
+
+Configure openfort, the same way that you would with openfort-js
+```
+import Openfort from "@openfort/openfort-js";
+
+const openfort = new Openfort({
+  baseConfiguration: {
+    publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
+  },
+  shieldConfiguration: {
+    shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
+  }
+});
+```
+Check out the documentation [here](https://www.openfort.xyz/docs/guides/getting-started#4-import-openfort-into-your-app)
+
 ## Render secure WebView
 
 Openfort uses a `WebView` (from `react-native-webview`) to operate as a secure environment, managing the private key and executing wallet operations. [Learn more](https://www.openfort.xyz/docs/security#embedded-self-custodial-signer).
@@ -47,13 +64,13 @@ Simply import it from `@openfort/react-native`
 
 ```
 // Sample app/_layout.tsx using expo router
-import { OpenfortCommunicationWebView } from  '@openfort/react-native';
+import { Iframe } from  '@openfort/react-native';
 
 export default function RootLayout() {
 
   return (
     <>
-      <OpenfortCommunicationWebView />
+      <Iframe />
       <Slot />
     </>
   );

package/dist/Iframe.js

@@ -2,11 +2,24 @@ import React from 'react';
 import { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import WebView from "react-native-webview";
+const debugInjectedCode = `
+  console.log = function(...message) {
+    const safeMessage = JSON.stringify({ ...message, type: "log" });
+    window.ReactNativeWebView.postMessage(safeMessage);
+  };
+
+  console.warn = console.log;
+  console.error = console.log;
+  console.info = console.log;
+  console.debug = console.log;
+
+  console.log("injecting Code");
+`;
 const injectedCode = `
   window.parent = {};
-  window.parent.postMessage = (msg) =>  window.ReactNativeWebView.postMessage(JSON.stringify(msg))
-  `;
-export default function Iframe({ customUri }) {
+  window.parent.postMessage = (msg) =>  {console.log("---", msg); window.ReactNativeWebView.postMessage(JSON.stringify(msg))}
+`;
+export default function Iframe({ customUri, debug, debugVisible }) {
     const webViewRef = useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const fnCallbackRef = useRef(null); // Ref to store the callback
@@ -17,6 +30,8 @@ export default function Iframe({ customUri }) {
         };
         global.openfortPostMessage = (message) => {
             webViewRef?.current?.postMessage(JSON.stringify(message));
+            if (debug)
+                console.log("[Send message to web view]", message);
             setLoaded(true);
         };
     }, [webViewRef?.current]);
@@ -24,12 +39,34 @@ export default function Iframe({ customUri }) {
         // Trigger the stored callback, if any
         if (fnCallbackRef.current) {
             const origin = event.nativeEvent.url.endsWith('/') ? event.nativeEvent.url.slice(0, -1) : event.nativeEvent.url;
+            try {
+                const data = JSON.parse(event.nativeEvent.data);
+                if (data?.type === "log") {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { type, ...dataWithoutType } = data;
+                    if (debug)
+                        console.log("[Webview LOG]", Object.values(dataWithoutType).join(", "));
+                }
+                else {
+                    if (debug)
+                        console.log("[Webview message received]", data);
+                }
+            }
+            catch {
+                if (debug)
+                    console.log("[Webview message received]", event.nativeEvent.data);
+            }
             fnCallbackRef.current({ origin, data: event.nativeEvent.data });
         }
     };
     if (!loaded)
         return null;
     const uri = customUri ? customUri : "https://embedded.openfort.xyz";
-    return (React.createElement(View, { style: { flex: 0 } },
-        React.createElement(WebView, { ref: webViewRef, source: { uri: uri }, onMessage: handleMessage, injectedJavaScript: injectedCode })));
+    const finalUri = new URL(uri);
+    if (debug) {
+        finalUri.searchParams.set('debug', 'true');
+    }
+    const uriWithParams = finalUri.toString();
+    return (React.createElement(View, { style: { flex: debugVisible ? 1 : 0 } },
+        React.createElement(WebView, { ref: webViewRef, source: { uri: uriWithParams }, onMessage: handleMessage, injectedJavaScript: injectedCode + (debug ? debugInjectedCode : "") })));
 }

package/dist/types/Iframe.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-export default function Iframe({ customUri }: {
+export default function Iframe({ customUri, debug, debugVisible }: {
     customUri?: string;
+    debug?: boolean;
+    debugVisible?: boolean;
 }): React.JSX.Element | null;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@openfort/react-native",
   "main": "dist/index.js",
-  "version": "0.0.1",
+  "version": "0.0.2",
+  "license": "MIT",
   "scripts": {
     "build": "rimraf dist && tsc",
     "lint": "eslint . --ignore-pattern dist"
@@ -13,30 +14,33 @@
   ],
   "dependencies": {
     "events": "^3.3.0",
+    "jsrsasign": "^11.1.0",
     "react-native-get-random-values": "^1.11.0",
     "react-native-mmkv": "^3.2.0",
     "react-native-randombytes": "^3.6.1",
     "react-native-webview": "13.12.5",
-    "text-encoding": "^0.7.0"
+    "text-encoding": "^0.7.0",
+    "uuid": "^11.1.0"
   },
   "peerDependencies": {
-    "@openfort/openfort-js": "^0.8.15",
+    "@openfort/openfort-js": "^0.8.31",
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@openfort/openfort-js": "^0.8.15",
-    "react": "18.3.1",
-    "react-native": "0.76.5",
     "@eslint/js": "^9.17.0",
+    "@openfort/openfort-js": "^0.8.31",
+    "@types/jsrsasign": "^10.5.15",
     "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^18.3.0",
     "eslint": "^9.17.0",
     "eslint-plugin-react": "^7.37.3",
     "globals": "^15.14.0",
+    "react": "18.3.1",
+    "react-native": "0.76.5",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.19.0"
   },
   "private": false,
   "packageManager": "yarn@1.22.17"
-}
+}

package/polyfills/index.ts

@@ -1,4 +1,5 @@
 import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions"
+import { KEYUTIL, KJUR } from 'jsrsasign';
 
 // This is a workaround to fix the issue with process.version
 if (process.version === undefined) {
@@ -11,6 +12,8 @@ if (process.version === undefined) {
 // Crypto module needs getRandomValues
 import 'react-native-get-random-values';
 
+crypto.randomUUID = require('uuid').v4;
+
 const MMKVStorage = require("react-native-mmkv").MMKV;
 
 // Initialize MMKVStorage
@@ -67,6 +70,13 @@ const localStorage: Storage = {
 global.localStorage = localStorage;
 global.sessionStorage = localStorage;
 
+global.JWK_UTILS = {
+  getKey: KEYUTIL.getKey,
+  parse: KJUR.jws.JWS.parse,
+  verifyJWT: KJUR.jws.JWS.verifyJWT,
+  getNow: KJUR.jws.IntDate.getNow,
+};
+
 // for TextEncoder and TextDecoder
 const applyGlobalPolyfills = () => {
   const { TextEncoder, TextDecoder } = require("text-encoding")