@swype-org/react-sdk 0.1.49 → 0.1.52

package/dist/index.d.cts

@@ -379,6 +379,59 @@ interface SwypePaymentProps {
 }
 declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Cross-origin iframe passkey delegation via postMessage.
+ *
+ * When the webview-app runs inside a cross-origin iframe, WebAuthn
+ * ceremonies cannot execute from within the iframe on Safari. For passkey
+ * creation, we first attempt a direct `navigator.credentials.create()`
+ * call (works in Chrome/Firefox with the iframe permissions policy). If
+ * that fails (Safari), we open a same-origin pop-up window on the Swype
+ * domain to perform the ceremony, then relay the result back via
+ * `postMessage`.
+ *
+ * Passkey *assertion* (`navigator.credentials.get`) still delegates to
+ * the parent page via postMessage as before.
+ */
+/**
+ * Thrown when `navigator.credentials.create()` fails inside a
+ * cross-origin iframe (Safari). The UI layer should catch this and
+ * offer the user a button that opens the Swype passkey pop-up.
+ */
+declare class PasskeyIframeBlockedError extends Error {
+    constructor(message?: string);
+}
+interface PasskeyPopupOptions {
+    challenge: string;
+    rpId: string;
+    rpName: string;
+    userId: string;
+    userName: string;
+    userDisplayName: string;
+    pubKeyCredParams: Array<{
+        alg: number;
+        type: string;
+    }>;
+    authenticatorSelection?: {
+        authenticatorAttachment?: string;
+        residentKey?: string;
+        userVerification?: string;
+    };
+    timeout?: number;
+}
+/**
+ * Opens a same-origin pop-up window on the Swype domain to perform
+ * passkey creation. Used as a fallback when Safari blocks
+ * `navigator.credentials.create()` inside a cross-origin iframe.
+ *
+ * Must be called from a user-gesture handler (e.g. button click) to
+ * avoid the browser's pop-up blocker.
+ */
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions): Promise<{
+    credentialId: string;
+    publicKey: string;
+}>;
+
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**
  * Creates a WebAuthn passkey credential.
@@ -398,6 +451,15 @@ declare function createPasskeyCredential(params: {
     credentialId: string;
     publicKey: string;
 }>;
+/**
+ * Builds the {@link PasskeyPopupOptions} for a user. Called by the UI
+ * layer when it needs to open the passkey creation pop-up after
+ * `createPasskeyCredential` throws {@link PasskeyIframeBlockedError}.
+ */
+declare function buildPasskeyPopupOptions(params: {
+    userId: string;
+    displayName: string;
+}): PasskeyPopupOptions;
 /**
  * @deprecated Use {@link findDevicePasskey} instead, which checks all
  * credentials in a single WebAuthn call.
@@ -596,4 +658,4 @@ interface SelectSourceScreenProps {
 }
 declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -379,6 +379,59 @@ interface SwypePaymentProps {
 }
 declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Cross-origin iframe passkey delegation via postMessage.
+ *
+ * When the webview-app runs inside a cross-origin iframe, WebAuthn
+ * ceremonies cannot execute from within the iframe on Safari. For passkey
+ * creation, we first attempt a direct `navigator.credentials.create()`
+ * call (works in Chrome/Firefox with the iframe permissions policy). If
+ * that fails (Safari), we open a same-origin pop-up window on the Swype
+ * domain to perform the ceremony, then relay the result back via
+ * `postMessage`.
+ *
+ * Passkey *assertion* (`navigator.credentials.get`) still delegates to
+ * the parent page via postMessage as before.
+ */
+/**
+ * Thrown when `navigator.credentials.create()` fails inside a
+ * cross-origin iframe (Safari). The UI layer should catch this and
+ * offer the user a button that opens the Swype passkey pop-up.
+ */
+declare class PasskeyIframeBlockedError extends Error {
+    constructor(message?: string);
+}
+interface PasskeyPopupOptions {
+    challenge: string;
+    rpId: string;
+    rpName: string;
+    userId: string;
+    userName: string;
+    userDisplayName: string;
+    pubKeyCredParams: Array<{
+        alg: number;
+        type: string;
+    }>;
+    authenticatorSelection?: {
+        authenticatorAttachment?: string;
+        residentKey?: string;
+        userVerification?: string;
+    };
+    timeout?: number;
+}
+/**
+ * Opens a same-origin pop-up window on the Swype domain to perform
+ * passkey creation. Used as a fallback when Safari blocks
+ * `navigator.credentials.create()` inside a cross-origin iframe.
+ *
+ * Must be called from a user-gesture handler (e.g. button click) to
+ * avoid the browser's pop-up blocker.
+ */
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions): Promise<{
+    credentialId: string;
+    publicKey: string;
+}>;
+
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**
  * Creates a WebAuthn passkey credential.
