enricobuehler
d356d1534f
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>
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
/// <reference types="vite/client" />
|
|
import {
|
|
createRootRouteWithContext,
|
|
HeadContent,
|
|
Outlet,
|
|
Scripts,
|
|
useRouterState,
|
|
} from '@tanstack/react-router'
|
|
import type { QueryClient } from '@tanstack/react-query'
|
|
import { AppShell } from '@/components/app-shell'
|
|
import appCss from '@/styles.css?url'
|
|
|
|
export interface RouterContext {
|
|
queryClient: QueryClient
|
|
}
|
|
|
|
export const Route = createRootRouteWithContext<RouterContext>()({
|
|
head: () => ({
|
|
meta: [
|
|
{ charSet: 'utf-8' },
|
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
|
{ name: 'color-scheme', content: 'dark light' },
|
|
{ title: 'punktfunk' },
|
|
],
|
|
links: [{ rel: 'stylesheet', href: appCss }],
|
|
}),
|
|
component: RootComponent,
|
|
})
|
|
|
|
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">
|
|
{isLogin ? (
|
|
<Outlet />
|
|
) : (
|
|
<AppShell>
|
|
<Outlet />
|
|
</AppShell>
|
|
)}
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|