updated error message for passkey to be more generic, added a generic…

src/AuthProvider.tsx

@@ -48,7 +48,7 @@
   credentials: Credential[];
   updateCredential: (credential: Credential) => Promise<Credential>;
   deleteCredential: (credentialId: string) => Promise<void>;
-  login: (identifier: string, passkeyAvailable: boolean) => Promise<Response>;
+  login: (identifier: string, passkeyAvailable: boolean) => Promise<Response | null>;
   handlePasskeyLogin: () => Promise<boolean>;
   loading: boolean;
 }
@@ -109,13 +109,19 @@
   const login = async (
     identifier: string,
     passkeyAvailable: boolean
-  ): Promise<Response> => {
-    const response = await fetchWithAuth(`/login`, {
-      method: 'POST',
-      body: JSON.stringify({ identifier, passkeyAvailable }),
-    });
+  ): Promise<Response | null> => {
+    console.log('oranges');
 
-    return response;
+    try {
+      const response = await fetchWithAuth(`/login`, {
+        method: 'POST',
+        body: JSON.stringify({ identifier, passkeyAvailable }),
+      });
+      return response;
+    } catch (error) {
+      console.error('Error fetching,', error);
+      return null;
+    }
   };
 
   const handlePasskeyLogin = async () => {
@@ -247,7 +253,7 @@
 
   useEffect(() => {
     validateToken();
   }, []);
 
   useEffect(() => {
     if (user && isAuthenticated) {

src/components/AuthFallbackOptions.tsx

@@ -27,7 +27,7 @@ const AuthFallbackOptions: React.FC<AuthFallbackOptionsProps> = ({
 
   return (
     <div className={styles.fallbackCard}>
-      <div className={styles.fallbackHeader}>Passkeys unavailable on this device</div>
+      <div className={styles.fallbackHeader}>Trouble with passkey login?</div>
 
       <p className={styles.fallbackDescription}>Choose another secure sign-in method.</p>
 

src/views/Login.tsx

@@ -155,12 +155,14 @@ const Login: React.FC = () => {
     if (mode === 'login') {
       const loginRes = await login(identifier, passkeyAvailable);
 
-      if (loginRes.ok && passkeyAvailable) {
+      if (loginRes && loginRes.ok && passkeyAvailable) {
         const passkeyResult = await handlePasskeyLogin();
+
         if (passkeyResult) {
           navigate('/');
         }
       } else {
+        setIdentifierError('An error occurred');
         setShowFallbackOptions(true);
       }
     }