From 0f031de621a74ff2809ec71ba1f8e689dad160bf Mon Sep 17 00:00:00 2001
From: Peter <peterng.918@gmail.com>
Date: Tue, 14 Apr 2026 23:59:29 -0400
Subject: [PATCH] updated error message for passkey to be more generic, added a
 generic error text when trying to login with bad account

---
 src/AuthProvider.tsx                   | 20 +++++++++++++-------
 src/components/AuthFallbackOptions.tsx |  2 +-
 src/views/Login.tsx                    |  4 +++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/AuthProvider.tsx b/src/AuthProvider.tsx
index 32a59a0..2afe2d3 100644
--- a/src/AuthProvider.tsx
+++ b/src/AuthProvider.tsx
@@ -48,7 +48,7 @@ export interface AuthContextType {
   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 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
   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 () => {
diff --git a/src/components/AuthFallbackOptions.tsx b/src/components/AuthFallbackOptions.tsx
index 5bd4907..e56f59e 100644
--- a/src/components/AuthFallbackOptions.tsx
+++ b/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>
 
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index ce2c28a..180b108 100644
--- a/src/views/Login.tsx
+++ b/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);
       }
     }