fix: auth init timeout + clearer login errors

Author: Programcode

src/lib/supabase/AuthProvider.tsx

@@ -27,6 +27,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     let mounted = true;
 
     const init = async () => {
+      // In some browser/extension states (blocked storage, stalled refresh),
+      // auth initialization can hang long enough to look like a blank screen.
+      // Fail open to the login route if it takes too long.
+      const initTimeoutId = window.setTimeout(() => {
+        if (!mounted) return;
+        console.warn('[Auth] init timeout: continuing without session');
+        setLoading(false);
+      }, 4000);
+
       try {
         const { data, error } = await supabase.auth.getSession();
         if (!mounted) return;
@@ -43,6 +52,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         if (!mounted) return;
         setSession(null);
       } finally {
+        window.clearTimeout(initTimeoutId);
         if (mounted) setLoading(false);
       }
     };
@@ -82,8 +92,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         resetSettingsStore();
       }
 
-      void hydrateSessionStore();
-      void hydrateSettingsStore();
+      hydrateSessionStore().catch((err) => console.warn('[Auth] hydrateSessionStore failed:', err));
+      hydrateSettingsStore().catch((err) => console.warn('[Auth] hydrateSettingsStore failed:', err));
     });
 
     return () => {
@@ -97,7 +107,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     user: session?.user ?? null,
     loading,
     signInWithGoogle: async () => {
-      await supabase.auth.signInWithOAuth({
+      const { error } = await supabase.auth.signInWithOAuth({
         provider: 'google',
         options: {
           redirectTo: `${window.location.origin}/app`,
@@ -108,6 +118,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
           },
         },
       });
+      if (error) throw error;
     },
     signOut: async () => {
       await supabase.auth.signOut();

src/pages/LoginPage.tsx

@@ -1,20 +1,51 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Sparkles } from 'lucide-react';
+import { Loader2, Sparkles } from 'lucide-react';
 import { useAuth } from '@/lib/supabase/AuthProvider';
+import { useToast } from '@/hooks/use-toast';
+import { SUPABASE_URL } from '@/lib/supabase/client';
 
 export default function LoginPage() {
   const { user, signInWithGoogle } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
   const from = (location.state as { from?: { pathname?: string } } | null)?.from?.pathname || '/app';
+  const { toast } = useToast();
+  const [signingIn, setSigningIn] = useState(false);
 
   useEffect(() => {
     if (user) navigate(from, { replace: true });
   }, [user, navigate, from]);
 
+  const handleSignIn = async () => {
+    setSigningIn(true);
+    try {
+      await signInWithGoogle();
+    } catch (err) {
+      toast({
+        title: 'Login Error',
+        description: err instanceof Error ? err.message : 'Failed to start Google sign-in',
+        variant: 'destructive',
+      });
+      setSigningIn(false);
+    }
+  };
+
+  const handleResetAuth = () => {
+    try {
+      const ref = new URL(SUPABASE_URL).hostname.split('.')[0];
+      const prefix = `sb-${ref}-`;
+      for (const key of Object.keys(localStorage)) {
+        if (key.startsWith(prefix)) localStorage.removeItem(key);
+      }
+    } catch (err) {
+      console.warn('[Auth] Failed to reset local auth state:', err);
+    }
+    window.location.reload();
+  };
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-background px-4">
       <Card className="w-full max-w-md">
@@ -26,9 +57,21 @@ export default function LoginPage() {
           <CardDescription>Google sign-in is required to use the app.</CardDescription>
         </CardHeader>
         <CardContent>
-          <Button className="w-full" onClick={() => void signInWithGoogle()}>
-            Continue with Google
-          </Button>
+          <div className="space-y-3">
+            <Button className="w-full" onClick={() => void handleSignIn()} disabled={signingIn}>
+              {signingIn ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Redirecting...
+                </>
+              ) : (
+                'Continue with Google'
+              )}
+            </Button>
+            <Button className="w-full" variant="outline" onClick={handleResetAuth} disabled={signingIn}>
+              Having trouble? Reset login
+            </Button>
+          </div>
         </CardContent>
       </Card>
     </div>