feat: implement authentication flow

Backend:
- AppConfig, AppError, AppState modules for shared infrastructure
- JWT creation/verification with HS256 (jsonwebtoken crate)
- Session management: SHA-256 token hashing, DB-backed sessions
- Auth middleware: AuthUser, RequireHost, RequireAdmin extractors
- POST /api/v1/join: name-only registration, 4-digit PIN + bcrypt hash
- POST /api/v1/recover: PIN-based recovery with 3-attempt lockout (15 min)
- POST /api/v1/admin/login: bcrypt password verification
- DELETE /api/v1/session: logout (session invalidation)
- Migration 006: user PIN lockout columns (failed_pin_attempts, pin_locked_until)
- Models: Event, User (with role enum), Session with all CRUD methods

Frontend:
- api.ts: typed fetch wrapper with automatic Bearer token injection
- auth.ts: JWT/PIN localStorage management with Svelte store
- /join: name entry form with PIN display modal and copy button
- /recover: name + PIN recovery form with saved PIN pre-fill
- /feed: placeholder gallery page with logout
- Root layout: auth initialization on mount
- Root page: redirect to /join or /feed based on auth state

All responses use German language strings as specified.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/lib/api.ts

@@ -0,0 +1,57 @@
+import { getToken, clearAuth } from './auth';
+
+const BASE = '/api/v1';
+
+export class ApiError extends Error {
+	status: number;
+	code: string;
+
+	constructor(status: number, code: string, message: string) {
+		super(message);
+		this.status = status;
+		this.code = code;
+	}
+}
+
+async function request<T>(
+	method: string,
+	path: string,
+	body?: unknown
+): Promise<T> {
+	const headers: Record<string, string> = {};
+	const token = getToken();
+	if (token) {
+		headers['Authorization'] = `Bearer ${token}`;
+	}
+	if (body !== undefined) {
+		headers['Content-Type'] = 'application/json';
+	}
+
+	const res = await fetch(`${BASE}${path}`, {
+		method,
+		headers,
+		body: body !== undefined ? JSON.stringify(body) : undefined
+	});
+
+	if (res.status === 204) {
+		return undefined as T;
+	}
+
+	const data = await res.json();
+
+	if (!res.ok) {
+		if (res.status === 401) {
+			clearAuth();
+		}
+		throw new ApiError(res.status, data.error ?? 'unknown', data.message ?? 'Fehler');
+	}
+
+	return data as T;
+}
+
+export const api = {
+	get: <T>(path: string) => request<T>('GET', path),
+	post: <T>(path: string, body?: unknown) => request<T>('POST', path, body),
+	patch: <T>(path: string, body?: unknown) => request<T>('PATCH', path, body),
+	delete: <T>(path: string) => request<T>('DELETE', path)
+};

frontend/src/lib/auth.ts

@@ -0,0 +1,44 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const TOKEN_KEY = 'eventsnap_jwt';
+const PIN_KEY = 'eventsnap_pin';
+const USER_ID_KEY = 'eventsnap_user_id';
+
+export const isAuthenticated = writable(false);
+
+export function getToken(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(TOKEN_KEY);
+}
+
+export function getPin(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(PIN_KEY);
+}
+
+export function getUserId(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(USER_ID_KEY);
+}
+
+export function setAuth(jwt: string, pin: string | null, userId: string): void {
+	if (!browser) return;
+	localStorage.setItem(TOKEN_KEY, jwt);
+	if (pin) localStorage.setItem(PIN_KEY, pin);
+	localStorage.setItem(USER_ID_KEY, userId);
+	isAuthenticated.set(true);
+}
+
+export function clearAuth(): void {
+	if (!browser) return;
+	localStorage.removeItem(TOKEN_KEY);
+	localStorage.removeItem(USER_ID_KEY);
+	// PIN is intentionally kept so the user can recover
+	isAuthenticated.set(false);
+}
+
+export function initAuth(): void {
+	if (!browser) return;
+	isAuthenticated.set(!!getToken());
+}

frontend/src/routes/+layout.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
 	import '../app.css';
+	import { initAuth } from '$lib/auth';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
+
+	onMount(() => {
+		initAuth();
+	});
 </script>
 
 <svelte:head>

frontend/src/routes/+page.svelte

@@ -1,2 +1,14 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken } from '$lib/auth';
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		if (getToken()) {
+			goto('/feed');
+		} else {
+			goto('/join');
+		}
+	});
+</script>

frontend/src/routes/feed/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, clearAuth } from '$lib/auth';
+	import { api } from '$lib/api';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		if (!getToken()) {
+			goto('/join');
+		}
+	});
+
+	async function handleLogout() {
+		try {
+			await api.delete('/session');
+		} catch {
+			// Ignore errors — clear local state regardless
+		}
+		clearAuth();
+		goto('/join');
+	}
+</script>
+
+<div class="min-h-screen bg-gray-50 p-4">
+	<div class="mx-auto max-w-2xl">
+		<div class="mb-6 flex items-center justify-between">
+			<h1 class="text-xl font-bold text-gray-900">Galerie</h1>
+			<button
+				onclick={handleLogout}
+				class="rounded-md bg-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-300"
+			>
+				Abmelden
+			</button>
+		</div>
+		<p class="text-gray-600">Die Galerie wird bald hier angezeigt.</p>
+	</div>
+</div>

