feat: argon2id passwords, session cookies, bot bearer tokens

Adds the full auth flow. Reads stay public; writes (currently only POST
/api/v1/mangas) require a CurrentUser. Both browsers and bot scripts hit
the same endpoints — they just present credentials differently.

Migration 0002_auth.sql introduces users.password_hash, a sessions
table, and an api_tokens table. Sessions and api_tokens store only
sha256(raw_token) — the raw value lives in the cookie or the
Authorization header.

New endpoints under /api/v1/auth/:
- POST /register — argon2id hash, creates a session, sets cookie.
- POST /login — verifies, rotates to a fresh session (old ones expire
  naturally so other devices stay signed in).
- POST /logout — deletes the server-side session row + clears the
  cookie via Max-Age=0.
- GET  /me — current user via the new CurrentUser extractor.
- POST /tokens — issue a bot bearer token; raw value returned exactly
  once at creation.
- DELETE /tokens/{id} — owner-only: 404 if unknown, 403 if it exists
  but belongs to another user, 204 on success.

The CurrentUser axum extractor resolves cookie first, then
Authorization: Bearer; failure → AppError::Unauthenticated (401). New
AppError variants Unauthenticated/Forbidden/Conflict carry the matching
envelope codes; the top-level match in `code()` stays exhaustive.

Backend integration coverage in tests/api_auth.rs: register sets a
HttpOnly SameSite=Lax cookie and never leaks password_hash; duplicate
username → 409; weak password → 400; login rotates the cookie; wrong
password / unknown user → 401; /me with vs without cookie; logout
invalidates the cookie; bot-token roundtrip via Bearer; user A cannot
delete user B's token (403); unknown delete → 404.

Frontend:
- lib/api/auth.ts — typed wrappers; me() returns null on 401.
- lib/session.svelte.ts — per-tab user state with a seq counter to
  guard against an in-flight /me clobbering a fresh setUser.
- lib/api/client.ts — request<T> returns undefined for 204.
- routes/login + routes/register — forms with action="javascript:void(0)"
  so the no-JS path is a no-op (avoids the hydration-race where a
  pre-attach click would submit via the browser default).
- routes/+layout.svelte — session-aware nav: spinner → user + Logout,
  or Login / Register.
- e2e/auth-flow.spec.ts — login flips the layout, logout flips back;
  bad credentials surface the API error message.

Config grows AuthConfig (cookie_secure, cookie_domain, session_ttl_days)
and CORS_ALLOWED_ORIGINS. CORS middleware is mounted in app::build and
stays a no-op (same-origin) until origins are listed.

Lockstep version bump to 0.3.0.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/e2e/auth-flow.spec.ts

