Auth in React

// src/auth.tsx
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
import type { Session, User } from "@pawabase/client";
import { pawabase } from "./pawabase";

type AuthState = { user: User | null; session: Session | null; loading: boolean };

const AuthContext = createContext<AuthState>({ user: null, session: null, loading: true });

export function AuthProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<AuthState>({ user: null, session: null, loading: true });

  useEffect(() => {
    const { unsubscribe } = pawabase.auth.onAuthStateChange((_event, session) => {
      setState({ user: session?.user ?? null, session, loading: false });
    });
    return unsubscribe;
  }, []);

  return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>;
}

export const useAuth = () => useContext(AuthContext);

import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "./auth";

export function RequireAuth({ children }: { children: JSX.Element }) {
  const { user, loading } = useAuth();
  const location = useLocation();
  if (loading) return null;
  return user ? children : <Navigate to="/sign-in" state={{ from: location }} replace />;
}

export function RequireRole({ role, children }: { role: string; children: JSX.Element }) {
  const { user } = useAuth();
  return user?.roles.includes(role) ? children : <p>You don't have access to this page.</p>;
}

async function signIn(email: string, password: string) {
  const result = await pawabase.auth.signInWithPassword({ email, password });
  if (result.status === "mfa_required") return { needsCode: true as const, verify: result.verify };
  return { needsCode: false as const };
}

const { user } = useAuth();
const navigate = useNavigate();
useEffect(() => { if (user) navigate(location.state?.from?.pathname ?? "/"); }, [user]);

function useAuthSettings() {
  const [settings, setSettings] = useState<Awaited<ReturnType<typeof pawabase.auth.settings>> | null>(null);
  useEffect(() => { pawabase.auth.settings().then(setSettings); }, []);
  return settings;
}

function Account() {
  const { user } = useAuth();
  const [name, setName] = useState(user?.name ?? "");

  return (
    <form onSubmit={async (e) => { e.preventDefault(); await pawabase.auth.updateUser({ name }); }}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button>Save</button>
      <button type="button" onClick={() => pawabase.auth.signOut()}>Sign out</button>
    </form>
  );
}