@@ -398,6 +451,15 @@ declare function createPasskeyCredential(params: {
     credentialId: string;
     publicKey: string;
 }>;
+/**
+ * Builds the {@link PasskeyPopupOptions} for a user. Called by the UI
+ * layer when it needs to open the passkey creation pop-up after
+ * `createPasskeyCredential` throws {@link PasskeyIframeBlockedError}.
+ */
+declare function buildPasskeyPopupOptions(params: {
+    userId: string;
+    displayName: string;
+}): PasskeyPopupOptions;
 /**
  * @deprecated Use {@link findDevicePasskey} instead, which checks all
  * credentials in a single WebAuthn call.
@@ -596,4 +658,4 @@ interface SelectSourceScreenProps {
 }
 declare function SelectSourceScreen({ choices, selectedChainName, selectedTokenSymbol, recommended, onChainChange, onTokenChange, onConfirm, onLogout, }: SelectSourceScreenProps): react_jsx_runtime.JSX.Element;
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, IconCircle, type ListResponse, type MerchantAuthorization, type MerchantPublicKey, OutlineButton, PasskeyIframeBlockedError, type PaymentStep, PoweredByFooter, PrimaryButton, type Provider, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, type SourceOption, type SourceSelection, type SourceType, Spinner, type StepItem, StepList, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.js

@@ -655,6 +655,12 @@ function normalizeSignature(sig) {
 }
 
 // src/passkey-delegation.ts
+var PasskeyIframeBlockedError = class extends Error {
+  constructor(message = "Passkey creation is not supported in this browser context.") {
+    super(message);
+    this.name = "PasskeyIframeBlockedError";
+  }
+};
 function isInCrossOriginIframe() {
   if (typeof window === "undefined") return false;
   if (window.parent === window) return false;
@@ -665,57 +671,47 @@ function isInCrossOriginIframe() {
     return true;
   }
 }
-var delegationCounter = 0;
-var DELEGATION_CREATE_TIMEOUT_MS = 6e4;
-var DELEGATION_GET_TIMEOUT_MS = 3e4;
-function delegatePasskeyCreate(options) {
+var POPUP_RESULT_TIMEOUT_MS = 12e4;
+var POPUP_CLOSED_POLL_MS = 500;
+function createPasskeyViaPopup(options) {
   return new Promise((resolve, reject) => {
-    const id = `pc-${++delegationCounter}-${Date.now()}`;
+    const encoded = btoa(JSON.stringify(options));
+    const popupUrl = `${window.location.origin}/passkey-register#${encoded}`;
+    const popup = window.open(popupUrl, "swype-passkey", "width=460,height=600");
+    if (!popup) {
+      reject(new Error("Pop-up blocked. Please allow pop-ups for this site and try again."));
+      return;
+    }
     const timer = setTimeout(() => {
-      window.removeEventListener("message", handler);
+      cleanup();
       reject(new Error("Passkey creation timed out. Please try again."));
-    }, DELEGATION_CREATE_TIMEOUT_MS);
+    }, POPUP_RESULT_TIMEOUT_MS);
+    const closedPoll = setInterval(() => {
+      if (popup.closed) {
+        cleanup();
+        reject(new Error("Passkey setup window was closed before completing."));
+      }
+    }, POPUP_CLOSED_POLL_MS);
     const handler = (event) => {
+      if (event.source !== popup) return;
       const data = event.data;
       if (!data || typeof data !== "object") return;
-      if (data.type !== "swype:passkey-create-response" || data.id !== id) return;
-      clearTimeout(timer);
-      window.removeEventListener("message", handler);
+      if (data.type !== "swype:passkey-popup-result") return;
+      cleanup();
       if (data.error) {
         reject(new Error(data.error));
       } else if (data.result) {
         resolve(data.result);
       } else {
-        reject(new Error("Invalid passkey create response."));
+        reject(new Error("Invalid passkey popup response."));
       }
     };
-    window.addEventListener("message", handler);
-    window.parent.postMessage({ type: "swype:passkey-create-request", id, options }, "*");
-  });
-}
-function delegatePasskeyGet(options) {
-  return new Promise((resolve, reject) => {
-    const id = `pg-${++delegationCounter}-${Date.now()}`;
-    const timer = setTimeout(() => {
-      window.removeEventListener("message", handler);
-      reject(new Error("Passkey verification timed out. Please try again."));
-    }, DELEGATION_GET_TIMEOUT_MS);
-    const handler = (event) => {
-      const data = event.data;
-      if (!data || typeof data !== "object") return;
-      if (data.type !== "swype:passkey-get-response" || data.id !== id) return;
+    function cleanup() {
       clearTimeout(timer);
+      clearInterval(closedPoll);
       window.removeEventListener("message", handler);
-      if (data.error) {
-        reject(new Error(data.error));
-      } else if (data.result) {
-        resolve(data.result);
-      } else {
-        reject(new Error("Invalid passkey get response."));
-      }
-    };
+    }
     window.addEventListener("message", handler);
-    window.parent.postMessage({ type: "swype:passkey-get-request", id, options }, "*");
   });
 }
 
@@ -840,53 +836,51 @@ async function createPasskeyCredential(params) {
   const challenge = new Uint8Array(32);
   crypto.getRandomValues(challenge);
   const rpId = resolvePasskeyRpId();
+  const publicKeyOptions = {
+    challenge,
+    rp: { name: "Swype", id: rpId },
+    user: {
+      id: new TextEncoder().encode(params.userId),
+      name: params.displayName,
+      displayName: params.displayName
+    },
+    pubKeyCredParams: [
+      { alg: -7, type: "public-key" },
+      { alg: -257, type: "public-key" }
+    ],
+    authenticatorSelection: {
+      authenticatorAttachment: "platform",
+      residentKey: "preferred",
+      userVerification: "required"
+    },
+    timeout: 6e4
+  };
   if (isInCrossOriginIframe()) {
-    return delegatePasskeyCreate({
-      challenge: toBase64(challenge),
-      rpId,
-      rpName: "Swype",
-      userId: toBase64(new TextEncoder().encode(params.userId)),
-      userName: params.displayName,
-      userDisplayName: params.displayName,
-      pubKeyCredParams: [
-        { alg: -7, type: "public-key" },
-        { alg: -257, type: "public-key" }
-      ],
-      authenticatorSelection: {
-        authenticatorAttachment: "platform",
-        residentKey: "preferred",
-        userVerification: "required"
-      },
-      timeout: 6e4
-    });
+    try {
+      await waitForDocumentFocus();
+      const credential2 = await navigator.credentials.create({
+        publicKey: publicKeyOptions
+      });
+      if (!credential2) {
+        throw new Error("Passkey creation was cancelled.");
+      }
+      return extractPasskeyResult(credential2);
+    } catch (err) {
+      if (err instanceof PasskeyIframeBlockedError) throw err;
+      if (err instanceof Error && err.message === "Passkey creation was cancelled.") throw err;
+      throw new PasskeyIframeBlockedError();
+    }
   }
   await waitForDocumentFocus();
   const credential = await navigator.credentials.create({
-    publicKey: {
-      challenge,
-      rp: { name: "Swype", id: rpId },
-      user: {
-        id: new TextEncoder().encode(params.userId),
-        name: params.displayName,
-        displayName: params.displayName
-      },
-      pubKeyCredParams: [
-        { alg: -7, type: "public-key" },
-        // ES256 (P-256)
-        { alg: -257, type: "public-key" }
-        // RS256
-      ],
-      authenticatorSelection: {
-        authenticatorAttachment: "platform",
-        residentKey: "preferred",
-        userVerification: "required"
-      },
-      timeout: 6e4
-    }
+    publicKey: publicKeyOptions
   });
   if (!credential) {
     throw new Error("Passkey creation was cancelled.");
   }
+  return extractPasskeyResult(credential);
+}
+function extractPasskeyResult(credential) {
   const response = credential.response;
   const publicKeyBytes = response.getPublicKey?.();
   return {
@@ -894,6 +888,29 @@ async function createPasskeyCredential(params) {
     publicKey: publicKeyBytes ? toBase64(publicKeyBytes) : ""
   };
 }
+function buildPasskeyPopupOptions(params) {
+  const challenge = new Uint8Array(32);
+  crypto.getRandomValues(challenge);
+  const rpId = resolvePasskeyRpId();
+  return {
+    challenge: toBase64(challenge),
+    rpId,
+    rpName: "Swype",
+    userId: toBase64(new TextEncoder().encode(params.userId)),
+    userName: params.displayName,
+    userDisplayName: params.displayName,
+    pubKeyCredParams: [
+      { alg: -7, type: "public-key" },
+      { alg: -257, type: "public-key" }
+    ],
+    authenticatorSelection: {
+      authenticatorAttachment: "platform",
+      residentKey: "preferred",
+      userVerification: "required"
+    },
+    timeout: 6e4
+  };
+}
 async function deviceHasPasskey(credentialId) {
   const found = await findDevicePasskey([credentialId]);
   return found != null;
@@ -903,16 +920,6 @@ async function findDevicePasskey(credentialIds) {
   try {
     const challenge = new Uint8Array(32);
     crypto.getRandomValues(challenge);
-    if (isInCrossOriginIframe()) {
-      const result = await delegatePasskeyGet({
-        challenge: toBase64(challenge),
-        rpId: resolvePasskeyRpId(),
-        allowCredentials: credentialIds.map((id) => ({ type: "public-key", id })),
-        userVerification: "discouraged",
-        timeout: 3e4
-      });
-      return result.credentialId;
-    }
     await waitForDocumentFocus();
     const assertion = await navigator.credentials.get({
       publicKey: {
@@ -1411,48 +1418,31 @@ function useTransferSigning(pollIntervalMs = 2e3, options) {
         }
         const hashBytes = hexToBytes(payload.userOpHash);
         let signedUserOp;
-        if (isInCrossOriginIframe()) {
-          const delegatedResult = await delegatePasskeyGet({
-            challenge: toBase64(hashBytes),
+        const allowCredentials = payload.passkeyCredentialId ? [{
+          type: "public-key",
+          id: base64ToBytes(payload.passkeyCredentialId)
+        }] : void 0;
+        await waitForDocumentFocus();
+        const assertion = await navigator.credentials.get({
+          publicKey: {
+            challenge: hashBytes,
             rpId: resolvePasskeyRpId(),
-            allowCredentials: payload.passkeyCredentialId ? [{ type: "public-key", id: payload.passkeyCredentialId }] : void 0,
+            allowCredentials,
             userVerification: "required",
             timeout: 6e4
-          });
-          signedUserOp = {
-            ...payload.userOp,
-            credentialId: delegatedResult.credentialId,
-            signature: delegatedResult.signature,
-            authenticatorData: delegatedResult.authenticatorData,
-            clientDataJSON: delegatedResult.clientDataJSON
-          };
-        } else {
-          const allowCredentials = payload.passkeyCredentialId ? [{
-            type: "public-key",
-            id: base64ToBytes(payload.passkeyCredentialId)
-          }] : void 0;
-          await waitForDocumentFocus();
-          const assertion = await navigator.credentials.get({
-            publicKey: {
-              challenge: hashBytes,
-              rpId: resolvePasskeyRpId(),
-              allowCredentials,
-              userVerification: "required",
-              timeout: 6e4
-            }
-          });
-          if (!assertion) {
-            throw new Error("Passkey authentication was cancelled.");
           }
-          const response = assertion.response;
-          signedUserOp = {
-            ...payload.userOp,
-            credentialId: toBase64(assertion.rawId),
-            signature: toBase64(response.signature),
-            authenticatorData: toBase64(response.authenticatorData),
-            clientDataJSON: toBase64(response.clientDataJSON)
-          };
+        });
+        if (!assertion) {
+          throw new Error("Passkey authentication was cancelled.");
         }
+        const response = assertion.response;
+        signedUserOp = {
+          ...payload.userOp,
+          credentialId: toBase64(assertion.rawId),
+          signature: toBase64(response.signature),
+          authenticatorData: toBase64(response.authenticatorData),
+          clientDataJSON: toBase64(response.clientDataJSON)
+        };
         return await signTransfer(
           apiBaseUrl,
           token ?? "",
@@ -2658,14 +2648,18 @@ function CreatePasskeyScreen({
   onCreatePasskey,
   onBack,
   creating,
-  error
+  error,
+  popupFallback = false,
+  onCreatePasskeyViaPopup
 }) {
   const { tokens } = useSwypeConfig();
+  const handleCreate = popupFallback && onCreatePasskeyViaPopup ? onCreatePasskeyViaPopup : onCreatePasskey;
+  const buttonLabel = popupFallback ? "Open passkey setup" : "Create passkey";
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(PrimaryButton, { onClick: onCreatePasskey, disabled: creating, loading: creating, children: "Create passkey" }),
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: handleCreate, disabled: creating, loading: creating, children: buttonLabel }),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -2678,7 +2672,7 @@ function CreatePasskeyScreen({
             /* @__PURE__ */ jsx("path", { d: "M9 14c0 1.5 1.34 2.5 3 2.5s3-1 3-2.5", stroke: tokens.accent, strokeWidth: "1.2", strokeLinecap: "round" })
           ] }) }),
           /* @__PURE__ */ jsx("h2", { style: headingStyle3(tokens.text), children: "Create your passkey" }),