@@ -0,0 +1,102 @@
+import { test, expect, type Page } from '@playwright/test';
+
+// Mocks the auth endpoints at the network level so the journey is
+// deterministic and doesn't require a live backend.
+
+const userFixture = {
+    id: 'user-1',
+    username: 'alice',
+    created_at: '2026-01-01T00:00:00Z'
+};
+const emptyPage = { items: [], page: { limit: 50, offset: 0, total: null } };
+
+async function stubAnonymousThenAuthenticated(page: Page) {
+    let loggedIn = false;
+    await page.route('**/api/v1/auth/me', async (route) => {
+        if (loggedIn) {
+            await route.fulfill({
+                status: 200,
+                contentType: 'application/json',
+                body: JSON.stringify({ user: userFixture })
+            });
+        } else {
+            await route.fulfill({
+                status: 401,
+                contentType: 'application/json',
+                body: JSON.stringify({
+                    error: { code: 'unauthenticated', message: 'unauthenticated' }
+                })
+            });
+        }
+    });
+    await page.route('**/api/v1/auth/login', async (route) => {
+        loggedIn = true;
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ user: userFixture })
+        });
+    });
+    await page.route('**/api/v1/auth/logout', async (route) => {
+        loggedIn = false;
+        await route.fulfill({ status: 204 });
+    });
+    await page.route('**/api/v1/mangas*', async (route) => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(emptyPage)
+        });
+    });
+}
+
+test('login then logout flips the layout between authenticated and anonymous', async ({
+    page
+}) => {
+    await stubAnonymousThenAuthenticated(page);
+
+    await page.goto('/');
+    // Initially anonymous → Login / Register links visible.
+    await expect(page.getByTestId('nav-login')).toBeVisible();
+
+    // Log in.
+    await page.goto('/login');
+    await page.getByTestId('login-username').fill('alice');
+    await page.getByTestId('login-password').fill('hunter2hunter2');
+    await page.getByTestId('login-submit').click();
+
+    // Authenticated → username + Logout button.
+    await expect(page.getByTestId('session-user')).toContainText('alice');
+    await expect(page.getByRole('button', { name: 'Logout' })).toBeVisible();
+
+    // Log out.
+    await page.getByRole('button', { name: 'Logout' }).click();
+    await expect(page).toHaveURL(/\/login$/);
+    await expect(page.getByTestId('nav-login')).toBeVisible();
+});
+
+test('login surfaces the API error message on bad credentials', async ({ page }) => {
+    await page.route('**/api/v1/auth/me', async (route) => {
+        await route.fulfill({
+            status: 401,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } })
+        });
+    });
+    await page.route('**/api/v1/auth/login', async (route) => {
+        await route.fulfill({
+            status: 401,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                error: { code: 'unauthenticated', message: 'unauthenticated' }
+            })
+        });
+    });
+
+    await page.goto('/login');
+    await page.getByTestId('login-username').fill('alice');
+    await page.getByTestId('login-password').fill('wrongpassword');
+    await page.getByTestId('login-submit').click();
+
+    await expect(page.getByTestId('login-error')).toBeVisible();
+});

frontend/e2e/manga-list.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page } from '@playwright/test';
 
 // These E2E tests run against the SvelteKit dev server, which proxies /api
 // to the backend. Playwright starts vite via `webServer` (see
@@ -9,7 +9,18 @@ import { test, expect } from '@playwright/test';
 
 const emptyPage = { items: [], page: { limit: 50, offset: 0, total: null } };
 
