"use client"; import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'; import { createClient } from '@/lib/supabase/client'; import { User, Session } from '@supabase/supabase-js'; import { SupabaseClient } from '@supabase/supabase-js'; type AuthContextType = { supabase: SupabaseClient; session: Session | null; user: User | null; isLoading: boolean; signOut: () => Promise; }; const AuthContext = createContext(undefined); export const AuthProvider = ({ children }: { children: ReactNode }) => { const supabase = createClient(); const [session, setSession] = useState(null); const [user, setUser] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const getInitialSession = async () => { const { data: { session: currentSession } } = await supabase.auth.getSession(); setSession(currentSession); setUser(currentSession?.user ?? null); setIsLoading(false); }; getInitialSession(); const { data: authListener } = supabase.auth.onAuthStateChange( (_event, newSession) => { setSession(newSession); setUser(newSession?.user ?? null); // No need to set loading state here as initial load is done // and subsequent changes shouldn't show a loading state for the whole app if (isLoading) setIsLoading(false); } ); return () => { authListener?.subscription.unsubscribe(); }; }, [supabase, isLoading]); // Added isLoading to dependencies to ensure it runs once after initial load completes const signOut = async () => { await supabase.auth.signOut(); // State updates will be handled by onAuthStateChange }; const value = { supabase, session, user, isLoading, signOut, }; return ( {children} ); }; export const useAuth = (): AuthContextType => { const context = useContext(AuthContext); if (context === undefined) { throw new Error('useAuth must be used within an AuthProvider'); } return context; };