CampgroundTickets/app/lib/auth.tsx

import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
import {
  login as apiLogin,
  logout as apiLogout,
  getToken,
  getOperator,
  setOperator as apiSetOperator,
  onAuthCleared,
} from "./api";

interface AuthState {
  ready: boolean; // finished the initial load
  signedIn: boolean; // has a valid PIN token
  operator: string; // gate staff name (empty until set)
  signIn: (pin: string) => Promise<void>;
  setOperator: (name: string) => Promise<void>;
  signOut: () => Promise<void>;
}

const Ctx = createContext<AuthState | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [ready, setReady] = useState(false);
  const [signedIn, setSignedIn] = useState(false);
  const [operator, setOperatorState] = useState("");

  useEffect(() => {
    Promise.all([getToken(), getOperator()]).then(([t, op]) => {
      setSignedIn(!!t);
      setOperatorState(op ?? "");
      setReady(true);
    });
    // Keep state in sync when the token is cleared elsewhere (401 handling).
    onAuthCleared(() => {
      setSignedIn(false);
      setOperatorState("");
    });
    return () => onAuthCleared(null);
  }, []);

  const signIn = async (pin: string) => {
    await apiLogin(pin);
    setSignedIn(true);
  };
  const setOperator = async (name: string) => {
    await apiSetOperator(name);
    setOperatorState(name);
  };
  const signOut = async () => {
    await apiLogout();
    setSignedIn(false);
    setOperatorState("");
  };

  return (
    <Ctx.Provider value={{ ready, signedIn, operator, signIn, setOperator, signOut }}>{children}</Ctx.Provider>
  );
}

export function useAuth(): AuthState {
  const c = useContext(Ctx);
  if (!c) throw new Error("useAuth must be used within AuthProvider");
  return c;
}