+async function mockAnonymous(page: Page) {
+    await page.route('**/api/v1/auth/me', async (route) => {
+        await route.fulfill({
+            status: 401,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: { code: 'unauthenticated', message: 'unauthenticated' } })
+        });
+    });
+}
+
 test('home page renders the Mangalord heading and search input', async ({ page }) => {
+    await mockAnonymous(page);
     await page.route('**/api/v1/mangas*', async (route) => {
         await route.fulfill({
             status: 200,
@@ -25,6 +36,7 @@ test('home page renders the Mangalord heading and search input', async ({ page }
 });
 
 test('search updates the manga list', async ({ page }) => {
+    await mockAnonymous(page);
     let lastSearch: string | null = null;
     await page.route('**/api/v1/mangas*', async (route) => {
         const url = new URL(route.request().url());

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/lib/api/auth.test.ts

@@ -0,0 +1,142 @@
+import {
+    describe,
+    it,
+    expect,
+    vi,
+    beforeEach,
+    afterEach,
+    type MockInstance
+} from 'vitest';
+import {
+    register,
+    login,
+    logout,
+    me,
+    createToken,
+    deleteToken
+} from './auth';
+
+function ok(body: unknown, status = 200): Response {
+    return new Response(JSON.stringify(body), {
+        status,
+        headers: { 'content-type': 'application/json' }
+    });
+}
+
+function noContent(): Response {
+    return new Response(null, { status: 204 });
+}
+
+function envelope(status: number, code: string, message: string): Response {
+    return new Response(JSON.stringify({ error: { code, message } }), {
+        status,
+        headers: { 'content-type': 'application/json' }
+    });
+}
+
+const userFixture = {
+    id: 'user-1',
+    username: 'alice',
+    created_at: '2026-01-01T00:00:00Z'
+};
+
+describe('auth api client', () => {
+    let fetchSpy: MockInstance<typeof globalThis.fetch>;
+
+    beforeEach(() => {
+        fetchSpy = vi.spyOn(globalThis, 'fetch');
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it('register POSTs JSON to /v1/auth/register and returns the user', async () => {
+        fetchSpy.mockResolvedValueOnce(ok({ user: userFixture }, 201));
+        const user = await register({ username: 'alice', password: 'hunter2hunter2' });
+        expect(user).toEqual(userFixture);
+        const url = fetchSpy.mock.calls[0][0] as string;
+        expect(url).toMatch(/\/v1\/auth\/register$/);
+        const init = fetchSpy.mock.calls[0][1] as RequestInit;
+        expect(init.method).toBe('POST');
+        expect(JSON.parse(init.body as string)).toEqual({
+            username: 'alice',
+            password: 'hunter2hunter2'
+        });
+    });
+
+    it('register surfaces 409 conflict via ApiError.code', async () => {
+        fetchSpy.mockResolvedValueOnce(envelope(409, 'conflict', 'username is already taken'));
+        await expect(
+            register({ username: 'alice', password: 'hunter2hunter2' })
+        ).rejects.toMatchObject({ status: 409, code: 'conflict' });
+    });
+
+    it('login POSTs JSON to /v1/auth/login and returns the user', async () => {
+        fetchSpy.mockResolvedValueOnce(ok({ user: userFixture }));
+        const user = await login({ username: 'alice', password: 'hunter2hunter2' });
+        expect(user).toEqual(userFixture);
+        const url = fetchSpy.mock.calls[0][0] as string;
+        expect(url).toMatch(/\/v1\/auth\/login$/);
+    });
+
+    it('login surfaces 401 unauthenticated via ApiError.code', async () => {
+        fetchSpy.mockResolvedValueOnce(envelope(401, 'unauthenticated', 'unauthenticated'));
+        await expect(
+            login({ username: 'alice', password: 'wrong' })
+        ).rejects.toMatchObject({ status: 401, code: 'unauthenticated' });
+    });
+
+    it('logout POSTs to /v1/auth/logout and handles 204', async () => {
+        fetchSpy.mockResolvedValueOnce(noContent());
+        await expect(logout()).resolves.toBeUndefined();
+        const url = fetchSpy.mock.calls[0][0] as string;
+        expect(url).toMatch(/\/v1\/auth\/logout$/);
+        const init = fetchSpy.mock.calls[0][1] as RequestInit;
+        expect(init.method).toBe('POST');
+    });
+
+    it('me returns the user on 200', async () => {
+        fetchSpy.mockResolvedValueOnce(ok({ user: userFixture }));
+        await expect(me()).resolves.toEqual(userFixture);
+    });
+
+    it('me returns null on 401 (anonymous user)', async () => {
+        fetchSpy.mockResolvedValueOnce(envelope(401, 'unauthenticated', 'unauthenticated'));
+        await expect(me()).resolves.toBeNull();
+    });
+
+    it('me re-throws non-401 errors', async () => {
+        fetchSpy.mockResolvedValueOnce(envelope(500, 'internal_error', 'internal error'));
+        await expect(me()).rejects.toMatchObject({ status: 500 });
+    });
+
+    it('createToken POSTs to /v1/auth/tokens and returns CreatedToken with bearer', async () => {
+        fetchSpy.mockResolvedValueOnce(
+            ok(
+                {
+                    id: 't1',
+                    user_id: 'user-1',
+                    name: 'ci-bot',
+                    created_at: '2026-01-01T00:00:00Z',
+                    last_used_at: null,
+                    bearer: 'raw-token-abc'
+                },
+                201
+            )
+        );
+        const t = await createToken('ci-bot');
+        expect(t.name).toBe('ci-bot');
+        expect(t.bearer).toBe('raw-token-abc');
+        const url = fetchSpy.mock.calls[0][0] as string;
+        expect(url).toMatch(/\/v1\/auth\/tokens$/);
+    });
+
+    it('deleteToken DELETEs to /v1/auth/tokens/{id} and handles 204', async () => {
+        fetchSpy.mockResolvedValueOnce(noContent());
+        await expect(deleteToken('t1')).resolves.toBeUndefined();
+        const url = fetchSpy.mock.calls[0][0] as string;
+        expect(url).toMatch(/\/v1\/auth\/tokens\/t1$/);
+        const init = fetchSpy.mock.calls[0][1] as RequestInit;
+        expect(init.method).toBe('DELETE');
+    });
+});

frontend/src/lib/api/auth.ts

@@ -0,0 +1,72 @@
+import { ApiError, request } from './client';
+
+export type User = {
+    id: string;
+    username: string;
+    created_at: string;
+};
+
+export type Credentials = {
+    username: string;
+    password: string;
+};
+
+type AuthResponse = { user: User };
+
+export async function register(creds: Credentials): Promise<User> {
+    const r = await request<AuthResponse>('/v1/auth/register', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(creds)
+    });
+    return r.user;
+}
+
+export async function login(creds: Credentials): Promise<User> {
+    const r = await request<AuthResponse>('/v1/auth/login', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(creds)
+    });
+    return r.user;
+}
+
+export async function logout(): Promise<void> {
+    await request<void>('/v1/auth/logout', { method: 'POST' });
+}
+
+/**
+ * Returns the current user, or `null` if no valid session.
+ * Re-throws any non-401 error.
+ */
+export async function me(): Promise<User | null> {
+    try {
+        const r = await request<AuthResponse>('/v1/auth/me');
+        return r.user;
+    } catch (e) {
+        if (e instanceof ApiError && e.status === 401) return null;
+        throw e;
+    }
+}
+
+export type ApiToken = {
+    id: string;
+    user_id: string;
+    name: string;
+    created_at: string;
+    last_used_at: string | null;
+};
+
+export type CreatedToken = ApiToken & { bearer: string };
+
+export async function createToken(name: string): Promise<CreatedToken> {
+    return request<CreatedToken>('/v1/auth/tokens', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name })
+    });
+}
+
+export async function deleteToken(id: string): Promise<void> {
+    await request<void>(`/v1/auth/tokens/${encodeURIComponent(id)}`, { method: 'DELETE' });
+}

frontend/src/lib/api/client.ts

@@ -42,6 +42,9 @@ export async function request<T>(path: string, init?: RequestInit): Promise<T> {
         }
         throw new ApiError(res.status, code, message);
     }
+    if (res.status === 204) {
+        return undefined as T;
+    }
     return (await res.json()) as T;
 }
 

frontend/src/lib/session.svelte.ts

@@ -0,0 +1,33 @@
+// Per-tab session state for the currently logged-in user.
+//
+// Only mutated client-side (onMount / form submits) so the module-level
+// instance can't leak across SSR requests — SSR always renders the
+// `loaded === false` state, and the client refreshes after hydration.
+
+import { me, type User } from './api/auth';
+
+class SessionStore {
+    user = $state<User | null>(null);
+    loaded = $state(false);
+    // Bumped on every explicit setUser so an in-flight refresh started before
+    // a login/logout can't clobber the fresh state when it resolves.
+    private seq = 0;
+
+    async refresh(): Promise<void> {
+        const seq = this.seq;
+        try {
+            const u = await me();
+            if (seq === this.seq) this.user = u;
+        } finally {
+            this.loaded = true;
+        }
+    }
+
+    setUser(user: User | null): void {
+        this.seq++;
+        this.user = user;
+        this.loaded = true;
+    }
+}
+
+export const session = new SessionStore();

frontend/src/routes/+layout.svelte

@@ -1,13 +1,47 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+    import { logout } from '$lib/api/auth';
+    import { session } from '$lib/session.svelte';
+
     let { children } = $props();
+    let loggingOut = $state(false);
+
+    onMount(() => {
+        if (!session.loaded) session.refresh();
+    });
+
+    async function handleLogout() {
+        loggingOut = true;
+        try {
+            await logout();
+        } finally {
+            session.setUser(null);
+            loggingOut = false;
+            goto('/login');
+        }
+    }
 </script>
 
 <header>
-    <nav>
+    <nav aria-label="primary">
         <a href="/">Mangalord</a>
         <a href="/upload">Upload</a>
         <a href="/bookmarks">Bookmarks</a>
     </nav>
+    <div class="session" data-testid="session-area">
+        {#if !session.loaded}
+            <span data-testid="session-loading" aria-busy="true">…</span>
+        {:else if session.user}
+            <span data-testid="session-user">{session.user.username}</span>
+            <button type="button" onclick={handleLogout} disabled={loggingOut}>
+                {loggingOut ? 'Logging out…' : 'Logout'}
+            </button>
+        {:else}
+            <a href="/login" data-testid="nav-login">Login</a>
+            <a href="/register" data-testid="nav-register">Register</a>
+        {/if}
+    </div>
 </header>
 
 <main>
@@ -18,10 +52,20 @@
     header {
         padding: 1rem;
         border-bottom: 1px solid #ddd;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
     }
-    nav a {
+    nav a,
+    .session a {
         margin-right: 1rem;
     }
+    .session {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
     main {
         padding: 1rem;
         max-width: 64rem;

frontend/src/routes/+page.svelte

@@ -29,6 +29,7 @@
         e.preventDefault();
         load();
     }}
+    action="javascript:void(0)"
 >
     <input
         type="search"

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { login } from '$lib/api/auth';
+    import { session } from '$lib/session.svelte';
+
+    let username = $state('');
+    let password = $state('');
+    let error: string | null = $state(null);
+    let submitting = $state(false);
+
+    async function submit(e: SubmitEvent) {
+        e.preventDefault();
+        error = null;
+        submitting = true;
+        try {
+            const user = await login({ username, password });
+            session.setUser(user);
+            await goto('/');
+        } catch (e) {
+            error = (e as Error).message;
+        } finally {
+            submitting = false;
+        }
+    }
+</script>
+
+<h1>Log in</h1>
+<form onsubmit={submit} action="javascript:void(0)" data-testid="login-form">
+    <label>
+        Username
+        <input
+            type="text"
+            bind:value={username}
+            autocomplete="username"
+            required
+            data-testid="login-username"
+        />
+    </label>
+    <label>
+        Password
+        <input
+            type="password"
+            bind:value={password}
+            autocomplete="current-password"
+            required
+            data-testid="login-password"
+        />
+    </label>
+    <button type="submit" disabled={submitting} data-testid="login-submit">
+        {submitting ? 'Logging in…' : 'Log in'}
+    </button>
+    {#if error}
+        <p role="alert" data-testid="login-error">{error}</p>
+    {/if}
+</form>
+<p>
+    No account? <a href="/register">Register</a>.
+</p>
+
+<style>
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        max-width: 24rem;
+    }
+    label {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+</style>

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { register } from '$lib/api/auth';
+    import { session } from '$lib/session.svelte';
+
+    let username = $state('');
+    let password = $state('');
+    let error: string | null = $state(null);
+    let submitting = $state(false);
+
+    async function submit(e: SubmitEvent) {
+        e.preventDefault();
+        error = null;
+        submitting = true;
+        try {
+            const user = await register({ username, password });
+            session.setUser(user);
+            await goto('/');
+        } catch (e) {
+            error = (e as Error).message;
+        } finally {
+            submitting = false;
+        }
+    }
+</script>
+
+<h1>Register</h1>
+<form onsubmit={submit} action="javascript:void(0)" data-testid="register-form">
+    <label>
+        Username
+        <input
+            type="text"
+            bind:value={username}
+            autocomplete="username"
+            minlength="3"
+            maxlength="32"
+            required
+            data-testid="register-username"
+        />
+    </label>
+    <label>
+        Password
+        <input
+            type="password"
+            bind:value={password}
+            autocomplete="new-password"
+            minlength="8"
+            required
+            data-testid="register-password"
+        />
+    </label>
+    <button type="submit" disabled={submitting} data-testid="register-submit">
+        {submitting ? 'Registering…' : 'Register'}
+    </button>
+    {#if error}
+        <p role="alert" data-testid="register-error">{error}</p>
+    {/if}
+</form>
+<p>
+    Already have an account? <a href="/login">Log in</a>.
+</p>
+
+<style>
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        max-width: 24rem;
+    }
+    label {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+</style>