@swype-org/react-sdk 0.1.86 → 0.1.88

package/dist/index.d.cts

@@ -189,11 +189,13 @@ interface UserConfig {
     passkey?: {
         credentialId: string;
         publicKey: string;
+        lastVerificationToken?: string | null;
     } | null;
     /** All registered WebAuthn passkey credentials for this user */
     passkeys?: {
         credentialId: string;
         publicKey: string;
+        lastVerificationToken?: string | null;
     }[];
 }
 /** Theme mode */
@@ -389,19 +391,16 @@ interface SwypePaymentProps {
 declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Cross-origin iframe passkey delegation via postMessage.
+ * Cross-origin iframe passkey helpers.
  *
  * 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
- * `BroadcastChannel` (Safari strips `window.opener` from popups opened
- * by cross-origin iframes, so `postMessage` via opener doesn't work).
- *
- * Passkey *assertion* (`navigator.credentials.get`) still delegates to
- * the parent page via postMessage as before.
+ * domain to perform the ceremony. The popup writes the result to the
+ * server with a verification token, and the opener reads from the server
+ * after the popup closes.
  */
 /**
  * Thrown when `navigator.credentials.create()` fails inside a
@@ -429,7 +428,7 @@ interface PasskeyPopupOptions {
     };
     timeout?: number;
     /** Populated by `createPasskeyViaPopup`; not set by callers. */
-    channelId?: string;
+    verificationToken?: string;
     /** Privy JWT so the popup can register the passkey server-side. */
     authToken?: string;
     /** Core API base URL for server-side passkey registration. */
@@ -440,24 +439,14 @@ interface PasskeyPopupOptions {
  * passkey creation. Used as a fallback when Safari blocks
  * `navigator.credentials.create()` inside a cross-origin iframe.
  *
- * Communication uses `BroadcastChannel` because Safari strips
- * `window.opener` from popups opened by cross-origin iframes.
- * Falls back to `window.postMessage` for browsers that preserve the
- * opener reference.
- *
- * When both client-side channels are blocked (Safari ITP partitions
- * BroadcastChannel by top-level origin), the popup registers the
- * passkey directly with the backend. On popup close, this function
- * checks the server for newly registered passkeys as a final fallback.
+ * The popup registers the passkey with the server using a verification
+ * token. After the popup closes, this function checks the server for
+ * the passkey matching the token.
  *
  * Must be called from a user-gesture handler (e.g. button click) to
  * avoid the browser's pop-up blocker.
- *
- * @param existingCredentialIds - Credential IDs known before the popup
- *   opens. Used to diff against server state when the popup closes
- *   without delivering a client-side result.
  */
-declare function createPasskeyViaPopup(options: PasskeyPopupOptions, existingCredentialIds?: string[]): Promise<{
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions): Promise<{
     credentialId: string;
     publicKey: string;
 }>;
@@ -465,7 +454,11 @@ interface PasskeyVerifyPopupOptions {
     credentialIds: string[];
     rpId: string;
     /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
-    channelId?: string;
+    verificationToken?: string;
+    /** Privy JWT so the popup can report verification server-side. */
+    authToken?: string;
+    /** Core API base URL for server-side passkey activity reporting. */
+    apiBaseUrl?: string;
 }
 /**
  * Opens a same-origin pop-up window on the Swype domain to check whether
@@ -475,6 +468,10 @@ interface PasskeyVerifyPopupOptions {
  * inside a cross-origin iframe. The popup runs on the Swype domain where
  * the rpId matches, so WebAuthn works.
  *
+ * The popup writes a verification token to the server. After the popup
+ * closes, the opener checks the server for the matching token to determine
+ * which credential was verified.
+ *
  * Must be called from a user-gesture handler (e.g. button click) to
  * avoid the browser's pop-up blocker.
  *

package/dist/index.d.ts

@@ -189,11 +189,13 @@ interface UserConfig {
     passkey?: {
         credentialId: string;
         publicKey: string;
+        lastVerificationToken?: string | null;
     } | null;
     /** All registered WebAuthn passkey credentials for this user */
     passkeys?: {
         credentialId: string;
         publicKey: string;
+        lastVerificationToken?: string | null;
     }[];
 }
 /** Theme mode */
@@ -389,19 +391,16 @@ interface SwypePaymentProps {
 declare function SwypePayment(props: SwypePaymentProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Cross-origin iframe passkey delegation via postMessage.
+ * Cross-origin iframe passkey helpers.
  *
  * 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
- * `BroadcastChannel` (Safari strips `window.opener` from popups opened
- * by cross-origin iframes, so `postMessage` via opener doesn't work).
- *
- * Passkey *assertion* (`navigator.credentials.get`) still delegates to
- * the parent page via postMessage as before.
+ * domain to perform the ceremony. The popup writes the result to the
+ * server with a verification token, and the opener reads from the server
+ * after the popup closes.
  */
 /**
  * Thrown when `navigator.credentials.create()` fails inside a
@@ -429,7 +428,7 @@ interface PasskeyPopupOptions {
     };
     timeout?: number;
     /** Populated by `createPasskeyViaPopup`; not set by callers. */
-    channelId?: string;
+    verificationToken?: string;
     /** Privy JWT so the popup can register the passkey server-side. */
     authToken?: string;
     /** Core API base URL for server-side passkey registration. */
@@ -440,24 +439,14 @@ interface PasskeyPopupOptions {
  * passkey creation. Used as a fallback when Safari blocks
  * `navigator.credentials.create()` inside a cross-origin iframe.
  *
- * Communication uses `BroadcastChannel` because Safari strips
- * `window.opener` from popups opened by cross-origin iframes.
- * Falls back to `window.postMessage` for browsers that preserve the
- * opener reference.
- *
- * When both client-side channels are blocked (Safari ITP partitions
- * BroadcastChannel by top-level origin), the popup registers the
- * passkey directly with the backend. On popup close, this function
- * checks the server for newly registered passkeys as a final fallback.
+ * The popup registers the passkey with the server using a verification
+ * token. After the popup closes, this function checks the server for
+ * the passkey matching the token.
  *
  * Must be called from a user-gesture handler (e.g. button click) to
  * avoid the browser's pop-up blocker.
- *
- * @param existingCredentialIds - Credential IDs known before the popup
- *   opens. Used to diff against server state when the popup closes
- *   without delivering a client-side result.
  */
-declare function createPasskeyViaPopup(options: PasskeyPopupOptions, existingCredentialIds?: string[]): Promise<{
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions): Promise<{
     credentialId: string;
     publicKey: string;
 }>;
@@ -465,7 +454,11 @@ interface PasskeyVerifyPopupOptions {
     credentialIds: string[];
     rpId: string;
     /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
-    channelId?: string;
+    verificationToken?: string;
+    /** Privy JWT so the popup can report verification server-side. */
+    authToken?: string;
+    /** Core API base URL for server-side passkey activity reporting. */
+    apiBaseUrl?: string;
 }
 /**
  * Opens a same-origin pop-up window on the Swype domain to check whether
@@ -475,6 +468,10 @@ interface PasskeyVerifyPopupOptions {
  * inside a cross-origin iframe. The popup runs on the Swype domain where
  * the rpId matches, so WebAuthn works.
  *
+ * The popup writes a verification token to the server. After the popup
+ * closes, the opener checks the server for the matching token to determine
+ * which credential was verified.
+ *
  * Must be called from a user-gesture handler (e.g. button click) to
  * avoid the browser's pop-up blocker.
  *

package/dist/index.js

@@ -725,10 +725,10 @@ function isSafari() {
 var POPUP_RESULT_TIMEOUT_MS = 12e4;
 var POPUP_CLOSED_POLL_MS = 500;
 var POPUP_CLOSED_GRACE_MS = 1e3;
-function createPasskeyViaPopup(options, existingCredentialIds = []) {
+function createPasskeyViaPopup(options) {
   return new Promise((resolve, reject) => {
-    const channelId = `swype-pk-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    const payload = { ...options, channelId };
+    const verificationToken = crypto.randomUUID();
+    const payload = { ...options, verificationToken };
     const encoded = btoa(JSON.stringify(payload));
     const popupUrl = `${window.location.origin}/passkey-register#${encoded}`;
     const popup = window.open(popupUrl, "swype-passkey");
@@ -737,22 +737,21 @@ function createPasskeyViaPopup(options, existingCredentialIds = []) {
       return;
     }
     let settled = false;
-    const channel = typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelId) : null;
     const timer = setTimeout(() => {
       cleanup();
       reject(new Error("Passkey creation timed out. Please try again."));
     }, POPUP_RESULT_TIMEOUT_MS);
-    let closedGraceTimer = null;
     const closedPoll = setInterval(() => {
       if (popup.closed) {
         clearInterval(closedPoll);
-        closedGraceTimer = setTimeout(() => {
+        setTimeout(() => {
           if (!settled) {
+            settled = true;
             cleanup();
-            checkServerForNewPasskey(
+            checkServerForPasskeyByToken(
               options.authToken,
               options.apiBaseUrl,
-              existingCredentialIds
+              verificationToken
             ).then((result) => {
               if (result) {
                 resolve(result);
@@ -766,42 +765,20 @@ function createPasskeyViaPopup(options, existingCredentialIds = []) {
         }, POPUP_CLOSED_GRACE_MS);
       }
     }, POPUP_CLOSED_POLL_MS);
-    function handleResult(data) {
-      if (settled) return;
-      if (!data || typeof data !== "object") return;
-      if (data.type !== "swype:passkey-popup-result") return;
-      settled = true;
-      cleanup();
-      if (data.error) {
-        reject(new Error(data.error));
-      } else if (data.result) {
-        resolve(data.result);
-      } else {
-        reject(new Error("Invalid passkey popup response."));
-      }
-    }
-    if (channel) {
-      channel.onmessage = (event) => handleResult(event.data);
-    }
-    const postMessageHandler = (event) => {
-      if (event.source !== popup) return;
-      handleResult(event.data);
-    };
-    window.addEventListener("message", postMessageHandler);
     function cleanup() {
       clearTimeout(timer);
       clearInterval(closedPoll);
-      if (closedGraceTimer) clearTimeout(closedGraceTimer);
-      window.removeEventListener("message", postMessageHandler);
-      channel?.close();
     }
   });
 }
 var VERIFY_POPUP_TIMEOUT_MS = 6e4;
 function findDevicePasskeyViaPopup(options) {
   return new Promise((resolve, reject) => {
-    const channelId = `swype-pv-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    const payload = { ...options, channelId };
+    const verificationToken = crypto.randomUUID();
+    const payload = {
+      ...options,
+      verificationToken
+    };
     const encoded = btoa(JSON.stringify(payload));
     const popupUrl = `${window.location.origin}/passkey-verify#${encoded}`;
     const popup = window.open(popupUrl, "swype-passkey-verify");
@@ -810,7 +787,6 @@ function findDevicePasskeyViaPopup(options) {
       return;
     }
     let settled = false;
-    const channel = typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelId) : null;
     const timer = setTimeout(() => {
       cleanup();
       resolve(null);
@@ -820,44 +796,28 @@ function findDevicePasskeyViaPopup(options) {
         clearInterval(closedPoll);
         setTimeout(() => {
           if (!settled) {
+            settled = true;
             cleanup();
-            resolve(null);
+            checkServerForPasskeyByToken(
+              options.authToken,
+              options.apiBaseUrl,
+              verificationToken
+            ).then((result) => {
+              resolve(result?.credentialId ?? null);
+            }).catch(() => {
+              resolve(null);
+            });
           }
         }, POPUP_CLOSED_GRACE_MS);
       }
     }, POPUP_CLOSED_POLL_MS);
-    function handleResult(data) {
-      if (settled) return;
-      if (!data || typeof data !== "object") return;
-      if (data.type !== "swype:passkey-verify-result") return;
-      settled = true;
-      cleanup();
-      if (data.error) {
-        resolve(null);
-      } else if (data.result && typeof data.result === "object") {
-        const result = data.result;
-        resolve(result.credentialId ?? null);
-      } else {
-        resolve(null);
-      }
-    }
-    if (channel) {
-      channel.onmessage = (event) => handleResult(event.data);
-    }
-    const postMessageHandler = (event) => {
-      if (event.source !== popup) return;
-      handleResult(event.data);
-    };
-    window.addEventListener("message", postMessageHandler);
     function cleanup() {
       clearTimeout(timer);
       clearInterval(closedPoll);
-      window.removeEventListener("message", postMessageHandler);
-      channel?.close();
     }
   });
 }
-async function checkServerForNewPasskey(authToken, apiBaseUrl, existingCredentialIds) {
+async function checkServerForPasskeyByToken(authToken, apiBaseUrl, verificationToken) {
   if (!authToken || !apiBaseUrl) return null;
   const res = await fetch(`${apiBaseUrl}/v1/users/config`, {
     headers: { Authorization: `Bearer ${authToken}` }
@@ -865,9 +825,8 @@ async function checkServerForNewPasskey(authToken, apiBaseUrl, existingCredentia
   if (!res.ok) return null;
   const body = await res.json();
   const passkeys = body.config.passkeys ?? [];
-  const existingSet = new Set(existingCredentialIds);
-  const newPasskey = passkeys.find((p) => !existingSet.has(p.credentialId));
-  return newPasskey ?? null;
+  const matched = passkeys.find((p) => p.lastVerificationToken === verificationToken);
+  return matched ? { credentialId: matched.credentialId, publicKey: matched.publicKey } : null;
 }
 
 // src/hooks.ts
@@ -5572,30 +5531,42 @@ function SwypePaymentInner({
         authToken: token ?? void 0,
         apiBaseUrl
       });
-      const { credentialId, publicKey } = await createPasskeyViaPopup(
-        popupOptions,
-        knownCredentialIds
-      );
-      await completePasskeyRegistration(credentialId, publicKey);
+      const { credentialId } = await createPasskeyViaPopup(popupOptions);
+      setActiveCredentialId(credentialId);
+      localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
+      setPasskeyPopupNeeded(false);
+      const resolved = resolvePostAuthStep({
+        hasPasskey: true,
+        accounts,
+        persistedMobileFlow: loadMobileFlowState(),
+        mobileSetupInProgress: mobileSetupFlowRef.current,
+        connectingNewAccount
+      });
+      if (resolved.clearPersistedFlow) {
+        clearMobileFlowState();
+      }
+      setStep(resolved.step);
     } catch (err) {
       captureException(err);
       setError(err instanceof Error ? err.message : "Failed to register passkey");
     } finally {
       setRegisteringPasskey(false);
     }
-  }, [user, completePasskeyRegistration, getAccessToken, apiBaseUrl, knownCredentialIds]);
+  }, [user, getAccessToken, apiBaseUrl, accounts, connectingNewAccount]);
   const handleVerifyPasskeyViaPopup = useCallback(async () => {
     setVerifyingPasskeyPopup(true);
     setError(null);
     try {
+      const token = await getAccessToken();
       const matched = await findDevicePasskeyViaPopup({
         credentialIds: knownCredentialIds,
-        rpId: resolvePasskeyRpId()
+        rpId: resolvePasskeyRpId(),
+        authToken: token ?? void 0,
+        apiBaseUrl
       });
       if (matched) {
         setActiveCredentialId(matched);
         window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
-        const token = await getAccessToken();
         if (token) {
           reportPasskeyActivity(apiBaseUrl, token, matched).catch(() => {
           });