@swype-org/react-sdk 0.1.82 → 0.1.84

package/dist/index.d.cts

@@ -422,6 +422,10 @@ interface PasskeyPopupOptions {
     timeout?: number;
     /** Populated by `createPasskeyViaPopup`; not set by callers. */
     channelId?: string;
+    /** Privy JWT so the popup can register the passkey server-side. */
+    authToken?: string;
+    /** Core API base URL for server-side passkey registration. */
+    apiBaseUrl?: string;
 }
 /**
  * Opens a same-origin pop-up window on the Swype domain to perform
@@ -433,10 +437,19 @@ interface PasskeyPopupOptions {
  * 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.
+ *
  * 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): Promise<{
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions, existingCredentialIds?: string[]): Promise<{
     credentialId: string;
     publicKey: string;
 }>;
@@ -464,10 +477,16 @@ declare function createPasskeyCredential(params: {
  * 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}.
+ *
+ * @param params.authToken - Privy JWT so the popup can register the
+ *   passkey server-side (Safari fallback when BroadcastChannel is blocked).
+ * @param params.apiBaseUrl - Core API base URL for server-side registration.
  */
 declare function buildPasskeyPopupOptions(params: {
     userId: string;
     displayName: string;
+    authToken?: string;
+    apiBaseUrl?: string;
 }): PasskeyPopupOptions;
 /**
  * @deprecated Use {@link findDevicePasskey} instead, which checks all

package/dist/index.d.ts

@@ -422,6 +422,10 @@ interface PasskeyPopupOptions {
     timeout?: number;
     /** Populated by `createPasskeyViaPopup`; not set by callers. */
     channelId?: string;
+    /** Privy JWT so the popup can register the passkey server-side. */
+    authToken?: string;
+    /** Core API base URL for server-side passkey registration. */
+    apiBaseUrl?: string;
 }
 /**
  * Opens a same-origin pop-up window on the Swype domain to perform
@@ -433,10 +437,19 @@ interface PasskeyPopupOptions {
  * 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.
+ *
  * 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): Promise<{
+declare function createPasskeyViaPopup(options: PasskeyPopupOptions, existingCredentialIds?: string[]): Promise<{
     credentialId: string;
     publicKey: string;
 }>;
@@ -464,10 +477,16 @@ declare function createPasskeyCredential(params: {
  * 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}.
+ *
+ * @param params.authToken - Privy JWT so the popup can register the
+ *   passkey server-side (Safari fallback when BroadcastChannel is blocked).
+ * @param params.apiBaseUrl - Core API base URL for server-side registration.
  */
 declare function buildPasskeyPopupOptions(params: {
     userId: string;
     displayName: string;
+    authToken?: string;
+    apiBaseUrl?: string;
 }): PasskeyPopupOptions;
 /**
  * @deprecated Use {@link findDevicePasskey} instead, which checks all

package/dist/index.js

@@ -712,7 +712,8 @@ function isSafari() {
 }
 var POPUP_RESULT_TIMEOUT_MS = 12e4;
 var POPUP_CLOSED_POLL_MS = 500;
-function createPasskeyViaPopup(options) {
+var POPUP_CLOSED_GRACE_MS = 1e3;
+function createPasskeyViaPopup(options, existingCredentialIds = []) {
   return new Promise((resolve, reject) => {
     const channelId = `swype-pk-${Date.now()}-${Math.random().toString(36).slice(2)}`;
     const payload = { ...options, channelId };
@@ -729,10 +730,28 @@ function createPasskeyViaPopup(options) {
       cleanup();
       reject(new Error("Passkey creation timed out. Please try again."));
     }, POPUP_RESULT_TIMEOUT_MS);
+    let closedGraceTimer = null;
     const closedPoll = setInterval(() => {
       if (popup.closed) {
-        cleanup();
-        reject(new Error("Passkey setup window was closed before completing."));
+        clearInterval(closedPoll);
+        closedGraceTimer = setTimeout(() => {
+          if (!settled) {
+            cleanup();
+            checkServerForNewPasskey(
+              options.authToken,
+              options.apiBaseUrl,
+              existingCredentialIds
+            ).then((result) => {
+              if (result) {
+                resolve(result);
+              } else {
+                reject(new Error("Passkey setup window was closed before completing."));
+              }
+            }).catch(() => {
+              reject(new Error("Passkey setup window was closed before completing."));
+            });
+          }
+        }, POPUP_CLOSED_GRACE_MS);
       }
     }, POPUP_CLOSED_POLL_MS);
     function handleResult(data) {
@@ -760,11 +779,24 @@ function createPasskeyViaPopup(options) {
     function cleanup() {
       clearTimeout(timer);
       clearInterval(closedPoll);
+      if (closedGraceTimer) clearTimeout(closedGraceTimer);
       window.removeEventListener("message", postMessageHandler);
       channel?.close();
     }
   });
 }
+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;
+}
 
 // src/hooks.ts
 var WALLET_CLIENT_MAX_ATTEMPTS = 15;
@@ -959,7 +991,9 @@ function buildPasskeyPopupOptions(params) {
       residentKey: "preferred",
       userVerification: "required"
     },
-    timeout: 6e4
+    timeout: 6e4,
+    authToken: params.authToken,
+    apiBaseUrl: params.apiBaseUrl
   };
 }
 async function deviceHasPasskey(credentialId) {
@@ -4578,6 +4612,7 @@ function SwypePaymentInner({
     if (typeof window === "undefined") return null;
     return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
   });
+  const [knownCredentialIds, setKnownCredentialIds] = useState([]);
   const [authInput, setAuthInput] = useState("");
   const [verificationTarget, setVerificationTarget] = useState(null);
   const [otpCode, setOtpCode] = useState("");
@@ -4867,6 +4902,7 @@ function SwypePaymentInner({
           setOneTapLimit(config.defaultAllowance);
         }
         const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
+        setKnownCredentialIds(allPasskeys.map((p) => p.credentialId));
         if (allPasskeys.length === 0) {
           setStep("create-passkey");
           return;
@@ -5383,12 +5419,18 @@ function SwypePaymentInner({
     setRegisteringPasskey(true);
     setError(null);
     try {
+      const token = await getAccessToken();
       const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Swype User";
       const popupOptions = buildPasskeyPopupOptions({
         userId: user?.id ?? "unknown",
-        displayName: passkeyDisplayName
+        displayName: passkeyDisplayName,
+        authToken: token ?? void 0,
+        apiBaseUrl
       });
-      const { credentialId, publicKey } = await createPasskeyViaPopup(popupOptions);
+      const { credentialId, publicKey } = await createPasskeyViaPopup(
+        popupOptions,
+        knownCredentialIds
+      );
       await completePasskeyRegistration(credentialId, publicKey);
     } catch (err) {
       captureException(err);
@@ -5396,7 +5438,7 @@ function SwypePaymentInner({
     } finally {
       setRegisteringPasskey(false);
     }
-  }, [user, completePasskeyRegistration]);
+  }, [user, completePasskeyRegistration, getAccessToken, apiBaseUrl, knownCredentialIds]);
   const handleSelectProvider = useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);