@swype-org/react-sdk 0.1.87 → 0.1.88

package/dist/index.d.cts

@@ -391,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
@@ -431,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. */
@@ -442,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;
 }>;
@@ -467,8 +454,6 @@ interface PasskeyVerifyPopupOptions {
     credentialIds: string[];
     rpId: string;
     /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
-    channelId?: string;
-    /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
     verificationToken?: string;
     /** Privy JWT so the popup can report verification server-side. */
     authToken?: string;
@@ -483,10 +468,9 @@ interface PasskeyVerifyPopupOptions {
  * inside a cross-origin iframe. The popup runs on the Swype domain where
  * the rpId matches, so WebAuthn works.
  *
- * When `authToken` and `apiBaseUrl` are provided, the popup also writes a
- * verification token to the backend. If Safari's ITP blocks both
- * BroadcastChannel and window.opener.postMessage, the opener falls back to
- * checking the server for the matching token after the popup closes.
+ * 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

@@ -391,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
@@ -431,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. */
@@ -442,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;
 }>;
@@ -467,8 +454,6 @@ interface PasskeyVerifyPopupOptions {
     credentialIds: string[];
     rpId: string;
     /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
-    channelId?: string;
-    /** Populated by `findDevicePasskeyViaPopup`; not set by callers. */
     verificationToken?: string;
     /** Privy JWT so the popup can report verification server-side. */
     authToken?: string;
@@ -483,10 +468,9 @@ interface PasskeyVerifyPopupOptions {
  * inside a cross-origin iframe. The popup runs on the Swype domain where
  * the rpId matches, so WebAuthn works.
  *
- * When `authToken` and `apiBaseUrl` are provided, the popup also writes a
- * verification token to the backend. If Safari's ITP blocks both
- * BroadcastChannel and window.opener.postMessage, the opener falls back to
- * checking the server for the matching token after the popup closes.
+ * 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,45 +765,18 @@ 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 verificationToken = crypto.randomUUID();
     const payload = {
       ...options,
-      channelId,
       verificationToken
     };
     const encoded = btoa(JSON.stringify(payload));
@@ -815,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);
@@ -825,13 +796,14 @@ function findDevicePasskeyViaPopup(options) {
         clearInterval(closedPoll);
         setTimeout(() => {
           if (!settled) {
+            settled = true;
             cleanup();
-            checkServerForVerifiedPasskey(
+            checkServerForPasskeyByToken(
               options.authToken,
               options.apiBaseUrl,
               verificationToken
-            ).then((credentialId) => {
-              resolve(credentialId);
+            ).then((result) => {
+              resolve(result?.credentialId ?? null);
             }).catch(() => {
               resolve(null);
             });
@@ -839,38 +811,13 @@ function findDevicePasskeyViaPopup(options) {
         }, 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 checkServerForVerifiedPasskey(authToken, apiBaseUrl, verificationToken) {
+async function checkServerForPasskeyByToken(authToken, apiBaseUrl, verificationToken) {
   if (!authToken || !apiBaseUrl) return null;
   const res = await fetch(`${apiBaseUrl}/v1/users/config`, {
     headers: { Authorization: `Bearer ${authToken}` }
@@ -879,19 +826,7 @@ async function checkServerForVerifiedPasskey(authToken, apiBaseUrl, verification
   const body = await res.json();
   const passkeys = body.config.passkeys ?? [];
   const matched = passkeys.find((p) => p.lastVerificationToken === verificationToken);
-  return matched?.credentialId ?? null;
-}
-async function checkServerForNewPasskey(authToken, apiBaseUrl, existingCredentialIds) {
-  if (!authToken || !apiBaseUrl) return null;
-  const res = await fetch(`${apiBaseUrl}/v1/users/config`, {
-    headers: { Authorization: `Bearer ${authToken}` }
-  });
-  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;
+  return matched ? { credentialId: matched.credentialId, publicKey: matched.publicKey } : null;
 }
 
 // src/hooks.ts
@@ -5596,18 +5531,28 @@ 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);