@swype-org/react-sdk 0.1.48 → 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,44 +675,73 @@ function isInCrossOriginIframe() {
   }
 }
 var delegationCounter = 0;
-function delegatePasskeyCreate(options) {
+var DELEGATION_GET_TIMEOUT_MS = 3e4;
+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 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) {
         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 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(() => {
+      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;
-      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 }, "*");
   });
 }
 
@@ -831,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 {
@@ -885,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;
@@ -2647,18 +2703,20 @@ var hintStyle = (color) => ({
 });
 function CreatePasskeyScreen({
   onCreatePasskey,
-  onSkip,
   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("button", { type: "button", onClick: onSkip, style: skipStyle(tokens.textMuted), disabled: creating, children: "Skip for now" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: handleCreate, disabled: creating, loading: creating, children: buttonLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -2671,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." })
         ] })
@@ -2713,19 +2771,6 @@ var errorBannerStyle2 = (tokens) => ({
   width: "100%",
   textAlign: "left"
 });
-var skipStyle = (color) => ({
-  background: "transparent",
-  border: "none",
-  color,
-  cursor: "pointer",
-  fontFamily: "inherit",
-  fontSize: "0.88rem",
-  fontWeight: 500,
-  display: "block",
-  width: "100%",
-  textAlign: "center",
-  padding: "12px 0 0"
-});
 var WALLET_EMOJIS = {
   rabby: "\u{1F430}",
   ora: "\u2666\uFE0F",
@@ -3944,6 +3989,74 @@ var hintStyle3 = (color) => ({
   color,
   margin: "8px 0 0"
 });
+var PaymentErrorBoundary = class extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    console.error("[SwypePayment] Uncaught error:", error, info.componentStack);
+  }
+  handleReset = () => {
+    this.setState({ hasError: false });
+    this.props.onReset();
+  };
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle8, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9, children: "Something went wrong" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
+    ] });
+  }
+};
+var containerStyle8 = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "48px 24px",
+  minHeight: "100%",
+  maxWidth: 420,
+  margin: "0 auto"
+};
+var iconStyle4 = {
+  marginBottom: 20
+};
+var headingStyle9 = {
+  fontSize: "1.25rem",
+  fontWeight: 700,
+  color: "#1a1a1a",
+  margin: "0 0 8px"
+};
+var messageStyle = {
+  fontSize: "0.9rem",
+  color: "#666",
+  margin: "0 0 28px",
+  lineHeight: 1.5
+};
+var buttonStyle3 = {
+  background: "#1a1a1a",
+  color: "#fff",
+  border: "none",
+  borderRadius: 12,
+  padding: "12px 32px",
+  fontSize: "0.95rem",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  cursor: "pointer"
+};
 function isInIframe() {
   try {
     return typeof window !== "undefined" && window !== window.top;
@@ -4021,7 +4134,14 @@ function buildSelectSourceChoices(options) {
   }
   return chainChoices;
 }
-function SwypePayment({
+function SwypePayment(props) {
+  const resetKey = react.useRef(0);
+  const handleBoundaryReset = react.useCallback(() => {
+    resetKey.current += 1;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(PaymentErrorBoundary, { onReset: handleBoundaryReset, children: /* @__PURE__ */ jsxRuntime.jsx(SwypePaymentInner, { ...props }) }, resetKey.current);
+}
+function SwypePaymentInner({
   destination,
   onComplete,
   onError,
@@ -4062,6 +4182,7 @@ function SwypePayment({
   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);
@@ -4212,7 +4333,7 @@ function SwypePayment({
         }
         setStep("create-passkey");
       } catch {
-        if (!cancelled) setStep("deposit");
+        if (!cancelled) setStep("create-passkey");
       }
     };
     checkPasskey();
@@ -4564,44 +4685,59 @@ function SwypePayment({
     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]);
-  const handleSkipPasskey = react.useCallback(() => {
-    const hasActiveWallet = accounts.some(
-      (a) => a.wallets.some((w) => w.status === "ACTIVE")
-    );
-    if (accounts.length === 0 || !hasActiveWallet) {
-      setStep("wallet-picker");
-    } else {
-      setStep("deposit");
-    }
-  }, [accounts]);
+  }, [user, completePasskeyRegistration]);
   const handleSelectProvider = react.useCallback((providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -4717,10 +4853,11 @@ function SwypePayment({
       CreatePasskeyScreen,
       {
         onCreatePasskey: handleRegisterPasskey,
-        onSkip: handleSkipPasskey,
-        onBack: () => setStep("login"),
+        onBack: handleLogout,
         creating: registeringPasskey,
-        error
+        error,
+        popupFallback: passkeyPopupNeeded,
+        onCreatePasskeyViaPopup: handleCreatePasskeyViaPopup
       }
     );
   }
@@ -4733,7 +4870,7 @@ function SwypePayment({
         loading: creatingTransfer,
         onSelectProvider: handleSelectProvider,
         onContinueConnection: handleContinueConnection,
-        onBack: () => setStep("create-passkey")
+        onBack: () => setStep(activeCredentialId ? "deposit" : "create-passkey")
       }
     );
   }
@@ -4855,6 +4992,7 @@ function SwypePayment({
 
 exports.IconCircle = IconCircle;
 exports.OutlineButton = OutlineButton;
+exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;
 exports.PoweredByFooter = PoweredByFooter;
 exports.PrimaryButton = PrimaryButton;
 exports.ScreenHeader = ScreenHeader;
@@ -4866,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;