@dynamic-labs/react-native-extension 4.0.0-alpha.4 → 4.0.0-alpha.5

package/index.js

@@ -0,0 +1,281 @@
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { WebView as WebView$1 } from 'react-native-webview';
+import { parseMessageTransportData, createRequestChannel } from '@dynamic-labs/message-transport';
+import { Logger } from '@dynamic-labs/logger';
+import { StyleSheet } from 'react-native';
+import { jsx } from 'react/jsx-runtime';
+import { createPasskey, PasskeyStamper } from '@turnkey/react-native-passkey-stamper';
+import { createURL, openURL } from 'expo-linking';
+import { openAuthSessionAsync } from 'expo-web-browser';
+import { getItemAsync, setItemAsync, deleteItemAsync } from 'expo-secure-store';
+
+var version = "4.0.0-alpha.5";
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+const logger = new Logger('react-native-extension');
+
+const useIsMounted = () => {
+  const isMountedRef = useRef(true);
+  useEffect(() => () => {
+    isMountedRef.current = false;
+  }, []);
+  return useCallback(() => isMountedRef.current, [isMountedRef]);
+};
+
+const useMessageTransportWebViewBridge = (core, webViewRef) => {
+  const canBroadcastMessages = useIsMounted();
+  /**
+   * Receive a message from the webview and forward it to the client
+   * message transport
+   */
+  const onMessageHandler = event => {
+    if (!canBroadcastMessages()) return;
+    let parsedData = null;
+    try {
+      parsedData = JSON.parse(event.nativeEvent.data);
+    } catch (err) {
+      logger.debug('error parsing data', err);
+      return;
+    }
+    const message = parseMessageTransportData(parsedData);
+    if (!message) {
+      logger.debug('invalid message', message);
+      return;
+    }
+    /**
+     * Only forward messages from the created by the webview
+     */
+    if (message.origin === 'webview') {
+      core.messageTransport.emit(message);
+    }
+  };
+  /**
+   * Send messages created by the client to the webview
+   */
+  useEffect(() => {
+    const sendMessageToWebView = message => {
+      if (!canBroadcastMessages()) return;
+      /**
+       * Only forward messages to the webview
+       * that where created by the client/host
+       */
+      if (message.origin === 'host' && webViewRef.current) {
+        webViewRef.current.postMessage(JSON.stringify(message));
+      }
+    };
+    core.messageTransport.on(sendMessageToWebView);
+    return () => {
+      core.messageTransport.off(sendMessageToWebView);
+    };
+  }, [core.messageTransport, webViewRef, canBroadcastMessages]);
+  return {
+    onMessageHandler
+  };
+};
+
+const useWebViewVisibility = core => {
+  const webViewVisibilityRequestChannelRef = useRef(createRequestChannel(core.messageTransport));
+  const [visible, setVisible] = useState(false);
+  useEffect(() => webViewVisibilityRequestChannelRef.current.handle('setVisibility', setVisible), [setVisible]);
+  return {
+    visible
+  };
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    bottom: 0,
+    flex: 1,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: '100%'
+  },
+  hide: {
+    elevation: 0,
+    opacity: 0,
+    zIndex: -10000
+  },
+  show: {
+    elevation: 10000,
+    opacity: 1,
+    zIndex: 10000
+  },
+  webview: {
+    backgroundColor: 'transparent',
+    flex: 1
+  }
+});
+
+const WebView = ({
+  webviewUrl,
+  core,
+  webviewDebuggingEnabled: _webviewDebuggingEnabled = false
+}) => {
+  const webViewRef = useRef(null);
+  const {
+    visible
+  } = useWebViewVisibility(core);
+  const {
+    onMessageHandler
+  } = useMessageTransportWebViewBridge(core, webViewRef);
+  const containerStyles = [styles['container'], visible ? styles.show : styles.hide];
+  return /*#__PURE__*/jsx(WebView$1, {
+    ref: webViewRef,
+    source: {
+      uri: webviewUrl
+    },
+    containerStyle: containerStyles,
+    style: styles['webview'],
+    onMessage: onMessageHandler,
+    hideKeyboardAccessoryView: true,
+    webviewDebuggingEnabled: _webviewDebuggingEnabled,
+    onError: () => core.initialization.error = new Error('Could not load Dynamic WebView')
+  }, 'webview');
+};
+const createWebView = props => {
+  const WebViewWrapper = () => /*#__PURE__*/jsx(WebView, _extends({}, props));
+  return WebViewWrapper;
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(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());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const setupFetchHandler = core => {
+  const fetchRequestChannel = createRequestChannel(core.messageTransport);
+  fetchRequestChannel.handle('fetch', (input, init) => __awaiter(void 0, void 0, void 0, function* () {
+    const response = yield fetch(input, init);
+    const responseBody = yield response.text();
+    return {
+      body: responseBody,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      headers: Object.fromEntries(response.headers.entries()),
+      status: response.status,
+      statusText: response.statusText
+    };
+  }));
+};
+
+const setupPasskeyHandler = core => {
+  const passkeysRequestChannel = createRequestChannel(core.messageTransport);
+  passkeysRequestChannel.handle('createPasskey', _a => __awaiter(void 0, [_a], void 0, function* ({
+    publicKey
+  }) {
+    try {
+      const {
+        attestation
+      } = yield createPasskey(publicKey);
+      return {
+        attestation
+      };
+    } catch (err) {
+      logger.error(err);
+      throw err;
+    }
+  }));
+  passkeysRequestChannel.handle('passkeyStamp', (rpId, payload) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      const stamper = new PasskeyStamper({
+        rpId
+      });
+      const stamped = yield stamper.stamp(payload);
+      return stamped;
+    } catch (err) {
+      logger.error(err);
+      throw err;
+    }
+  }));
+};
+
+const setupPlatformHandler = core => {
+  const platformChannel = createRequestChannel(core.messageTransport);
+  core.manifest.setPlatform('react-native');
+  core.manifest.setRedirectUrl(createURL(''));
+  platformChannel.handle('openURL', url => __awaiter(void 0, void 0, void 0, function* () {
+    yield openURL(url);
+  }));
+  platformChannel.handle('openAuthenticationWindow', _a => __awaiter(void 0, [_a], void 0, function* ({
+    url,
+    redirectUrl
+  }) {
+    const result = yield openAuthSessionAsync(url, redirectUrl);
+    // When not a success, result can only have a type which is a string describing
+    // what happened in a single word.
+    if (result.type !== 'success') throw new Error(result.type);
+    return result.url;
+  }));
+};
+
+const setupSecureStorageHandler = core => {
+  const secureStorageRequestChannel = createRequestChannel(core.messageTransport);
+  secureStorageRequestChannel.handle('getSecureItem', getItemAsync);
+  secureStorageRequestChannel.handle('setSecureItem', setItemAsync);
+  secureStorageRequestChannel.handle('deleteSecureItem', deleteItemAsync);
+};
+
+const defaultWebviewUrl = `https://webview.dynamicauth.com/${version}`;
+const ReactNativeExtension = ({
+  webviewUrl: _webviewUrl = defaultWebviewUrl,
+  webviewDebuggingEnabled,
+  appOrigin
+} = {}) => (_, core) => {
+  if (appOrigin) core.manifest.setAppOrigin(appOrigin);
+  setupPasskeyHandler(core);
+  setupFetchHandler(core);
+  setupPlatformHandler(core);
+  setupSecureStorageHandler(core);
+  return {
+    reactNative: {
+      WebView: createWebView({
+        core,
+        webviewDebuggingEnabled,
+        webviewUrl: _webviewUrl
+      })
+    }
+  };
+};
+
+export { ReactNativeExtension };

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@dynamic-labs/react-native-extension",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "main": "./index.cjs",
-  "module": "./src/index.js",
+  "module": "./index.js",
   "types": "./src/index.d.ts",
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./src/index.d.ts",
-      "import": "./src/index.js",
-      "require": "./src/index.cjs"
+      "import": "./index.js",
+      "require": "./index.cjs"
     },
     "./package.json": "./package.json"
   },
   "dependencies": {
     "@turnkey/react-native-passkey-stamper": "0.2.5",
-    "@dynamic-labs/client": "4.0.0-alpha.4",
-    "@dynamic-labs/logger": "4.0.0-alpha.4",
-    "@dynamic-labs/message-transport": "4.0.0-alpha.4"
+    "@dynamic-labs/client": "4.0.0-alpha.5",
+    "@dynamic-labs/logger": "4.0.0-alpha.5",
+    "@dynamic-labs/message-transport": "4.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",