- Vite + React + TypeScript + Tailwind CSS - Shell: auth provider, entitlement gate, dynamic sidebar - Shared components: Button, Card, Table, Badge, Modal, EmptyState, PageHeader - Drift module: dashboard, detail view, report viewer - Module manifest pattern for pluggable product UIs - Dockerfile: multi-stage node:22-slim → nginx:alpine - 189KB JS + 17KB CSS (65KB gzipped)
87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
|
|
import { apiFetch } from './api';
|
|
|
|
interface User {
|
|
tenantId: string;
|
|
userId: string;
|
|
email: string;
|
|
entitlements?: string[];
|
|
}
|
|
|
|
interface AuthContextType {
|
|
user: User | null;
|
|
token: string | null;
|
|
isLoading: boolean;
|
|
login: (email: string, password: string) => Promise<void>;
|
|
signup: (email: string, password: string) => Promise<void>;
|
|
logout: () => void;
|
|
}
|
|
|
|
const AuthContext = createContext<AuthContextType | null>(null);
|
|
|
|
function decodeJwtPayload(token: string): User {
|
|
const base64 = token.split('.')[1];
|
|
const json = atob(base64.replace(/-/g, '+').replace(/_/g, '/'));
|
|
return JSON.parse(json);
|
|
}
|
|
|
|
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [token, setToken] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const stored = localStorage.getItem('dd0c_token');
|
|
if (stored) {
|
|
try {
|
|
const payload = decodeJwtPayload(stored);
|
|
setUser(payload);
|
|
setToken(stored);
|
|
} catch {
|
|
localStorage.removeItem('dd0c_token');
|
|
}
|
|
}
|
|
setIsLoading(false);
|
|
}, []);
|
|
|
|
const login = useCallback(async (email: string, password: string) => {
|
|
const res = await apiFetch<{ token: string }>('/api/v1/auth/login', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ email, password }),
|
|
skipAuth: true,
|
|
});
|
|
localStorage.setItem('dd0c_token', res.token);
|
|
setToken(res.token);
|
|
setUser(decodeJwtPayload(res.token));
|
|
}, []);
|
|
|
|
const signup = useCallback(async (email: string, password: string) => {
|
|
const res = await apiFetch<{ token: string }>('/api/v1/auth/signup', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ email, password }),
|
|
skipAuth: true,
|
|
});
|
|
localStorage.setItem('dd0c_token', res.token);
|
|
setToken(res.token);
|
|
setUser(decodeJwtPayload(res.token));
|
|
}, []);
|
|
|
|
const logout = useCallback(() => {
|
|
localStorage.removeItem('dd0c_token');
|
|
setToken(null);
|
|
setUser(null);
|
|
}, []);
|
|
|
|
return (
|
|
<AuthContext.Provider value={{ user, token, isLoading, login, signup, logout }}>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useAuth(): AuthContextType {
|
|
const ctx = useContext(AuthContext);
|
|
if (!ctx) throw new Error('useAuth must be used within AuthProvider');
|
|
return ctx;
|
|
}
|