feat(auth): improve error handling and user feedback in Google sign-in flow

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) {
+            } catch (err: any) {
-                // Fallback to redirect when popups are blocked.
+                const code = err?.code ?? "";
-                const code = (err as { code?: string }).code || "";
+                // Common cases where redirect works better
-                if (code === "auth/popup-blocked" || code === "auth/operation-not-supported-in-this-environment") {
+                const redirectable = [
-                    await import("firebase/auth").then(({ signInWithRedirect }) => signInWithRedirect(auth, provider));
+                    "auth/popup-blocked",
-                } else {
+                    "auth/operation-not-supported-in-this-environment",
-                    const msg = err instanceof Error ? err.message : "Sign-in failed";
+                    "auth/unauthorized-domain",
-                    setError(msg);
+                ];
-                    throw err;
+                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);

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}>
+            <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>
     );
 }