-          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
+          /* @__PURE__ */ jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: popupFallback ? "Your browser requires a separate window for passkey setup. Tap the button below to continue." : "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
           error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle2(tokens), children: error }),
           /* @__PURE__ */ jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
         ] })
@@ -3863,7 +3857,7 @@ function OpenWalletScreen({
   const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
   const handleOpen = useCallback(() => {
     const opened = window.open(deeplinkUri, "_blank");
-    if (!opened) {
+    if (!opened && window === window.parent) {
       window.location.href = deeplinkUri;
     }
   }, [deeplinkUri]);
@@ -4131,6 +4125,7 @@ function SwypePaymentInner({
   const [transfer, setTransfer] = useState(null);
   const [creatingTransfer, setCreatingTransfer] = useState(false);
   const [registeringPasskey, setRegisteringPasskey] = useState(false);
+  const [passkeyPopupNeeded, setPasskeyPopupNeeded] = useState(false);
   const [activeCredentialId, setActiveCredentialId] = useState(() => {
     if (typeof window === "undefined") return null;
     return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
@@ -4633,34 +4628,59 @@ function SwypePaymentInner({
     merchantAuthorization,
     transfer
   ]);
+  const completePasskeyRegistration = useCallback(async (credentialId, publicKey) => {
+    const token = await getAccessToken();
+    if (!token) throw new Error("Not authenticated");
+    await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
+    setActiveCredentialId(credentialId);
+    window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
+    setPasskeyPopupNeeded(false);
+    const hasActiveWallet = accounts.some(
+      (a) => a.wallets.some((w) => w.status === "ACTIVE")
+    );
+    if (accounts.length === 0 || !hasActiveWallet) {
+      setStep("wallet-picker");
+    } else {
+      setStep("deposit");
+    }
+  }, [getAccessToken, apiBaseUrl, accounts]);
   const handleRegisterPasskey = useCallback(async () => {
     setRegisteringPasskey(true);
     setError(null);
     try {
-      const token = await getAccessToken();
-      if (!token) throw new Error("Not authenticated");
       const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
       const { credentialId, publicKey } = await createPasskeyCredential({
         userId: user?.id ?? "unknown",
         displayName: passkeyDisplayName
       });
-      await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
-      setActiveCredentialId(credentialId);
-      window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
-      const hasActiveWallet = accounts.some(
-        (a) => a.wallets.some((w) => w.status === "ACTIVE")
-      );
-      if (accounts.length === 0 || !hasActiveWallet) {
-        setStep("wallet-picker");
+      await completePasskeyRegistration(credentialId, publicKey);
+    } catch (err) {
+      if (err instanceof PasskeyIframeBlockedError) {
+        setPasskeyPopupNeeded(true);
       } else {
-        setStep("deposit");
+        setError(err instanceof Error ? err.message : "Failed to register passkey");
       }
+    } finally {
+      setRegisteringPasskey(false);
+    }
+  }, [user, completePasskeyRegistration]);
+  const handleCreatePasskeyViaPopup = useCallback(async () => {
+    setRegisteringPasskey(true);
+    setError(null);
+    try {
+      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
+      const popupOptions = buildPasskeyPopupOptions({
+        userId: user?.id ?? "unknown",
+        displayName: passkeyDisplayName
+      });
+      const { credentialId, publicKey } = await createPasskeyViaPopup(popupOptions);
+      await completePasskeyRegistration(credentialId, publicKey);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to register passkey");
     } finally {
       setRegisteringPasskey(false);
     }
-  }, [getAccessToken, user, apiBaseUrl, accounts]);
+  }, [user, completePasskeyRegistration]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -4778,7 +4798,9 @@ function SwypePaymentInner({
         onCreatePasskey: handleRegisterPasskey,
         onBack: handleLogout,
         creating: registeringPasskey,
-        error
+        error,
+        popupFallback: passkeyPopupNeeded,
+        onCreatePasskeyViaPopup: handleCreatePasskeyViaPopup
       }
     );
   }
@@ -4911,6 +4933,6 @@ function SwypePaymentInner({
   return null;
 }
 
-export { IconCircle, OutlineButton, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { IconCircle, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map