feat(web): login-gated BFF auth — sealed session cookie + server-side token injection

Single-user, LAN-reachable-but-gated. The web server is a backend-for-frontend: - Login: POST /_auth/login {password} checks PUNKTFUNK_UI_PASSWORD (constant-time) and sets a SEALED session cookie (h3 useSession / AES-GCM). server/middleware/auth.ts gates every request — pages 302 → /login, /api → 401 — and FAILS CLOSED (503) when PUNKTFUNK_UI_PASSWORD is unset, so a misconfigured LAN-exposed server admits no one. - The management API stays loopback-only + token (never LAN-exposed). The proxy (server/routes/api/[...].ts) injects PUNKTFUNK_MGMT_TOKEN server-side and drops the browser's cookie before forwarding — the token never reaches the browser, which only holds the session cookie. Nitro doesn't auto-scan a server/ dir, so the Nitro plugin gets an explicit scanDirs to pick up middleware + routes. Client: removed the localStorage token (server injects it); the fetcher bounces to /login on 401; new /login page (bare, no shell); Settings drops the token field and gains a Sign-out button; en/de strings. Validated live end to end: unauth /→302, /api→401; wrong pw→401; right pw→200+cookie; authed /api/v1/status→200 (proxied, mgmt token injected — the host required it); logout→ session cleared→401. tsc + build green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-10 18:43:14 +00:00
parent f2aee39837
commit d356d1534f
16 changed files with 340 additions and 81 deletions
@@ -4,6 +4,7 @@ import {
  HeadContent,
  Outlet,
  Scripts,
+  useRouterState,
 } from '@tanstack/react-router'
 import type { QueryClient } from '@tanstack/react-query'
 import { AppShell } from '@/components/app-shell'
@@ -27,15 +28,21 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 })

 function RootComponent() {
+  // The login screen renders bare (no sidebar); everything else gets the app shell.
+  const isLogin = useRouterState({ select: (s) => s.location.pathname === '/login' })
  return (
    <html lang="en" className="dark">
      <head>
        <HeadContent />
      </head>
      <body className="min-h-screen">
-        <AppShell>
+        {isLogin ? (
          <Outlet />
-        </AppShell>
+        ) : (
+          <AppShell>
+            <Outlet />
+          </AppShell>
+        )}
        <Scripts />
      </body>
    </html>