supachat/src/Contexts/AuthContext.js

import { useEffect, useState, createContext, useContext } from 'react';
import { supabase } from '../supabaseClient';

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState();
  const [authLoading, setAuthLoading] = useState(true);

  useEffect(() => {
    const session = supabase.auth.session();
    setUser(session?.user ?? null);

    const { data: listener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        setUser(session?.user ?? null);
      }
    );
    setAuthLoading(false);

    return () => {
      listener?.unsubscribe();
    };
  }, []);

  const signUp = async (email, password) => {
    const { user, session, error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) return { error };

    return { user, session };
  };

  const signIn = async (email, password) => {
    const { user, session, error } = await supabase.auth.signIn({
      email,
      password,
    });

    if (error) return { error };

    return { user, session };
  };

  const signOut = async () => {
    const { error } = await supabase.auth.signOut();

    if (error) return error.message;
    return { status: 'success' };
  };

  const value = { signUp, signIn, signOut, user };

  return (
    <AuthContext.Provider value={value}>
      {!authLoading && children}
    </AuthContext.Provider>
  );
};

const useAuth = () => {
  const context = useContext(AuthContext);

  if (!context) throw new Error('useAuth must be used within AuthProvider');

  return context;
};

export { AuthProvider, useAuth };