Add global authentication protection

src/components/AuthGuard.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { supabase } from '../lib/supabase';
+import type { User } from '@supabase/supabase-js';
+import { Loader2 } from 'lucide-react';
+
+interface AuthGuardProps {
+  children: React.ReactNode;
+  requireAuth?: boolean;
+}
+
+export function AuthGuard({ children, requireAuth = true }: AuthGuardProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Get initial session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null);
+      setLoading(false);
+      
+      // Redirect logic
+      if (requireAuth && !session?.user) {
+        // User needs to be authenticated but isn't - redirect to login
+        window.location.href = '/login';
+      } else if (!requireAuth && session?.user) {
+        // User is authenticated but on a public page - redirect to dashboard
+        const currentPath = window.location.pathname;
+        if (currentPath === '/login' || currentPath === '/signup') {
+          window.location.href = '/dashboard';
+        }
+      }
+    });
+
+    // Listen for auth changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        setUser(session?.user ?? null);
+        setLoading(false);
+        
+        // Handle auth state changes
+        if (requireAuth && !session?.user) {
+          window.location.href = '/login';
+        } else if (!requireAuth && session?.user) {
+          const currentPath = window.location.pathname;
+          if (currentPath === '/login' || currentPath === '/signup') {
+            window.location.href = '/dashboard';
+          }
+        }
+      }
+    );
+
+    return () => subscription.unsubscribe();
+  }, [requireAuth]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="flex items-center gap-2 text-lg">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  // For protected routes, only render if user is authenticated
+  if (requireAuth && !user) {
+    return null; // Will redirect in useEffect
+  }
+
+  // For public routes, only render if user is not authenticated (or if they are, they'll be redirected)
+  if (!requireAuth && user) {
+    const currentPath = window.location.pathname;
+    if (currentPath === '/login' || currentPath === '/signup') {
+      return null; // Will redirect in useEffect
+    }
+  }
+
+  return <>{children}</>;
+}

src/components/ProtectedRoute.tsx

@@ -1,52 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { supabase } from '../lib/supabase';
-import type { User } from '@supabase/supabase-js';
-import { Loader2 } from 'lucide-react';
-
-interface ProtectedRouteProps {
-  children: React.ReactNode;
-}
-
-export function ProtectedRoute({ children }: ProtectedRouteProps) {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Get initial session
-    supabase.auth.getSession().then(({ data: { session } }) => {
-      setUser(session?.user ?? null);
-      setLoading(false);
-    });
-
-    // Listen for auth changes
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(
-      (event, session) => {
-        setUser(session?.user ?? null);
-        setLoading(false);
-      }
-    );
-
-    return () => subscription.unsubscribe();
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="flex items-center gap-2 text-lg">
-          <Loader2 className="h-5 w-5 animate-spin" />
-          Loading...
-        </div>
-      </div>
-    );
-  }
-
-  if (!user) {
-    // Redirect to login if not authenticated
-    if (typeof window !== 'undefined') {
-      window.location.href = '/login';
-    }
-    return null;
-  }
-
-  return <>{children}</>;
-}

src/pages/dashboard.astro

@@ -2,14 +2,14 @@
 import '@/styles/globals.css'
 import Layout from '../layouts/Layout.astro';
 import { Dashboard } from '../components/Dashboard';
-import { ProtectedRoute } from '../components/ProtectedRoute';
+import { AuthGuard } from '../components/AuthGuard';
 import { Navbar } from '../components/Navbar';
 ---
 
 <Layout title="Dashboard - InboxNegotiator">
   <Navbar client:load />
   
-  <ProtectedRoute client:load>
+  <AuthGuard requireAuth={true} client:load>
     <Dashboard client:load />
-  </ProtectedRoute>
+  </AuthGuard>
 </Layout>

src/pages/login.astro

@@ -3,19 +3,22 @@ import '@/styles/globals.css'
 import Layout from '../layouts/Layout.astro';
 import { AuthForm } from '../components/AuthForm';
 import { Navbar } from '../components/Navbar';
+import { AuthGuard } from '../components/AuthGuard';
 ---
 
 <Layout title="Sign In - InboxNegotiator">
   <Navbar client:load />
   
-  <main class="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+  <AuthGuard requireAuth={false} client:load>
-    <div class="w-full max-w-md">
+    <main class="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-8">
+      <div class="w-full max-w-md">
-        <h1 class="text-3xl font-bold text-gray-900 mb-2">Sign In</h1>
+        <div class="text-center mb-8">
-        <p class="text-gray-600">Access your debt resolution dashboard</p>
+          <h1 class="text-3xl font-bold text-gray-900 mb-2">Sign In</h1>
+          <p class="text-gray-600">Access your debt resolution dashboard</p>
+        </div>
+        
+        <AuthForm mode="login" client:load />
       </div>
-      
+    </main>
-      <AuthForm mode="login" client:load />
+  </AuthGuard>
-    </div>
-  </main>
 </Layout>

src/pages/signup.astro

@@ -3,19 +3,22 @@ import '@/styles/globals.css'
 import Layout from '../layouts/Layout.astro';
 import { AuthForm } from '../components/AuthForm';
 import { Navbar } from '../components/Navbar';
+import { AuthGuard } from '../components/AuthGuard';
 ---
 
 <Layout title="Sign Up - InboxNegotiator">
   <Navbar client:load />
   
-  <main class="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+  <AuthGuard requireAuth={false} client:load>
-    <div class="w-full max-w-md">
+    <main class="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-8">
+      <div class="w-full max-w-md">
-        <h1 class="text-3xl font-bold text-gray-900 mb-2">Create Account</h1>
+        <div class="text-center mb-8">
-        <p class="text-gray-600">Start resolving your debts with AI assistance</p>
+          <h1 class="text-3xl font-bold text-gray-900 mb-2">Create Account</h1>
+          <p class="text-gray-600">Start resolving your debts with AI assistance</p>
+        </div>
+        
+        <AuthForm mode="signup" client:load />
       </div>
-      
+    </main>
-      <AuthForm mode="signup" client:load />
+  </AuthGuard>
-    </div>
-  </main>
 </Layout>