diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx index 8d4dd7cd0..a19cd7514 100644 --- a/apps/web/src/components/forms/signin.tsx +++ b/apps/web/src/components/forms/signin.tsx @@ -1,12 +1,16 @@ 'use client'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { zodResolver } from '@hookform/resolvers/zod'; -import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser'; +import { + browserSupportsWebAuthn, + browserSupportsWebAuthnAutofill, + startAuthentication, +} from '@simplewebauthn/browser'; import { KeyRoundIcon } from 'lucide-react'; import { signIn } from 'next-auth/react'; import { useForm } from 'react-hook-form'; @@ -123,7 +127,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign setTwoFactorAuthenticationMethod(method); }; - const onSignInWithPasskey = async () => { + const onSignInWithPasskey = async (autofill: boolean = false) => { if (!browserSupportsWebAuthn()) { toast({ title: 'Not supported', @@ -136,11 +140,11 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign } try { - setIsPasskeyLoading(true); + !autofill && setIsPasskeyLoading(true); const options = await createPasskeySigninOptions(); - const credential = await startAuthentication(options); + const credential = await startAuthentication(options, autofill); const result = await signIn('webauthn', { credential: JSON.stringify(credential), @@ -256,6 +260,22 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign } }; + useEffect(() => { + void signInWithPasskeyAutofill(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const signInWithPasskeyAutofill = async () => { + const autoFillSupported = await browserSupportsWebAuthnAutofill(); + if (autoFillSupported) { + try { + await onSignInWithPasskey(true); + } catch (error) { + console.error('Error during Passkey autofill attempt:', error); + } + } + }; + return (
Email - + @@ -290,7 +310,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign Password - + @@ -346,7 +366,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign disabled={isSubmitting} loading={isPasskeyLoading} className="bg-background text-muted-foreground border" - onClick={onSignInWithPasskey} + onClick={async () => await onSignInWithPasskey()} > {!isPasskeyLoading && } Passkey