frontend/src/routes/join/+page.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api, ApiError } from '$lib/api';
+	import { setAuth } from '$lib/auth';
+
+	let displayName = $state('');
+	let error = $state('');
+	let loading = $state(false);
+	let showPinModal = $state(false);
+	let pin = $state('');
+	let copied = $state(false);
+
+	async function handleJoin() {
+		if (!displayName.trim()) return;
+		loading = true;
+		error = '';
+		try {
+			const res = await api.post<{
+				jwt: string;
+				pin: string;
+				user_id: string;
+				is_new: boolean;
+			}>('/join', { display_name: displayName.trim() });
+
+			setAuth(res.jwt, res.pin, res.user_id);
+			pin = res.pin;
+			showPinModal = true;
+		} catch (e) {
+			if (e instanceof ApiError) {
+				error = e.message;
+			} else {
+				error = 'Ein Fehler ist aufgetreten.';
+			}
+		} finally {
+			loading = false;
+		}
+	}
+
+	function copyPin() {
+		navigator.clipboard.writeText(pin);
+		copied = true;
+		setTimeout(() => (copied = false), 2000);
+	}
+
+	function goToFeed() {
+		goto('/feed');
+	}
+</script>
+
+<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+	<div class="w-full max-w-sm">
+		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Willkommen!</h1>
+		<p class="mb-6 text-center text-gray-600">Gib deinen Namen ein, um dem Event beizutreten.</p>
+
+		<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
+			<input
+				type="text"
+				bind:value={displayName}
+				placeholder="Dein Name"
+				maxlength={50}
+				class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+			/>
+
+			{#if error}
+				<p class="mb-3 text-sm text-red-600">{error}</p>
+			{/if}
+
+			<button
+				type="submit"
+				disabled={loading || !displayName.trim()}
+				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+			>
+				{loading ? 'Wird geladen...' : 'Beitreten'}
+			</button>
+		</form>
+
+		<p class="mt-4 text-center text-sm text-gray-500">
+			Schon dabei?
+			<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
+		</p>
+	</div>
+</div>
+
+{#if showPinModal}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+		<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
+			<h2 class="mb-2 text-xl font-bold text-gray-900">Dein Wiederherstellungs-PIN</h2>
+			<p class="mb-4 text-sm text-gray-600">
+				Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
+			</p>
+
+			<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4">
+				<span class="text-4xl font-mono font-bold tracking-widest text-gray-900">{pin}</span>
+				<button
+					onclick={copyPin}
+					class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300"
+				>
+					{copied ? 'Kopiert!' : 'Kopieren'}
+				</button>
+			</div>
+
+			<button
+				onclick={goToFeed}
+				class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700"
+			>
+				Weiter zur Galerie
+			</button>
+		</div>
+	</div>
+{/if}

frontend/src/routes/recover/+page.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api, ApiError } from '$lib/api';
+	import { setAuth, getPin } from '$lib/auth';
+	import { browser } from '$app/environment';
+
+	let displayName = $state('');
+	let pin = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	// Pre-fill PIN from localStorage if available
+	if (browser) {
+		const savedPin = getPin();
+		if (savedPin) pin = savedPin;
+	}
+
+	async function handleRecover() {
+		if (!displayName.trim() || !pin.trim()) return;
+		loading = true;
+		error = '';
+		try {
+			const res = await api.post<{
+				jwt: string;
+				user_id: string;
+			}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });
+
+			setAuth(res.jwt, pin.trim(), res.user_id);
+			goto('/feed');
+		} catch (e) {
+			if (e instanceof ApiError) {
+				error = e.message;
+			} else {
+				error = 'Ein Fehler ist aufgetreten.';
+			}
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+	<div class="w-full max-w-sm">
+		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Konto wiederherstellen</h1>
+		<p class="mb-6 text-center text-gray-600">Gib deinen Namen und deinen PIN ein.</p>
+
+		<form onsubmit={(e) => { e.preventDefault(); handleRecover(); }}>
+			<input
+				type="text"
+				bind:value={displayName}
+				placeholder="Dein Name"
+				maxlength={50}
+				class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+			/>
+			<input
+				type="text"
+				bind:value={pin}
+				placeholder="4-stelliger PIN"
+				maxlength={4}
+				inputmode="numeric"
+				pattern="[0-9]*"
+				class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+			/>
+
+			{#if error}
+				<p class="mb-3 text-sm text-red-600">{error}</p>
+			{/if}
+
+			<button
+				type="submit"
+				disabled={loading || !displayName.trim() || pin.length < 4}
+				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+			>
+				{loading ? 'Wird geladen...' : 'Wiederherstellen'}
+			</button>
+		</form>
+
+		<p class="mt-4 text-center text-sm text-gray-500">
+			Noch kein Konto?
+			<a href="/join" class="text-blue-600 hover:underline">Neu beitreten</a>
+		</p>
+	</div>
+</div>