From 6745181a4bd62297b85ae6a898641cc9cef9bc8e Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 10 Dec 2025 22:45:12 +0900
Subject: [PATCH] feat(auth): improve error handling and user feedback in
 Google sign-in flow

---
 frontend/src/auth/AuthProvider.tsx     | 25 ++++++++++++++++---------
 frontend/src/components/AuthStatus.tsx | 13 ++++++++-----
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/auth/AuthProvider.tsx b/frontend/src/auth/AuthProvider.tsx
index a059203..a244155 100644
--- a/frontend/src/auth/AuthProvider.tsx
+++ b/frontend/src/auth/AuthProvider.tsx
@@ -77,16 +77,23 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
             const provider = new GoogleAuthProvider();
             try {
                 await signInWithPopup(auth, provider);
-            } catch (err: unknown) {
-                // Fallback to redirect when popups are blocked.
-                const code = (err as { code?: string }).code || "";
-                if (code === "auth/popup-blocked" || code === "auth/operation-not-supported-in-this-environment") {
-                    await import("firebase/auth").then(({ signInWithRedirect }) => signInWithRedirect(auth, provider));
-                } else {
-                    const msg = err instanceof Error ? err.message : "Sign-in failed";
-                    setError(msg);
-                    throw err;
+            } catch (err: any) {
+                const code = err?.code ?? "";
+                // Common cases where redirect works better
+                const redirectable = [
+                    "auth/popup-blocked",
+                    "auth/operation-not-supported-in-this-environment",
+                    "auth/unauthorized-domain",
+                ];
+                if (redirectable.includes(code)) {
+                    const { signInWithRedirect } = await import("firebase/auth");
+                    await signInWithRedirect(auth, provider);
+                    return; // navigation will happen
                 }
+                const msg = err instanceof Error ? err.message : String(err);
+                setError(msg);               // keep the message for the UI
+                console.error("signin error:", err);
+                throw err;                   // let the caller catch if needed
             }
         } finally {
             setSigningIn(false);
diff --git a/frontend/src/components/AuthStatus.tsx b/frontend/src/components/AuthStatus.tsx
index 7c8212d..1a0a100 100644
--- a/frontend/src/components/AuthStatus.tsx
+++ b/frontend/src/components/AuthStatus.tsx
@@ -11,10 +11,13 @@ export default function AuthStatus() {
     }
     if (!user) {
         return (
-            <button className="auth-btn" onClick={() => signInWithGoogle().catch(() => {})} disabled={signingIn}>
-                <span className="auth-icon">G</span>
-                <span>{signingIn ? "開いています…" : "Google でサインイン"}</span>
-            </button>
+            <div>
+                <button className="auth-btn" onClick={() => signInWithGoogle().catch(() => { })} disabled={signingIn}>
+                    <span className="auth-icon">G</span>
+                    <span>{signingIn ? "開いています…" : "Google でサインイン"}</span>
+                </button>
+                {error && <div className="auth-error" style={{ marginTop: 8 }}>{error}</div>}
+            </div>
         );
     }
     return (
@@ -27,7 +30,7 @@ export default function AuthStatus() {
                 </div>
                 {error && <div className="auth-error">{error}</div>}
             </div>
-            <button className="auth-signout" onClick={() => signOut().catch(() => {})}>サインアウト</button>
+            <button className="auth-signout" onClick={() => signOut().catch(() => { })}>サインアウト</button>
         </div>
     );
 }