frontend: add login page and auth guard

Add authentication flow to the frontend:
- authStore with token management (localStorage persistence)
- Login page with username/password form at /login
- Layout-level auth guard that redirects to /login when no valid
  session exists, validates token on load via GET /api/auth/me
- Top navigation bar showing username and admin link when applicable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-16 02:37:25 +00:00
parent b8c705554f
commit af9359bbdf
3 changed files with 288 additions and 26 deletions
@@ -0,0 +1,43 @@
import { goto } from '$app/navigation';
interface AuthState {
token: string | null;
}
function loadToken(): string | null {
if (typeof window === 'undefined') return null;
return localStorage.getItem('auth_token');
}
export const authStore: AuthState = $state({
token: loadToken()
});
export function getToken(): string | null {
return authStore.token;
}
export function setToken(token: string) {
authStore.token = token;
localStorage.setItem('auth_token', token);
}
export function clearToken() {
authStore.token = null;
localStorage.removeItem('auth_token');
}
export function isAuthenticated(): boolean {
return authStore.token !== null;
}
export function requireAuth() {
if (!isAuthenticated()) {
goto('/login');
}
}
export function handleUnauthorized() {
clearToken();
goto('/login');
}