Function SupabaseProvider

frontend/src/contexts/SupabaseProvider.tsx:17–91

({ children }: { children: React.ReactNode })

const SupabaseContext = createContext<SupabaseContextType | null>(null)

export function SupabaseProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const [supabase, setSupabase] = useState<SupabaseClient | null>(null)
  const router = useRouter()
  
  // Initialize Supabase client only on the client side
  useEffect(() => {
    try {
      const client = createSupabaseClient()
      setSupabase(client)
    } catch (error) {
      console.warn('Failed to create Supabase client:', error)
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    if (!supabase) {
      return
    }

    let isMounted = true

    // Get initial session
    supabase.auth.getSession().then(({ data: { session } }) => {
      if (isMounted) {
        setUser(session?.user ?? null)
        setLoading(false)
      }
    })

    // Listen for auth changes
    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (_event, session) => {
      if (isMounted) {
        setUser(session?.user ?? null)
        
        // Only set loading to false after the user state has been updated
        if (_event === 'SIGNED_IN') {
          // Small delay to ensure state propagation
          setTimeout(() => {
            if (isMounted) {
              setLoading(false)
            }
          }, 100)
        } else {
          setLoading(false)
        }
        
        // If user logs out, redirect to login
        if (!session && _event === 'SIGNED_OUT') {
          router.push('/')
        }
      }
    })

    return () => {
      isMounted = false