Add dd0c Console — modular React dashboard with drift module
- 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)
This commit is contained in:
86
products/console/src/shell/AuthProvider.tsx
Normal file
86
products/console/src/shell/AuthProvider.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user