- New AuthContext drives app state (loading/needs-setup/enrolling/ logged-out/logged-in) by checking GET /api/system/setup-status and GET /api/auth/me on load; JWT stored in localStorage - Enrollment page: step 1 creates the admin account via POST /api/setup, step 2 lets you connect integrations (or skip) before entering the app - Login page for returning sessions; TopBar's Sign Out now calls logout() instead of being a dead link - Verified end-to-end in a browser: fresh setup -> connect/skip -> dashboard, reload persists the session, sign out -> login -> back in Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
|
|
import { api, getToken, setToken } from './api'
|
|
|
|
type AuthStatus = 'loading' | 'needs-setup' | 'enrolling' | 'logged-out' | 'logged-in'
|
|
|
|
interface AuthUser {
|
|
id: number
|
|
username: string
|
|
display_name: string | null
|
|
email: string | null
|
|
avatar_data_url: string | null
|
|
}
|
|
|
|
interface AuthContextValue {
|
|
status: AuthStatus
|
|
user: AuthUser | null
|
|
login: (username: string, password: string) => Promise<void>
|
|
completeSetup: (username: string, password: string) => Promise<void>
|
|
finishEnrollment: () => Promise<void>
|
|
logout: () => void
|
|
}
|
|
|
|
const AuthContext = createContext<AuthContextValue | null>(null)
|
|
|
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
|
const [status, setStatus] = useState<AuthStatus>('loading')
|
|
const [user, setUser] = useState<AuthUser | null>(null)
|
|
|
|
async function refresh() {
|
|
if (getToken()) {
|
|
try {
|
|
const { user } = await api.me()
|
|
setUser(user)
|
|
setStatus('logged-in')
|
|
return
|
|
} catch {
|
|
setToken(null)
|
|
}
|
|
}
|
|
const { needsSetup } = await api.getSetupStatus()
|
|
setStatus(needsSetup ? 'needs-setup' : 'logged-out')
|
|
}
|
|
|
|
useEffect(() => {
|
|
refresh()
|
|
}, [])
|
|
|
|
async function login(username: string, password: string) {
|
|
const { token } = await api.login(username, password)
|
|
setToken(token)
|
|
await refresh()
|
|
}
|
|
|
|
async function completeSetup(username: string, password: string) {
|
|
const { token } = await api.setup(username, password)
|
|
setToken(token)
|
|
const { user } = await api.me()
|
|
setUser(user)
|
|
setStatus('enrolling')
|
|
}
|
|
|
|
async function finishEnrollment() {
|
|
await refresh()
|
|
}
|
|
|
|
function logout() {
|
|
setToken(null)
|
|
setUser(null)
|
|
setStatus('logged-out')
|
|
}
|
|
|
|
return (
|
|
<AuthContext.Provider value={{ status, user, login, completeSetup, finishEnrollment, logout }}>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useAuth() {
|
|
const ctx = useContext(AuthContext)
|
|
if (!ctx) throw new Error('useAuth must be used within AuthProvider')
|
|
return ctx
|
|
}
|