fix: prevent passkey conditional ui unhandled rejection blocking login

2026-06-28 05:55:00 +08:00
parent 4cf8a42742
commit eaa7c85e09
1 changed files with 20 additions and 11 deletions
@@ -57,23 +57,32 @@ export default function LoginForm() {

    // Preload passkeys for conditional UI — must be called on mount when
    // both email + password fields are in the DOM.
+    // Note: WebAuthn conditional mediation can throw NetworkError on pages
+    // with self-signed certs (common in dev). We catch and suppress it.
    useEffect(() => {
        mountedRef.current = true
        if ("PublicKeyCredential" in window && !passkeyInitiatedRef.current) {
            passkeyInitiatedRef.current = true
            suppressPasskeyErrors = true
-            authClient.signIn.passkey({
-                autoFill: true,
-                fetchOptions: {
-                    onSuccess: handleLoginSuccess,
-                },
-            }).catch((err) => {
-                if (!isWebAuthnAbortError(err)) {
-                    console.warn("[passkey-conditional-ui]", err)
+
+            const startPasskeyAutoFill = async () => {
+                try {
+                    await authClient.signIn.passkey({
+                        autoFill: true,
+                        fetchOptions: {
+                            onSuccess: handleLoginSuccess,
+                        },
+                    })
+                } catch (err) {
+                    if (!isWebAuthnAbortError(err)) {
+                        console.warn("[passkey-conditional-ui]", err)
+                    }
+                } finally {
+                    suppressPasskeyErrors = false
                }
-            }).finally(() => {
-                suppressPasskeyErrors = false
-            })
+            }
+
+            startPasskeyAutoFill()
        }
        return () => { mountedRef.current = false }
    }, [handleLoginSuccess])