@swype-org/react-sdk 0.1.49 → 0.1.50

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;
@@ -669,19 +675,18 @@ function isInCrossOriginIframe() {
   }
 }
 var delegationCounter = 0;
-var DELEGATION_CREATE_TIMEOUT_MS = 6e4;
 var DELEGATION_GET_TIMEOUT_MS = 3e4;
-function delegatePasskeyCreate(options) {
+function delegatePasskeyGet(options) {
   return new Promise((resolve, reject) => {
-    const id = `pc-${++delegationCounter}-${Date.now()}`;
+    const id = `pg-${++delegationCounter}-${Date.now()}`;
     const timer = setTimeout(() => {
       window.removeEventListener("message", handler);
-      reject(new Error("Passkey creation timed out. Please try again."));
-    }, DELEGATION_CREATE_TIMEOUT_MS);
+      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-create-response" || data.id !== id) return;
+      if (data.type !== "swype:passkey-get-response" || data.id !== id) return;
       clearTimeout(timer);
       window.removeEventListener("message", handler);
       if (data.error) {
@@ -689,36 +694,54 @@ function delegatePasskeyCreate(options) {
       } else if (data.result) {
         resolve(data.result);
       } else {
-        reject(new Error("Invalid passkey create response."));
+        reject(new Error("Invalid passkey get response."));
       }
     };
     window.addEventListener("message", handler);
-    window.parent.postMessage({ type: "swype:passkey-create-request", id, options }, "*");
+    window.parent.postMessage({ type: "swype:passkey-get-request", id, options }, "*");
   });
 }
-function delegatePasskeyGet(options) {
+var POPUP_RESULT_TIMEOUT_MS = 12e4;
+var POPUP_CLOSED_POLL_MS = 500;
+function createPasskeyViaPopup(options) {
   return new Promise((resolve, reject) => {
-    const id = `pg-${++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);
-      reject(new Error("Passkey verification timed out. Please try again."));
-    }, DELEGATION_GET_TIMEOUT_MS);
+      cleanup();
+      reject(new Error("Passkey creation timed out. Please try again."));
+    }, 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-get-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 get response."));
+        reject(new Error("Invalid passkey popup response."));
       }
     };
+    function cleanup() {
+      clearTimeout(timer);
+      clearInterval(closedPoll);
+      window.removeEventListener("message", handler);
+    }
     window.addEventListener("message", handler);
-    window.parent.postMessage({ type: "swype:passkey-get-request", id, options }, "*");
   });
 }
 
@@ -843,53 +866,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 +918,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;
@@ -2661,14 +2705,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 +2729,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." })
         ] })
@@ -4134,6 +4182,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 +4685,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 +4855,9 @@ function SwypePaymentInner({
         onCreatePasskey: handleRegisterPasskey,
         onBack: handleLogout,
         creating: registeringPasskey,
-        error
+        error,
+        popupFallback: passkeyPopupNeeded,
+        onCreatePasskeyViaPopup: handleCreatePasskeyViaPopup
       }
     );
   }
@@ -4916,6 +4992,7 @@ function SwypePaymentInner({
 
 exports.IconCircle = IconCircle;
 exports.OutlineButton = OutlineButton;
+exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;
 exports.PoweredByFooter = PoweredByFooter;
 exports.PrimaryButton = PrimaryButton;
 exports.ScreenHeader = ScreenHeader;
@@ -4927,7 +5004,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;