danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor(passkey-login): simplify passkey autofill event

Browse source
This commit is contained in:
Nicolas Meienberger 2026-05-21 16:47:33 +02:00
parent a291eafb0d
commit 5362151f9f
No known key found for this signature in database
1 changed files with 35 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
app/client/modules/auth/routes/login.tsx
View file

@ -1,5 +1,5 @@
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { AuthLayout } from "~/client/components/auth-layout"; import { AuthLayout } from "~/client/components/auth-layout";
@ -50,33 +50,36 @@ export function LoginPage({ error }: LoginPageProps = {}) {
const errorCode = decodeLoginError(error); const errorCode = decodeLoginError(error);
const errorDescription = errorCode ? getLoginErrorDescription(errorCode) : null; const errorDescription = errorCode ? getLoginErrorDescription(errorCode) : null;
const passkeyAutofillStarted = useRef(false);
useEffect(() => { useEffect(() => {
if (passkeyAutofillStarted.current) return; if (
if (typeof window === "undefined") return; !PublicKeyCredential.isConditionalMediationAvailable ||
const supportsConditional = !PublicKeyCredential.isConditionalMediationAvailable()
typeof window.PublicKeyCredential !== "undefined" && ) {
typeof window.PublicKeyCredential.isConditionalMediationAvailable === "function"; return;
if (!supportsConditional) return; }
passkeyAutofillStarted.current = true; const autoSignIn = async () => {
void (async () => { await authClient.signIn.passkey({
try { autoFill: true,
const available = await window.PublicKeyCredential.isConditionalMediationAvailable(); fetchOptions: {
if (!available) return; onResponse: async () => {
const { data, error } = await authClient.signIn.passkey({ autoFill: true }); const session = await authClient.getSession();
if (error || !data) return;
const session = await authClient.getSession(); if (
if (session.data?.user && !session.data.user.hasDownloadedResticPassword) { session.data?.user &&
void navigate({ to: "/download-recovery-key" }); !session.data.user.hasDownloadedResticPassword &&
} else { !hasSkippedRecoveryKeyDownload(session.data.user.id)
void navigate({ to: "/volumes" }); ) {
} void navigate({ to: "/download-recovery-key" });
} catch (err) { } else {
logger.error(err); void navigate({ to: "/volumes" });
} }
})(); },
},
});
};
void autoSignIn();
}, [navigate]); }, [navigate]);
const form = useForm<LoginFormValues>({ const form = useForm<LoginFormValues>({
@ -284,7 +287,12 @@ export function LoginPage({ error }: LoginPageProps = {}) {
</button> </button>
</div> </div>
<FormControl> <FormControl>
<Input {...field} type="password" disabled={isLoggingIn} autoComplete="current-password webauthn" /> <Input
{...field}
type="password"
disabled={isLoggingIn}
autoComplete="current-password webauthn"
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>