@swype-org/react-sdk 0.1.49 → 0.1.52

package/dist/index.cjs

@@ -658,6 +658,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;
@@ -668,57 +674,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 }, "*");
   });
 }
 
@@ -843,53 +839,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 {
@@ -897,6 +891,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;
@@ -906,16 +923,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: {
@@ -1414,48 +1421,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 ?? "",
@@ -2661,14 +2651,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__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onCreatePasskey, disabled: creating, loading: creating, children: "Create passkey" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: handleCreate, disabled: creating, loading: creating, children: buttonLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -2681,7 +2675,7 @@ function CreatePasskeyScreen({
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { style: headingStyle3(tokens.text), children: "Create your passkey" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: errorBannerStyle2(tokens), children: error }),
           /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
         ] })
@@ -3866,7 +3860,7 @@ function OpenWalletScreen({
   const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
   const handleOpen = react.useCallback(() => {
     const opened = window.open(deeplinkUri, "_blank");
-    if (!opened) {
+    if (!opened && window === window.parent) {
       window.location.href = deeplinkUri;
     }
   }, [deeplinkUri]);
@@ -4134,6 +4128,7 @@ function SwypePaymentInner({
   const [transfer, setTransfer] = react.useState(null);
   const [creatingTransfer, setCreatingTransfer] = react.useState(false);
   const [registeringPasskey, setRegisteringPasskey] = react.useState(false);
+  const [passkeyPopupNeeded, setPasskeyPopupNeeded] = react.useState(false);
   const [activeCredentialId, setActiveCredentialId] = react.useState(() => {
     if (typeof window === "undefined") return null;
     return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
@@ -4636,34 +4631,59 @@ function SwypePaymentInner({
     merchantAuthorization,
     transfer
   ]);
+  const completePasskeyRegistration = react.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 = react.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 = react.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 = react.useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -4781,7 +4801,9 @@ function SwypePaymentInner({
         onCreatePasskey: handleRegisterPasskey,
         onBack: handleLogout,
         creating: registeringPasskey,
-        error
+        error,
+        popupFallback: passkeyPopupNeeded,
+        onCreatePasskeyViaPopup: handleCreatePasskeyViaPopup
       }
     );
   }
@@ -4916,6 +4938,7 @@ function SwypePaymentInner({
 
 exports.IconCircle = IconCircle;
 exports.OutlineButton = OutlineButton;
+exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;
 exports.PoweredByFooter = PoweredByFooter;
 exports.PrimaryButton = PrimaryButton;
 exports.ScreenHeader = ScreenHeader;
@@ -4927,7 +4950,9 @@ exports.Spinner = Spinner;
 exports.StepList = StepList;
 exports.SwypePayment = SwypePayment;
 exports.SwypeProvider = SwypeProvider;
+exports.buildPasskeyPopupOptions = buildPasskeyPopupOptions;
 exports.createPasskeyCredential = createPasskeyCredential;
+exports.createPasskeyViaPopup = createPasskeyViaPopup;
 exports.darkTheme = darkTheme;
 exports.deviceHasPasskey = deviceHasPasskey;
 exports.findDevicePasskey = findDevicePasskey;