fix: unify passkey-autofill with navigator polyfill setup

PhearZero · PhearZero · commit 8f8ae3666a9e · 2026-03-27T09:19:30.000-04:00
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -54,7 +54,7 @@ const provider = new ReactNativeProvider(
     }
 )
 
-setupNavigatorPolyfill(provider)
+setupNavigatorPolyfill()
 
 async function bootstrap() {
   try {
diff --git a/extensions/passkeys-keystore/extension.ts b/extensions/passkeys-keystore/extension.ts
@@ -39,14 +39,16 @@ export const WithPasskeysKeystore: Extension<PasskeysKeystoreExtension> = (
 	const keyStore: Store<KeyStoreState> = options.keystore.store;
 	const { autoPopulate = true } = options.passkeys.keystore ?? {};
 
+	const toUrlSafe = (id: string) => id.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+
 	// Hook into passkey removal to also remove from keystore
 	provider.passkey.store.hooks.before("remove", async ({ id }) => {
-		const keyExists = (keyStore.state.keys as Key[]).some((k) => k.id === id);
-		if (keyExists) {
+		const foundKey = (keyStore.state.keys as Key[]).find((k) => toUrlSafe(k.id) === id);
+		if (foundKey) {
 			try {
-				await provider.key.store.remove(id);
+				await provider.key.store.remove(foundKey.id);
 			} catch (error) {
-				console.error(`Failed to remove key ${id} from keystore:`, error);
+				console.error(`Failed to remove key ${foundKey.id} from keystore:`, error);
 			}
 		}
 	});
@@ -61,14 +63,15 @@ export const WithPasskeysKeystore: Extension<PasskeysKeystoreExtension> = (
 			throw new Error(`Key ${key.id} is missing public key`);
 		}
 		return {
-			id: key.id,
+			id: toUrlSafe(key.id),
 			name: key.metadata.origin || "Unnamed Passkey",
 			publicKey: key.publicKey,
 			algorithm: key.algorithm || "ES256",
-			createdAt: Date.now(),
+			createdAt: key.metadata.createdAt || Date.now(),
 			metadata: {
 				...key.metadata,
 				keyId: key.id,
+				registered: key.metadata.registered ?? false,
 			},
 		};
 	};
@@ -96,7 +99,13 @@ export const WithPasskeysKeystore: Extension<PasskeysKeystoreExtension> = (
 				(existingKey) => !newKeys.some((newKey) => newKey.id === existingKey.id),
 			);
 
-			if (addedKeys.length === 0 && removedKeys.length === 0) {
+			// Find updated keys
+			const updatedKeys = newKeys.filter((nk) => {
+				const existing = keys.find(k => k.id === nk.id);
+				return existing && JSON.stringify(existing.metadata) !== JSON.stringify(nk.metadata);
+			});
+
+			if (addedKeys.length === 0 && removedKeys.length === 0 && updatedKeys.length === 0) {
 				isProcessing = false;
 
 				return;
@@ -109,7 +118,7 @@ export const WithPasskeysKeystore: Extension<PasskeysKeystoreExtension> = (
 			// Remove passkeys for removed keys
 			removedKeys.forEach((k) => {
 				if (k.type === "hd-derived-passkey" || k.type === "xhd-derived-p256" || k.type === "hd-derived-p256") {
-					provider.passkey.store.removePasskey(k.id);
+					provider.passkey.store.removePasskey(toUrlSafe(k.id));
 				}
 			});
 
@@ -122,17 +131,29 @@ export const WithPasskeysKeystore: Extension<PasskeysKeystoreExtension> = (
 				}
 			}
 
+			// Refresh passkeys for updated keys
+			for (const k of updatedKeys) {
+				if (k.type === "hd-derived-passkey" || k.type === "xhd-derived-p256" || k.type === "hd-derived-p256") {
+					provider.passkey.store.addPasskey(
+						createPasskeyFromKey(k as XHDDomainP256KeyData),
+					);
+				}
+			}
+
 			isProcessing = false;
 
+			if (nextKeys) {
+				const k = nextKeys;
+				nextKeys = null;
+				processUpdates(k);
+			}
 		};
 
 		processUpdates(keyStore.state.keys as unknown as Key[]);
 
 		keyStore.subscribe((state) => {
 			if (state.status !== 'ready' && state.status !== 'idle') return;
-			setTimeout(() => {
-				processUpdates(state.keys as unknown as Key[]);
-			}, 0);
+			processUpdates(state.keys as unknown as Key[]);
 		});
 	}
 
diff --git a/extensions/passkeys/extension.ts b/extensions/passkeys/extension.ts
@@ -5,6 +5,7 @@ import {
 	addPasskey,
 	clearPasskeys,
 	getPasskey,
+	getPasskeys,
 	removePasskey,
 } from "./store";
 import type {
@@ -62,6 +63,11 @@ export const WithPasskeyStore: Extension<PasskeyStoreExtension> = (
 						id,
 					});
 				},
+				getPasskeys: async () => {
+					return passkeyHooks("list", getPasskeys, {
+						store: passkeyStore,
+					});
+				},
 				clear: async () => {
 					return passkeyHooks("clear", clearPasskeys, {
 						store: passkeyStore,
diff --git a/extensions/passkeys/store.ts b/extensions/passkeys/store.ts
@@ -81,6 +81,26 @@ export function getPasskey({
 	return store.state.passkeys.find((passkey) => passkey.id === id);
 }
 
+/**
+ * Retrieves all passkeys from the store.
+ *
+ * @param params - The retrieval parameters.
+ * @param params.store - The TanStack store instance for {@link PasskeyStoreState}.
+ * @returns An array of all {@link Passkey}s.
+ *
+ * @example
+ * ```typescript
+ * getPasskeys({ store });
+ * ```
+ */
+export function getPasskeys({
+	store,
+}: {
+	store: Store<PasskeyStoreState>;
+}): Passkey[] {
+	return store.state.passkeys;
+}
+
 /**
  * Clears all passkeys from the store.
  *
diff --git a/extensions/passkeys/types.ts b/extensions/passkeys/types.ts
@@ -94,6 +94,12 @@ export interface PasskeyStoreApi {
 	 * @returns The passkey if found, otherwise undefined.
 	 */
 	getPasskey: (id: string) => Promise<Passkey | undefined>;
+	/**
+	 * Retrieves all passkeys from the store.
+	 *
+	 * @returns A promise that resolves to an array of all passkeys.
+	 */
+	getPasskeys: () => Promise<Passkey[]>;
 	/**
 	 * Clears all passkeys from the store.
 	 *
diff --git a/hooks/useConnection.ts b/hooks/useConnection.ts
@@ -11,6 +11,11 @@ import {
   encodeCredential,
 } from "@algorandfoundation/liquid-client";
 import { encodeAddress } from "@algorandfoundation/keystore";
+import type { KeyData, KeyStoreState } from "@algorandfoundation/keystore";
+import { fetchSecret, getMasterKey, commit } from '@algorandfoundation/react-native-keystore';
+import { keyStore } from '@/stores/keystore';
+import { accountsStore } from '@/stores/accounts';
+import { passkeysStore } from '@/stores/passkeys';
 import { useProvider } from '@/hooks/useProvider';
 import { addMessage } from '@/stores/messages';
 import { sessionsStore, addSession, updateSessionStatus, updateSessionActivity, Session } from '@/stores/sessions';
@@ -29,7 +34,7 @@ interface UseConnectionResult {
 
 export function useConnection(origin: string, requestId: string): UseConnectionResult {
   const router = useRouter();
-  const { accounts, keys, key, passkeys, sessions } = useProvider();
+  const { accounts, keys, key, passkey, sessions } = useProvider();
   
   const [isConnected, setIsConnected] = useState(false);
   const [address, setAddress] = useState<string | null>(null);
@@ -46,18 +51,7 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
   const dataChannelRef = useRef<RTCDataChannel | null>(null);
   const clientRef = useRef<SignalClient | null>(null);
   const lastUserActivityRef = useRef<number>(Date.now());
-
-  useEffect(() => {
-    if (accounts.length > 0 && keys.length > 0 && !address) {
-      let foundKey = keys.find((k) => k.id === accounts[0]?.metadata?.keyId);
-      if (!foundKey && keys.length > 0) {
-        foundKey = keys[0];
-      }
-      if (foundKey?.publicKey) {
-        setAddress(encodeAddress(foundKey.publicKey));
-      }
-    }
-  }, [accounts, keys, address]);
+  const authFlowInProgressRef = useRef<boolean>(false);
 
   const session = useStore(sessionsStore, (state) => 
     state.sessions.find(s => s.id === requestId && s.origin === origin)
@@ -130,13 +124,19 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
     let active = true;
 
     async function setupConnection() {
+      const toUrlSafe = (id: string) => id.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
       if (!origin || !requestId) {
         console.error("Missing origin or requestId");
         setIsLoading(false);
         return;
       }
 
-      if (accounts.length === 0 || keys.length === 0) {
+      if (authFlowInProgressRef.current) {
+        console.log("Auth flow already in progress, skipping duplicate setup");
+        return;
+      }
+
+      if (accountsStore.state.accounts.length === 0 || keyStore.state.keys.length === 0) {
         console.log("Waiting for accounts and keys to load...");
         // If it's been loading for more than a few seconds, it might really be empty
         // but typically it's better to wait for them to be non-empty.
@@ -152,23 +152,27 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
       setError(null);
 
       try {
-        const existingSession = sessions.find(s => s.id === requestId && s.origin === origin);
+        const currentSessions = sessionsStore.state.sessions;
+        const currentKeys = keyStore.state.keys;
+        const currentAccounts = accountsStore.state.accounts;
+
+        const existingSession = currentSessions.find(s => s.id === requestId && s.origin === origin);
         if (!existingSession) {
           addSession({ id: requestId, origin, status: 'active', ttl: 60000 });
         } else if (existingSession.status !== 'active') {
           updateSessionStatus(requestId, origin, 'active');
         }
         
         // Try to find the key associated with the first account, but fall back to the first available key
-        let foundKey = keys.find((k) => k.id === accounts[0]?.metadata?.keyId);
-        if (!foundKey && keys.length > 0) {
-          foundKey = keys[0];
+        let foundKey = currentKeys.find((k) => k.id === currentAccounts[0]?.metadata?.keyId);
+        if (!foundKey && currentKeys.length > 0) {
+          foundKey = currentKeys[0];
           console.log("Falling back to the first available key for attestation");
         }
 
         if (!foundKey || !foundKey.publicKey) {
-          console.error("No key found for attestation. Keys:", JSON.stringify(keys.map(k => ({id: k.id, type: k.type})), null, 2));
-          console.error("Accounts:", JSON.stringify(accounts.map(a => ({address: a.address, keyId: a.metadata?.keyId})), null, 2));
+          console.error("No key found for attestation. Keys:", JSON.stringify(currentKeys.map(k => ({id: k.id, type: k.type})), null, 2));
+          console.error("Accounts:", JSON.stringify(currentAccounts.map(a => ({address: a.address, keyId: a.metadata?.keyId})), null, 2));
           throw new Error("No key found for attestation");
         }
 
@@ -177,8 +181,10 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
         const sessionCheck = await fetch(`${origin}/auth/session`);
         if (!active) return;
         console.log("Initial session status:", sessionCheck.ok);
+        authFlowInProgressRef.current = true;
         
-        const relevantPasskeys = passkeys.filter(p => {
+        const currentPasskeys = await passkey.store.getPasskeys();
+        const relevantPasskeys = currentPasskeys.filter(p => {
           const storedOrigin = p.metadata?.origin;
           if (!storedOrigin) return false;
           try {
@@ -256,7 +262,7 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
           }
 
           if (!selectedAddress) {
-            const matchedPasskey = relevantPasskeys.find(p => p.id === credential.id) || passkeys.find(p => p.id === credential.id);
+            const matchedPasskey = relevantPasskeys.find(p => p.id === credential.id) || currentPasskeys.find(p => p.id === credential.id);
             const userHandle = matchedPasskey?.metadata?.userHandle;
             if (userHandle) {
               try {
@@ -280,7 +286,7 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
 
             // Re-sign the challenge if the address changed to match the selected passkey
             const selectedPublicKey = decodeAddress(selectedAddress);
-            const selectedKey = keys.find(k => 
+            const selectedKey = keyStore.state.keys.find(k => 
               k.publicKey && k.publicKey.length === selectedPublicKey.length && 
               k.publicKey.every((v, i) => v === selectedPublicKey[i])
             );
@@ -310,6 +316,24 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
           if (!submitResponse.ok) {
             throw new Error(`Failed to submit assertion response: ${submitResponse.status} ${submitResponse.statusText}`);
           }
+
+          const currentPasskeys = await passkey.store.getPasskeys();
+          const matchedPasskey = currentPasskeys.find(p => p.id === credential.id);
+          const matchedKey = keyStore.state.keys.find(k => k.id === matchedPasskey?.metadata?.keyId) || 
+                             keyStore.state.keys.find((k) => toUrlSafe(k.id) === credential.id);
+
+          if (matchedKey) {
+            try {
+              const masterKey = await getMasterKey();
+              const keyData = await fetchSecret<KeyData>({ keyId: matchedKey.id, masterKey });
+              if (keyData) {
+                keyData.metadata = { ...keyData.metadata, registered: true };
+                await commit({ store: keyStore as any, keyData });
+              }
+            } catch (error) {
+              console.error('Failed to update key metadata after assertion:', error);
+            }
+          }
         } else {
           console.log("No existing passkey for origin, using attestation");
           
@@ -400,6 +424,24 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
           if (!submitResponse.ok) {
             throw new Error(`Failed to submit attestation response: ${submitResponse.status} ${submitResponse.statusText}`);
           }
+
+          const currentPasskeys = await passkey.store.getPasskeys();
+          const matchedPasskey = currentPasskeys.find(p => p.id === credential.id);
+          const matchedKey = keyStore.state.keys.find(k => k.id === matchedPasskey?.metadata?.keyId) || 
+                             keyStore.state.keys.find((k) => toUrlSafe(k.id) === credential.id);
+
+          if (matchedKey) {
+            try {
+              const masterKey = await getMasterKey();
+              const keyData = await fetchSecret<KeyData>({ keyId: matchedKey.id, masterKey });
+              if (keyData) {
+                keyData.metadata = { ...keyData.metadata, registered: true };
+                await commit({ store: keyStore as any, keyData });
+              }
+            } catch (error) {
+              console.error('Failed to update key metadata after attestation:', error);
+            }
+          }
         }
       
         // Final validation of the session before connecting
@@ -517,6 +559,8 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
             [{ text: "OK", onPress: () => router.back() }]
           );
         }
+      } finally {
+        authFlowInProgressRef.current = false;
       }
     }
 
@@ -533,7 +577,7 @@ export function useConnection(origin: string, requestId: string): UseConnectionR
         clientRef.current = null;
       }
     };
-  }, [origin, requestId, accounts, keys, key.store, router]);
+  }, [origin, requestId, router, key, passkey, accounts.length > 0, keys.length > 0]);
 
   return {
     session,
diff --git a/lib/polyfill.ts b/lib/polyfill.ts

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ const provider = new ReactNativeProvider(`
`54`	`54`	`}`
`55`	`55`	`)`
`56`	`56`
`57`		`-setupNavigatorPolyfill(provider)`
	`57`	`+setupNavigatorPolyfill()`
`58`	`58`
`59`	`59`	`async function bootstrap() {`
`60`	`60`	`try {`