Files
shadow-gunbuilder-ai-proto/context/AuthContext.tsx
T
2025-12-04 15:06:57 -05:00

195 lines
4.8 KiB
TypeScript

"use client";
import {
createContext,
useCallback,
useContext,
useEffect,
useState,
ReactNode,
} from "react";
const API_BASE_URL =
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
type AuthUser = {
email: string;
displayName?: string | null;
role: string;
} | null;
type AuthContextValue = {
user: AuthUser;
token: string | null;
loading: boolean;
login: (params: { email: string; password: string }) => Promise<void>;
register: (params: {
email: string;
password: string;
displayName?: string;
}) => Promise<void>;
logout: () => void;
getAuthHeaders: () => HeadersInit;
};
const AuthContext = createContext<AuthContextValue | undefined>(undefined);
const TOKEN_KEY = "ballistic_auth_token";
const USER_KEY = "ballistic_auth_user";
export function AuthProvider({ children }: { children: ReactNode }) {
const [token, setToken] = useState<string | null>(null);
const [user, setUser] = useState<AuthUser>(null);
const [loading, setLoading] = useState<boolean>(true);
// Hydrate from localStorage on first load
useEffect(() => {
if (typeof window === "undefined") return;
const storedToken = window.localStorage.getItem(TOKEN_KEY);
const storedUser = window.localStorage.getItem(USER_KEY);
if (storedToken) {
setToken(storedToken);
}
if (storedUser) {
try {
setUser(JSON.parse(storedUser));
} catch {
// bad JSON? wipe it
window.localStorage.removeItem(USER_KEY);
}
}
setLoading(false);
}, []);
const persistAuth = useCallback((nextToken: string | null, nextUser: AuthUser) => {
if (typeof window === "undefined") return;
if (nextToken) {
window.localStorage.setItem(TOKEN_KEY, nextToken);
} else {
window.localStorage.removeItem(TOKEN_KEY);
}
if (nextUser) {
window.localStorage.setItem(USER_KEY, JSON.stringify(nextUser));
} else {
window.localStorage.removeItem(USER_KEY);
}
}, []);
const login = useCallback(
async ({ email, password }: { email: string; password: string }) => {
setLoading(true);
try {
const res = await fetch(`${API_BASE_URL}/auth/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
});
if (!res.ok) {
const text = await res.text().catch(() => res.statusText);
throw new Error(text || "Login failed");
}
const data = await res.json();
// Adjust these to match your backend response shape
const nextToken: string = data.token ?? data.accessToken;
const nextUser: AuthUser =
data.user ??
({
email: data.email ?? email,
displayName: data.displayName ?? null,
role: data.role ?? "USER",
} as AuthUser);
setToken(nextToken);
setUser(nextUser);
persistAuth(nextToken, nextUser);
} finally {
setLoading(false);
}
},
[persistAuth]
);
const register = useCallback(
async ({
email,
password,
displayName,
}: {
email: string;
password: string;
displayName?: string;
}) => {
setLoading(true);
try {
const res = await fetch(`${API_BASE_URL}/auth/register`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password, displayName }),
});
if (!res.ok) {
const text = await res.text().catch(() => res.statusText);
throw new Error(text || "Registration failed");
}
const data = await res.json();
const nextToken: string = data.token ?? data.accessToken;
const nextUser: AuthUser =
data.user ??
({
email: data.email ?? email,
displayName: data.displayName ?? displayName ?? null,
role: data.role ?? "USER",
} as AuthUser);
setToken(nextToken);
setUser(nextUser);
persistAuth(nextToken, nextUser);
} finally {
setLoading(false);
}
},
[persistAuth]
);
const logout = useCallback(() => {
setToken(null);
setUser(null);
persistAuth(null, null);
}, [persistAuth]);
const getAuthHeaders = useCallback((): HeadersInit => {
return token ? { Authorization: `Bearer ${token}` } : {};
}, [token]);
const value: AuthContextValue = {
user,
token,
loading,
login,
register,
logout,
getAuthHeaders,
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
// 🔑 This is what your useApi hook imports
export function useAuth(): AuthContextValue {
const ctx = useContext(AuthContext);
if (!ctx) {
throw new Error("useAuth must be used within an AuthProvider");
}
return ctx;
}