@swype-org/react-sdk 0.1.19 → 0.1.20

package/dist/index.d.cts

@@ -169,11 +169,16 @@ interface ListResponse<T> {
 /** User configuration preferences */
 interface UserConfig {
     defaultAllowance?: number;
-    /** Registered WebAuthn passkey credential, or null if none registered */
+    /** Most recent registered WebAuthn passkey credential, or null if none registered */
     passkey?: {
         credentialId: string;
         publicKey: string;
     } | null;
+    /** All registered WebAuthn passkey credentials for this user */
+    passkeys?: {
+        credentialId: string;
+        publicKey: string;
+    }[];
 }
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
@@ -300,11 +305,17 @@ type AccessTokenGetter = () => Promise<string | null | undefined>;
  * Creates a WebAuthn passkey credential.
  * Used for upfront passkey registration before the authorization flow.
  *
- * @param userIdentifier - A string used to identify the user in the
- *   WebAuthn ceremony (e.g. wallet address or Privy user ID).
+ * @param params.userId - Globally unique user identifier (e.g. Privy DID).
+ *   Used as the WebAuthn `user.id` handle so each user gets a distinct
+ *   credential slot on the authenticator.
+ * @param params.displayName - Human-readable label shown in the OS passkey
+ *   prompt (e.g. the user's email address or name).
  * @returns The base64-encoded credentialId and publicKey.
  */
-declare function createPasskeyCredential(userIdentifier: string): Promise<{
+declare function createPasskeyCredential(params: {
+    userId: string;
+    displayName: string;
+}): Promise<{
     credentialId: string;
     publicKey: string;
 }>;

package/dist/index.d.ts

@@ -169,11 +169,16 @@ interface ListResponse<T> {
 /** User configuration preferences */
 interface UserConfig {
     defaultAllowance?: number;
-    /** Registered WebAuthn passkey credential, or null if none registered */
+    /** Most recent registered WebAuthn passkey credential, or null if none registered */
     passkey?: {
         credentialId: string;
         publicKey: string;
     } | null;
+    /** All registered WebAuthn passkey credentials for this user */
+    passkeys?: {
+        credentialId: string;
+        publicKey: string;
+    }[];
 }
 /** Theme mode */
 type ThemeMode = 'light' | 'dark';
@@ -300,11 +305,17 @@ type AccessTokenGetter = () => Promise<string | null | undefined>;
  * Creates a WebAuthn passkey credential.
  * Used for upfront passkey registration before the authorization flow.
  *
- * @param userIdentifier - A string used to identify the user in the
- *   WebAuthn ceremony (e.g. wallet address or Privy user ID).
+ * @param params.userId - Globally unique user identifier (e.g. Privy DID).
+ *   Used as the WebAuthn `user.id` handle so each user gets a distinct
+ *   credential slot on the authenticator.
+ * @param params.displayName - Human-readable label shown in the OS passkey
+ *   prompt (e.g. the user's email address or name).
  * @returns The base64-encoded credentialId and publicKey.
  */
-declare function createPasskeyCredential(userIdentifier: string): Promise<{
+declare function createPasskeyCredential(params: {
+    userId: string;
+    displayName: string;
+}): Promise<{
     credentialId: string;
     publicKey: string;
 }>;

package/dist/index.js

@@ -698,7 +698,7 @@ function parseSignTypedDataPayload(typedData) {
 function getPendingActions(session, completedIds) {
   return session.actions.filter((a) => a.status === "PENDING" && !completedIds.has(a.id)).sort((a, b) => a.orderIndex - b.orderIndex);
 }
-async function createPasskeyCredential(userIdentifier) {
+async function createPasskeyCredential(params) {
   const challenge = new Uint8Array(32);
   crypto.getRandomValues(challenge);
   const rpId = resolvePasskeyRpId();
@@ -708,9 +708,9 @@ async function createPasskeyCredential(userIdentifier) {
       challenge,
       rp: { name: "Swype", id: rpId },
       user: {
-        id: new TextEncoder().encode(userIdentifier),
-        name: userIdentifier,
-        displayName: "Swype User"
+        id: new TextEncoder().encode(params.userId),
+        name: params.displayName,
+        displayName: params.displayName
       },
       pubKeyCredParams: [
         { alg: -7, type: "public-key" },
@@ -2115,7 +2115,7 @@ function SwypePayment({
   useWalletConnector
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
-  const { ready, authenticated, login, logout, getAccessToken } = usePrivy();
+  const { ready, authenticated, user, login, logout, getAccessToken } = usePrivy();
   const [step, setStep] = useState("login");
   const [error, setError] = useState(null);
   const [providers, setProviders] = useState([]);
@@ -2166,28 +2166,34 @@ function SwypePayment({
         if (!token || cancelled) return;
         const { config } = await fetchUserConfig(apiBaseUrl, token);
         if (cancelled) return;
-        if (config.passkey?.credentialId) {
-          const hasKey = activeCredentialId ? activeCredentialId === config.passkey.credentialId : await deviceHasPasskey(config.passkey.credentialId);
+        const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
+        if (allPasskeys.length === 0) {
+          setStep("register-passkey");
+          return;
+        }
+        if (activeCredentialId && allPasskeys.some((p) => p.credentialId === activeCredentialId)) {
+          if (depositAmount != null && depositAmount > 0) {
+            setStep("ready");
+          } else {
+            setStep("enter-amount");
+          }
+          return;
+        }
+        for (const pk of allPasskeys) {
           if (cancelled) return;
-          if (hasKey) {
-            if (!activeCredentialId) {
-              setActiveCredentialId(config.passkey.credentialId);
-              window.localStorage.setItem(
-                ACTIVE_CREDENTIAL_STORAGE_KEY,
-                config.passkey.credentialId
-              );
-            }
+          if (await deviceHasPasskey(pk.credentialId)) {
+            setActiveCredentialId(pk.credentialId);
+            window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, pk.credentialId);
             if (depositAmount != null && depositAmount > 0) {
               setStep("ready");
             } else {
               setStep("enter-amount");
             }
-          } else {
-            setStep("register-passkey");
+            return;
           }
-        } else {
-          setStep("register-passkey");
         }
+        if (cancelled) return;
+        setStep("register-passkey");
       } catch {
         if (!cancelled) {
           if (depositAmount != null && depositAmount > 0) {
@@ -2702,7 +2708,11 @@ function SwypePayment({
       try {
         const token = await getAccessToken();
         if (!token) throw new Error("Not authenticated");
-        const { credentialId, publicKey } = await createPasskeyCredential("Swype User");
+        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);