Refactor: Centralized Supabase Auth and implemented Auth Guards to prevent 401 errors

src/context/AuthContext.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Session, User } from '@supabase/supabase-js';
+import { createClient } from '@/lib/supabase/client';
+
+interface AuthContextType {
+    user: User | null;
+    session: Session | null;
+    isLoading: boolean;
+    signOut: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [user, setUser] = useState<User | null>(null);
+    const [session, setSession] = useState<Session | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const supabase = createClient();
+
+    useEffect(() => {
+        // Initial session check
+        const initAuth = async () => {
+            try {
+                const { data: { session } } = await supabase.auth.getSession();
+                setSession(session);
+                setUser(session?.user ?? null);
+            } catch (error) {
+                console.error('[AuthContext] Error getting initial session:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        initAuth();
+
+        // Listen for auth changes (Magic Link, OAuth, Sign In/Out)
+        const { data: { subscription } } = supabase.auth.onAuthStateChange((event, currentSession) => {
+            console.log(`[AuthContext] event: ${event}`, {
+                userId: currentSession?.user?.id,
+                email: currentSession?.user?.email
+            });
+
+            setSession(currentSession);
+            setUser(currentSession?.user ?? null);
+            setIsLoading(false);
+
+            if (event === 'SIGNED_OUT') {
+                // Hard reload to clear all state/cache on logout
+                window.location.href = '/';
+            }
+        });
+
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [supabase]);
+
+    const signOut = async () => {
+        await supabase.auth.signOut();
+    };
+
+    return (
+        <AuthContext.Provider value={{ user, session, isLoading, signOut }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export const useAuth = () => {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+};