@dynamic-labs/react-native-extension 4.80.0 → 4.83.0

package/index.cjs

@@ -9,12 +9,12 @@ var reactNativeWebview = require('react-native-webview');
 var logger$1 = require('@dynamic-labs/logger');
 var messageTransport = require('@dynamic-labs/message-transport');
 var jsxRuntime = require('react/jsx-runtime');
+var expoModulesCore = require('expo-modules-core');
 var reactNativePasskey = require('react-native-passkey');
 var expoLinking = require('expo-linking');
 var expoWebBrowser = require('expo-web-browser');
 var expoSecureStore = require('expo-secure-store');
 var reactNativePasskeyStamper = require('@turnkey/react-native-passkey-stamper');
-var expoModulesCore = require('expo-modules-core');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var version = "4.80.0";
+var version = "4.83.0";
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -289,20 +289,39 @@ const assignStartTimeToUrl = url => {
 };
 
 const waasOrigins = ['https://app.dynamic-preprod.xyz', 'https://app.dynamicauth.com'];
+const turnkeyOrigins = ['https://recovery.turnkey.com', 'https://export.turnkey.com'];
 const isNonProductionBuild = () => process.env['NODE_ENV'] !== 'production';
 const isAllowedWaasOrigin = origin => {
   if (waasOrigins.includes(origin)) {
     return true;
   }
-  // Dev-only fallback: allow localhost so mobile-demo can load the iframe
-  // against a local redcoast stack. Never allowed in production bundles to
-  // prevent a malicious app on the device from impersonating the iframe.
   if (isNonProductionBuild() && /^http:\/\/localhost:\d+$/.test(origin)) {
     return true;
   }
   return false;
 };
