feat: Add passkey autofill to login and enhance passkey management error handling.

Author: thakurdotdev

client/src/Pages/Music/BottomPlayer/index.jsx

@@ -49,8 +49,6 @@ const BottomPlayer = () => {
     getRecommendations();
   }, [getRecommendations]);
 
-  console.log(currentSong);
-
   if (!currentSong) return null;
 
   return (

client/src/components/Auth/Login.jsx

@@ -4,9 +4,10 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from '@/component
 import { Input } from '@/components/ui/input';
 import { useProfile } from '@/Context/Context';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { startAuthentication, browserSupportsWebAuthnAutofill } from '@simplewebauthn/browser';
 import axios from 'axios';
 import { Eye, EyeOff, KeyRound, Loader2Icon } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
@@ -34,6 +35,7 @@ const Login = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const returnPath = searchParams.get('returnTo') || '/feed';
+  const passkeyAuthStarted = useRef(false);
 
   const form = useForm({
     resolver: yupResolver(validationSchema),
@@ -62,10 +64,84 @@ const Login = () => {
         setUserData(data.data);
       }
     } catch (error) {
-      console.log(error);
+      console.debug('Failed to fetch IP info:', error);
     }
   };
 
+  // Handle passkey authentication with conditional UI (autofill)
+  const handlePasskeyAuth = useCallback(
+    async (assertionResponse, email) => {
+      try {
+        setLoading(true);
+        const verificationRes = await axios.post(
+          `${import.meta.env.VITE_API_URL}/api/auth/passkey/authenticate/verify`,
+          {
+            assertionResponse,
+            email,
+            userData,
+          },
+          { withCredentials: true }
+        );
+
+        if (verificationRes.data.verified) {
+          await getProfile();
+          toast.success('Logged in with passkey!');
+          navigate(returnPath);
+        }
+      } catch (error) {
+        console.error('Passkey auth error:', error);
+        toast.error(error.response?.data?.message || 'Passkey authentication failed');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [userData, getProfile, navigate, returnPath]
+  );
+
+  // Initialize conditional UI (passkey autofill) on mount
+  useEffect(() => {
+    let isMounted = true;
+
+    const initConditionalUI = async () => {
+      if (passkeyAuthStarted.current) return;
+
+      try {
+        const supportsAutofill = await browserSupportsWebAuthnAutofill();
+        if (!supportsAutofill || !isMounted) return;
+
+        passkeyAuthStarted.current = true;
+
+        const optionsRes = await axios.post(
+          `${import.meta.env.VITE_API_URL}/api/auth/passkey/authenticate/conditional`
+        );
+
+        if (!isMounted) return;
+
+        const assertionResponse = await startAuthentication({
+          optionsJSON: optionsRes.data,
+          useBrowserAutofill: true,
+        });
+
+        if (assertionResponse && isMounted) {
+          await handlePasskeyAuth(assertionResponse, null);
+        }
+      } catch (error) {
+        // AbortError is expected when user navigates away or doesn't select a passkey
+        if (error.name !== 'AbortError' && error.name !== 'NotAllowedError') {
+          console.error('Passkey autofill error:', error.message);
+        }
+        passkeyAuthStarted.current = false;
+      }
+    };
+
+    initConditionalUI();
+
+    return () => {
+      isMounted = false;
+      passkeyAuthStarted.current = false;
+    };
+  }, [handlePasskeyAuth]);
+
   const handleFormSubmit = async (data) => {
     setLoading(true);
     try {
@@ -175,7 +251,12 @@ const Login = () => {
                 render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <Input {...field} type='email' placeholder='Email' />
+                      <Input
+                        {...field}
+                        type='email'
+                        placeholder='Email'
+                        autoComplete='username webauthn'
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -193,6 +274,7 @@ const Login = () => {
                           {...field}
                           type={showPassword ? 'text' : 'password'}
                           placeholder='Password'
+                          autoComplete='current-password'
                         />
                         <Button
                           type='button'

client/src/components/Auth/PassKeyLogin.jsx

@@ -22,21 +22,42 @@ import { cn } from '@/lib/utils';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { startAuthentication } from '@simplewebauthn/browser';
 import axios from 'axios';
-import { KeyRound, Loader2 } from 'lucide-react';
-import { useContext, useState } from 'react';
+import { KeyRound, Loader2, AlertCircle, ShieldCheck } from 'lucide-react';
+import { useContext, useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import * as yup from 'yup';
 import DotPattern from '../ui/dot-pattern';
-import { useEffect } from 'react';
 
 const schema = yup
   .object({
     email: yup.string().email('Please enter a valid email').required('Email is required'),
   })
   .required();
 
+// WebAuthn error messages for better UX
+const getWebAuthnErrorMessage = (error) => {
+  const name = error?.name || '';
+  const message = error?.message || '';
+
+  switch (name) {
+    case 'NotAllowedError':
+      if (message.includes('timed out')) {
+        return 'Authentication timed out. Please try again.';
+      }
+      return 'Authentication was cancelled or not allowed. Please try again.';
+    case 'SecurityError':
+      return 'Security error. Make sure you are using HTTPS.';
+    case 'NotSupportedError':
+      return 'Passkeys are not supported on this device or browser.';
+    case 'AbortError':
+      return 'The operation was cancelled.';
+    default:
+      return null; // Return null for API errors to use the server message
+  }
+};
+
 export const PasskeyLogin = () => {
   const { getProfile } = useContext(Context);
   const navigate = useNavigate();
@@ -64,7 +85,8 @@ export const PasskeyLogin = () => {
         setUserData(data.data);
       }
     } catch (error) {
-      console.log(error);
+      // Silently fail - IP info is optional
+      console.debug('Failed to fetch IP info:', error);
     }
   };
 
@@ -73,69 +95,72 @@ export const PasskeyLogin = () => {
     setError('');
 
     try {
+      // Step 1: Get authentication options from server
       const options = await axios.post(
         `${import.meta.env.VITE_API_URL}/api/auth/passkey/authenticate`,
+        { email: data.email }
+      );
+
+      if (!options.data) {
+        throw new Error('Failed to get authentication options');
+      }
+
+      // Step 2: Authenticate using WebAuthn API
+      const assertionResponse = await startAuthentication({
+        optionsJSON: options.data,
+      });
+
+      // Step 3: Verify with server
+      const verificationRes = await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/passkey/authenticate/verify`,
         {
+          assertionResponse: assertionResponse,
           email: data.email,
-        }
+          userData: userData,
+        },
+        { withCredentials: true }
       );
 
-      if (options.data) {
-        const assertionResponse = await startAuthentication({
-          optionsJSON: options.data,
-        });
-
-        const verificationRes = await axios.post(
-          `${import.meta.env.VITE_API_URL}/api/auth/passkey/authenticate/verify`,
-          {
-            assertionResponse: assertionResponse,
-            email: data.email,
-            userData: userData,
-          },
-          {
-            withCredentials: true,
-          }
-        );
-
-        const verificationResult = verificationRes.data;
-
-        if (verificationResult.verified) {
-          await getProfile();
-          toast.success('Login successful');
-          navigate('/feed');
-        }
+      if (verificationRes.data.verified) {
+        await getProfile();
+        toast.success('Login successful!');
+        navigate('/feed');
+      } else {
+        setError('Authentication verification failed. Please try again.');
       }
     } catch (error) {
-      if (error?.response?.data?.message) {
+      console.error('Passkey login error:', error);
+
+      // Check for WebAuthn-specific errors first
+      const webAuthnError = getWebAuthnErrorMessage(error);
+      if (webAuthnError) {
+        setError(webAuthnError);
+      } else if (error?.response?.data?.message) {
         setError(error.response.data.message);
+      } else {
+        setError('An unexpected error occurred. Please try again.');
       }
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <div className='flex items-center justify-center max-h-svh h-svh overflow-hidden relative'>
-      <DotPattern
-        className={cn('[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]')}
-      />
-      <div className='absolute -top-24 -left-24 w-96 h-96 rounded-full bg-purple-600/30 filter blur-[100px] animate-pulse'></div>
-      <div
-        className='absolute -bottom-32 -right-32 w-96 h-96 rounded-full bg-pink-600/20 filter blur-[120px] animate-pulse'
-        style={{ animationDelay: '2s' }}
-      ></div>
-      <div
-        className='absolute top-1/3 right-1/4 w-64 h-64 rounded-full bg-blue-600/20 filter blur-[80px] animate-pulse'
-        style={{ animationDelay: '1s' }}
-      ></div>
-      <Card className='w-full max-w-md mx-auto z-10'>
+    <div className='flex items-center justify-center max-h-svh h-svh overflow-hidden relative bg-[#050505]'>
+      {/* Subtle glow */}
+      <div className='absolute top-1/4 left-1/4 w-96 h-96 bg-emerald-500/5 rounded-full blur-[120px]' />
+      <div className='absolute bottom-1/4 right-1/4 w-96 h-96 bg-teal-500/5 rounded-full blur-[120px]' />
+      <Card className='w-full max-w-md mx-auto z-10 bg-white/[0.03] border-white/[0.08] backdrop-blur-sm'>
         <CardHeader className='flex flex-col gap-3'>
           <div className='flex items-center gap-2'>
-            <KeyRound className='w-6 h-6 text-primary' />
+            <div className='p-2 rounded-lg bg-primary/10'>
+              <KeyRound className='w-6 h-6 text-primary' />
+            </div>
             <CardTitle>Login with Passkey</CardTitle>
           </div>
           <CardDescription className='mt-2'>
-            Use your device's biometric authentication or security key to sign in
+            Use your device's biometric authentication (Face ID, Touch ID, Windows Hello) or
+            security key to sign in securely.
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -148,7 +173,12 @@ export const PasskeyLogin = () => {
                   <FormItem>
                     <FormLabel>Email</FormLabel>
                     <FormControl>
-                      <Input placeholder='Enter your email' type='email' {...field} />
+                      <Input
+                        placeholder='Enter your email'
+                        type='email'
+                        autoComplete='email webauthn'
+                        {...field}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -157,20 +187,41 @@ export const PasskeyLogin = () => {
 
               {error && (
                 <Alert variant='destructive'>
+                  <AlertCircle className='h-4 w-4' />
                   <AlertDescription>{error}</AlertDescription>
                 </Alert>
               )}
 
-              <Button type='submit' className='w-full' disabled={isLoading}>
-                {isLoading && <Loader2 className='w-6 h-6 mr-2 animate-spin' />}
-                {isLoading ? 'Authenticating...' : 'Login with Passkey'}
-              </Button>
-              <Button variant='ghost' className='w-full' onClick={() => navigate('/login')}>
-                Login with Password
-              </Button>
+              <div className='space-y-3'>
+                <Button type='submit' className='w-full' disabled={isLoading}>
+                  {isLoading ? (
+                    <>
+                      <Loader2 className='w-5 h-5 mr-2 animate-spin' />
+                      Authenticating...
+                    </>
+                  ) : (
+                    <>
+                      <ShieldCheck className='w-5 h-5 mr-2' />
+                      Continue with Passkey
+                    </>
+                  )}
+                </Button>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  className='w-full'
+                  onClick={() => navigate('/login')}
+                >
+                  Login with Password
+                </Button>
+              </div>
             </form>
           </Form>
-          <CardFooter className='flex flex-col mt-3'></CardFooter>
+          <CardFooter className='flex flex-col mt-3 px-0'>
+            <p className='text-xs text-muted-foreground text-center'>
+              Passkeys provide a more secure, phishing-resistant way to sign in without passwords.
+            </p>
+          </CardFooter>
         </CardContent>
       </Card>
     </div>