-const turnkeyOrigins = ['https://recovery.turnkey.com', 'https://export.turnkey.com'];
+const parseUrl = url => {
+  try {
+    return new URL(url);
+  } catch (error) {
+    logger.error('Failed to get origin from url', error);
+    return null;
+  }
+};
+const shouldAllowNavigation = (request, webViewUrl) => {
+  const requestUrl = parseUrl(request.url);
+  if (!requestUrl) return false;
+  // Sub-frame (iframe) requests are controlled by the trusted web app
+  // content — allow them through without restriction.
+  if (!request.isTopFrame) return true;
+  if (webViewUrl.origin === requestUrl.origin) return true;
+  if (requestUrl.pathname.startsWith('/waas-v1') && isAllowedWaasOrigin(requestUrl.origin)) {
+    return true;
+  }
+  if (turnkeyOrigins.includes(requestUrl.origin)) return true;
+  return false;
+};
+
 const WebView = ({
   webviewUrl: initialWebViewUrl,
   core,
@@ -410,40 +429,12 @@ const WebView = ({
     onRenderProcessGone: blockAndReloadWebViewOsKill,
     onError: onWebViewLoadError,
     setSupportMultipleWindows: false,
-    onShouldStartLoadWithRequest: request => {
-      const requestUrl = getUrl(request.url);
-      // Invalid URL, never navigate to it
-      if (!requestUrl) return false;
-      // Sub-frame (iframe) requests are controlled by the trusted web app
-      // content — allow them through without restriction. On iOS,
-      // onShouldStartLoadWithRequest fires for iframe navigations too,
-      // unlike Android, which is why third-party iframes (e.g. Banxa
-      // checkout) would otherwise be blocked only on iOS.
-      if (!request.isTopFrame) return true;
-      // Same origin as the webview, allow top-level navigation
-      if (webViewUrl.origin === requestUrl.origin) {
-        return true;
-      }
-      // Allow WAAS top-level navigation
-      if (requestUrl.pathname.startsWith('/waas-v1') && isAllowedWaasOrigin(requestUrl.origin)) {
-        return true;
-      }
-      // Allow TurnkeyV1 top-level navigation
-      if (turnkeyOrigins.includes(requestUrl.origin)) {
-        return true;
-      }
-      return false;
-    }
+    onShouldStartLoadWithRequest: request => shouldAllowNavigation({
+      isTopFrame: request.isTopFrame,
+      url: request.url
+    }, webViewUrl)
   });
 };
-const getUrl = url => {
-  try {
-    return new URL(url);
-  } catch (error) {
-    logger.error('Failed to get origin from url', error);
-    return null;
-  }
-};
 const createWebView = internalProps => {
   const WebViewWrapper = props => /*#__PURE__*/jsxRuntime.jsx(WebView, _extends({}, internalProps, props));
   return WebViewWrapper;
@@ -458,6 +449,111 @@ For more information, please refer to the documentation:
 https://docs.dynamic.xyz/react-native/react-native-extension
 `;
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+const NATIVE_MODULE_NAME = 'EmbeddedWebView';
+const getEmbeddedWebView = () => {
+  try {
+    return expoModulesCore.requireNativeModule(NATIVE_MODULE_NAME);
+  } catch (_a) {
+    logger.warn('Could not get EmbeddedWebView native module, using unavailable fallback');
+    const unavailableError = new Error('EmbeddedWebView is not available');
+    const unavailable = {
+      addListener: () => ({
+        remove: () => undefined
+      }),
+      destroy: () => Promise.reject(unavailableError),
+      postMessage: () => Promise.reject(unavailableError),
+      respondToShouldStartLoad: () => Promise.reject(unavailableError),
+      setDebuggingEnabled: () => Promise.reject(unavailableError),
+      setUrl: () => Promise.reject(unavailableError),
+      setVisible: () => Promise.reject(unavailableError)
+    };
+    return unavailable;
+  }
+};
+
+// Wires the JS-side bridge to the native WKWebView singleton owned by Swift.
+// This is intentionally not a React component: the embedded webview lives
+// outside the React tree (in a dedicated UIWindow on iOS), so its setup runs
+// once when the SDK is initialised — there's nothing to mount or unmount.
+//
+// Returns a teardown that removes every JS-side subscription. The native
+// singleton is intentionally NOT destroyed — re-running setup with a fresh
+// `core` (e.g. on client recreation with a new environmentId) just reloads
+// the existing webview via setUrl.
+const setupEmbeddedWebView = ({
+  webviewUrl,
+  core,
+  webviewDebuggingEnabled: _webviewDebuggingEnabled = false
+}) => {
+  const native = getEmbeddedWebView();
+  const builtUrl = assignStartTimeToUrl(assignEnvironmentIdToUrl(webviewUrl, core.environmentId));
+  const visibilityChannel = messageTransport.createRequestChannel(core.messageTransport);
+  const removeVisibilityHandler = visibilityChannel.handle('setVisibility', visible => {
+    native.setVisible(visible).catch(err => {
+      logger.warn('EmbeddedWebView.setVisible failed', err);
+    });
+  });
+  const handleHostMessage = message => {
+    if (message.origin !== 'host') return;
+    native.postMessage(JSON.stringify(message, messageTransport.messageTransportDataJsonReplacer)).catch(err => {
+      logger.warn('EmbeddedWebView.postMessage failed', err);
+    });
+  };
+  core.messageTransport.on(handleHostMessage);
+  const onMessageSub = native.addListener('onMessage', event => {
+    let parsed = null;
+    try {
+      parsed = JSON.parse(event.message, messageTransport.messageTransportDataJsonReviver);
+    } catch (_a) {
+      return;
+    }
+    const message = messageTransport.parseMessageTransportData(parsed);
+    if (!message) return;
+    if (message.origin === 'webview') {
+      core.messageTransport.emit(message);
+    }
+  });
+  const onShouldStartLoadSub = native.addListener('onShouldStartLoad', event => {
+    const allow = shouldAllowNavigation({
+      isTopFrame: event.isTopFrame,
+      url: event.url
+    }, builtUrl);
+    native.respondToShouldStartLoad(event.id, allow).catch(err => {
+      logger.warn('EmbeddedWebView.respondToShouldStartLoad failed', err);
+    });
+  });
+  const onLoadErrorSub = native.addListener('onLoadError', event => {
+    logger.warn('EmbeddedWebView load error', event);
+    logger.instrument('Embedded webview load error', {
+      environmentId: core.environmentId,
+      errorCode: event.code,
+      errorDescription: event.description,
+      errorDomain: event.domain,
+      failedUrl: event.url,
+      hostSdkSessionId: core.hostSdkSessionId,
+      isProvisional: event.isProvisional,
+      key: 'webview.embedded.load_error',
+      time: 0,
+      webviewUrl: builtUrl.toString()
+    });
+    core.initialization.error = new WebViewFailedToLoadError();
+  });
+  native.setDebuggingEnabled(_webviewDebuggingEnabled).catch(err => {
+    logger.warn('EmbeddedWebView.setDebuggingEnabled failed', err);
+  });
+  native.setUrl(builtUrl.toString()).catch(err => {
+    logger.warn('EmbeddedWebView.setUrl failed', err);
+  });
+  return () => {
+    removeVisibilityHandler();
+    core.messageTransport.off(handleHostMessage);
+    onMessageSub.remove();
+    onShouldStartLoadSub.remove();
+    onLoadErrorSub.remove();
+  };
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -759,10 +855,17 @@ const setupKeychainHandler = core => {
 };
 
 const defaultWebviewUrl = `https://webview.dynamicauth.com/${version}`;
+// The native webview singleton outlives the JS bridge, so a re-invocation
+// of the extension factory (e.g. when the consumer recreates the client
+// with a new environmentId) would otherwise stack JS-side listeners on top
+// of the prior ones. We retain the previous teardown at module scope and
+// run it before wiring the next bridge.
+let previousEmbeddedWebViewTeardown = null;
 const ReactNativeExtension = ({
   webviewUrl: _webviewUrl = defaultWebviewUrl,
   webviewDebuggingEnabled,
-  appOrigin
+  appOrigin,
+  embeddedWebView: _embeddedWebView = false
 } = {}) => (_, core) => {
   const isPlatformSupportedByWebView = reactNative.Platform.OS === 'android' || reactNative.Platform.OS === 'ios';
   /**
@@ -782,6 +885,36 @@ const ReactNativeExtension = ({
   setupPlatformHandler(core);
   setupStorageHandler(core);
   setupKeychainHandler(core);
+  // Native overlay-webview path supported on iOS (WKWebView) and Android
+  // (android.webkit.WebView). Other platforms fall back to react-native-webview.
+  const useNativeEmbeddedWebView = _embeddedWebView && (reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android');
+  if (useNativeEmbeddedWebView) {
+    // The native WKWebView lives in its own UIWindow, outside the React
+    // tree. Wire the JS bridge once at extension construction and hand the
+    // consumer a no-op component so its render never touches the webview.
+    if (previousEmbeddedWebViewTeardown) {
+      previousEmbeddedWebViewTeardown();
+      previousEmbeddedWebViewTeardown = null;
+    }
+    try {
+      previousEmbeddedWebViewTeardown = setupEmbeddedWebView({
+        core,
+        webviewDebuggingEnabled,
+        webviewUrl: _webviewUrl
+      });
+    } catch (err) {
+      // Setup failed — leave the slot empty so the next invocation isn't
+      // wedged with a stale teardown reference. The error itself is left
+      // to bubble: the consumer needs to see that the bridge isn't wired.
+      previousEmbeddedWebViewTeardown = null;
+      throw err;
+    }
+    return {
+      reactNative: {
+        WebView: () => null
+      }
+    };
+  }
   return {
     reactNative: {
       WebView: createWebView({

package/index.js

@@ -5,14 +5,14 @@ import { WebView as WebView$1 } from 'react-native-webview';
 import { Logger } from '@dynamic-labs/logger';
 import { messageTransportDataJsonReviver, parseMessageTransportData, messageTransportDataJsonReplacer, createRequestChannel } from '@dynamic-labs/message-transport';
 import { jsx } from 'react/jsx-runtime';
+import { requireNativeModule } from 'expo-modules-core';
 import { Passkey } from 'react-native-passkey';
 import { createURL, getInitialURL, addEventListener, openURL } from 'expo-linking';
 import { openAuthSessionAsync } from 'expo-web-browser';
 import { getItemAsync, deleteItemAsync, setItemAsync } from 'expo-secure-store';
 import { createPasskey, PasskeyStamper } from '@turnkey/react-native-passkey-stamper';
-import { requireNativeModule } from 'expo-modules-core';
 
-var version = "4.80.0";
+var version = "4.83.0";
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -267,20 +267,39 @@ const assignStartTimeToUrl = url => {
 };
 
 const waasOrigins = ['https://app.dynamic-preprod.xyz', 'https://app.dynamicauth.com'];
+const turnkeyOrigins = ['https://recovery.turnkey.com', 'https://export.turnkey.com'];
 const isNonProductionBuild = () => process.env['NODE_ENV'] !== 'production';
 const isAllowedWaasOrigin = origin => {
   if (waasOrigins.includes(origin)) {
     return true;
   }
-  // Dev-only fallback: allow localhost so mobile-demo can load the iframe
-  // against a local redcoast stack. Never allowed in production bundles to
-  // prevent a malicious app on the device from impersonating the iframe.
   if (isNonProductionBuild() && /^http:\/\/localhost:\d+$/.test(origin)) {
     return true;
   }
   return false;
 };
-const turnkeyOrigins = ['https://recovery.turnkey.com', 'https://export.turnkey.com'];
+const parseUrl = url => {
+  try {
+    return new URL(url);
+  } catch (error) {
+    logger.error('Failed to get origin from url', error);
+    return null;
+  }
+};
+const shouldAllowNavigation = (request, webViewUrl) => {
+  const requestUrl = parseUrl(request.url);
+  if (!requestUrl) return false;
+  // Sub-frame (iframe) requests are controlled by the trusted web app
+  // content — allow them through without restriction.
+  if (!request.isTopFrame) return true;
+  if (webViewUrl.origin === requestUrl.origin) return true;
+  if (requestUrl.pathname.startsWith('/waas-v1') && isAllowedWaasOrigin(requestUrl.origin)) {
+    return true;
+  }
+  if (turnkeyOrigins.includes(requestUrl.origin)) return true;
+  return false;
+};
+
 const WebView = ({
   webviewUrl: initialWebViewUrl,
   core,
@@ -388,40 +407,12 @@ const WebView = ({
     onRenderProcessGone: blockAndReloadWebViewOsKill,
     onError: onWebViewLoadError,
     setSupportMultipleWindows: false,
-    onShouldStartLoadWithRequest: request => {
-      const requestUrl = getUrl(request.url);
-      // Invalid URL, never navigate to it
-      if (!requestUrl) return false;
-      // Sub-frame (iframe) requests are controlled by the trusted web app
-      // content — allow them through without restriction. On iOS,
-      // onShouldStartLoadWithRequest fires for iframe navigations too,
-      // unlike Android, which is why third-party iframes (e.g. Banxa
-      // checkout) would otherwise be blocked only on iOS.
-      if (!request.isTopFrame) return true;
-      // Same origin as the webview, allow top-level navigation
-      if (webViewUrl.origin === requestUrl.origin) {
-        return true;
-      }
-      // Allow WAAS top-level navigation
-      if (requestUrl.pathname.startsWith('/waas-v1') && isAllowedWaasOrigin(requestUrl.origin)) {
-        return true;
-      }
-      // Allow TurnkeyV1 top-level navigation
-      if (turnkeyOrigins.includes(requestUrl.origin)) {
-        return true;
-      }
-      return false;
-    }
+    onShouldStartLoadWithRequest: request => shouldAllowNavigation({
+      isTopFrame: request.isTopFrame,
+      url: request.url
+    }, webViewUrl)
   });
 };
-const getUrl = url => {
-  try {
-    return new URL(url);
-  } catch (error) {
-    logger.error('Failed to get origin from url', error);
-    return null;
-  }
-};
 const createWebView = internalProps => {
   const WebViewWrapper = props => /*#__PURE__*/jsx(WebView, _extends({}, internalProps, props));
   return WebViewWrapper;
@@ -436,6 +427,111 @@ For more information, please refer to the documentation:
 https://docs.dynamic.xyz/react-native/react-native-extension
 `;
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+const NATIVE_MODULE_NAME = 'EmbeddedWebView';
+const getEmbeddedWebView = () => {
+  try {
+    return requireNativeModule(NATIVE_MODULE_NAME);
+  } catch (_a) {
+    logger.warn('Could not get EmbeddedWebView native module, using unavailable fallback');
+    const unavailableError = new Error('EmbeddedWebView is not available');
+    const unavailable = {
+      addListener: () => ({
+        remove: () => undefined
+      }),
+      destroy: () => Promise.reject(unavailableError),
+      postMessage: () => Promise.reject(unavailableError),
+      respondToShouldStartLoad: () => Promise.reject(unavailableError),
+      setDebuggingEnabled: () => Promise.reject(unavailableError),
+      setUrl: () => Promise.reject(unavailableError),
+      setVisible: () => Promise.reject(unavailableError)
+    };
+    return unavailable;
+  }
+};
+
+// Wires the JS-side bridge to the native WKWebView singleton owned by Swift.
+// This is intentionally not a React component: the embedded webview lives
+// outside the React tree (in a dedicated UIWindow on iOS), so its setup runs
+// once when the SDK is initialised — there's nothing to mount or unmount.
+//
+// Returns a teardown that removes every JS-side subscription. The native
+// singleton is intentionally NOT destroyed — re-running setup with a fresh
+// `core` (e.g. on client recreation with a new environmentId) just reloads
+// the existing webview via setUrl.
+const setupEmbeddedWebView = ({
+  webviewUrl,
+  core,
+  webviewDebuggingEnabled: _webviewDebuggingEnabled = false
+}) => {
+  const native = getEmbeddedWebView();
+  const builtUrl = assignStartTimeToUrl(assignEnvironmentIdToUrl(webviewUrl, core.environmentId));
+  const visibilityChannel = createRequestChannel(core.messageTransport);
+  const removeVisibilityHandler = visibilityChannel.handle('setVisibility', visible => {
+    native.setVisible(visible).catch(err => {
+      logger.warn('EmbeddedWebView.setVisible failed', err);
+    });
+  });
+  const handleHostMessage = message => {
+    if (message.origin !== 'host') return;
+    native.postMessage(JSON.stringify(message, messageTransportDataJsonReplacer)).catch(err => {
+      logger.warn('EmbeddedWebView.postMessage failed', err);
+    });
+  };
+  core.messageTransport.on(handleHostMessage);
+  const onMessageSub = native.addListener('onMessage', event => {
+    let parsed = null;
+    try {
+      parsed = JSON.parse(event.message, messageTransportDataJsonReviver);
+    } catch (_a) {
+      return;
+    }
+    const message = parseMessageTransportData(parsed);
+    if (!message) return;
+    if (message.origin === 'webview') {
+      core.messageTransport.emit(message);
+    }
+  });
+  const onShouldStartLoadSub = native.addListener('onShouldStartLoad', event => {
+    const allow = shouldAllowNavigation({
+      isTopFrame: event.isTopFrame,
+      url: event.url
+    }, builtUrl);
+    native.respondToShouldStartLoad(event.id, allow).catch(err => {
+      logger.warn('EmbeddedWebView.respondToShouldStartLoad failed', err);
+    });
+  });
+  const onLoadErrorSub = native.addListener('onLoadError', event => {
+    logger.warn('EmbeddedWebView load error', event);
+    logger.instrument('Embedded webview load error', {
+      environmentId: core.environmentId,
+      errorCode: event.code,
+      errorDescription: event.description,
+      errorDomain: event.domain,
+      failedUrl: event.url,
+      hostSdkSessionId: core.hostSdkSessionId,
+      isProvisional: event.isProvisional,
+      key: 'webview.embedded.load_error',
+      time: 0,
+      webviewUrl: builtUrl.toString()
+    });
+    core.initialization.error = new WebViewFailedToLoadError();
+  });
+  native.setDebuggingEnabled(_webviewDebuggingEnabled).catch(err => {
+    logger.warn('EmbeddedWebView.setDebuggingEnabled failed', err);
+  });
+  native.setUrl(builtUrl.toString()).catch(err => {
+    logger.warn('EmbeddedWebView.setUrl failed', err);
+  });
+  return () => {
+    removeVisibilityHandler();
+    core.messageTransport.off(handleHostMessage);
+    onMessageSub.remove();
+    onShouldStartLoadSub.remove();
+    onLoadErrorSub.remove();
+  };
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -737,10 +833,17 @@ const setupKeychainHandler = core => {
 };
 
 const defaultWebviewUrl = `https://webview.dynamicauth.com/${version}`;
+// The native webview singleton outlives the JS bridge, so a re-invocation
+// of the extension factory (e.g. when the consumer recreates the client
+// with a new environmentId) would otherwise stack JS-side listeners on top
+// of the prior ones. We retain the previous teardown at module scope and
+// run it before wiring the next bridge.
+let previousEmbeddedWebViewTeardown = null;
 const ReactNativeExtension = ({
   webviewUrl: _webviewUrl = defaultWebviewUrl,
   webviewDebuggingEnabled,
-  appOrigin
+  appOrigin,
+  embeddedWebView: _embeddedWebView = false
 } = {}) => (_, core) => {
   const isPlatformSupportedByWebView = Platform.OS === 'android' || Platform.OS === 'ios';
   /**
@@ -760,6 +863,36 @@ const ReactNativeExtension = ({
   setupPlatformHandler(core);
   setupStorageHandler(core);
   setupKeychainHandler(core);
+  // Native overlay-webview path supported on iOS (WKWebView) and Android
+  // (android.webkit.WebView). Other platforms fall back to react-native-webview.
+  const useNativeEmbeddedWebView = _embeddedWebView && (Platform.OS === 'ios' || Platform.OS === 'android');
+  if (useNativeEmbeddedWebView) {
+    // The native WKWebView lives in its own UIWindow, outside the React
+    // tree. Wire the JS bridge once at extension construction and hand the
+    // consumer a no-op component so its render never touches the webview.
+    if (previousEmbeddedWebViewTeardown) {
+      previousEmbeddedWebViewTeardown();
+      previousEmbeddedWebViewTeardown = null;
+    }
+    try {
+      previousEmbeddedWebViewTeardown = setupEmbeddedWebView({
+        core,
+        webviewDebuggingEnabled,
+        webviewUrl: _webviewUrl
+      });
+    } catch (err) {
+      // Setup failed — leave the slot empty so the next invocation isn't
+      // wedged with a stale teardown reference. The error itself is left
+      // to bubble: the consumer needs to see that the bridge isn't wired.
+      previousEmbeddedWebViewTeardown = null;
+      throw err;
+    }
+    return {
+      reactNative: {
+        WebView: () => null
+      }
+    };
+  }
   return {
     reactNative: {
       WebView: createWebView({