feat: clear session.user on 401 from any API call (0.35.0)

Adds a single on401 hook in api/client.ts that the session store
installs at module load. Before, the *OrEmpty wrappers caught 401 and
silently returned empty pages — a mid-session expiry left the UI
rendering as "logged in but no bookmarks/collections/etc." until the
user reloaded. With the hook, session.user flips to null on the first
401, so the layout re-renders the login affordance and the *OrEmpty
helpers keep working for genuine anonymous browsing.

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

.env.example

@@ -51,8 +51,3 @@ MAX_FILE_BYTES=20971520
 # internal docker network. Override only if you're running the
 # frontend container against a backend somewhere else.
 BACKEND_URL=http://backend:8080
-# Per-request wall-clock cap for the /api/* reverse proxy (milliseconds).
-# Default 300000 (5 min) covers a typical 200 MiB chapter upload over
-# 25 Mbps; raise for users on slower upstream links or lower if a
-# tighter front proxy already bounds the request lifetime.
-BACKEND_PROXY_TIMEOUT_MS=300000

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.34.0"
+version = "0.35.0"
 edition = "2021"
 default-run = "mangalord"
 

frontend/package.json

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

frontend/src/hooks.server.test.ts

@@ -118,77 +118,4 @@ describe('hooks.server proxy', () => {
         expect(body.error.code).toBe('upstream_unavailable');
         expect(errSpy).toHaveBeenCalled();
     });
-
-    it('strips every hop-by-hop header listed in RFC 7230 §6.1', async () => {
-        // Defence in depth: axum doesn't emit these, but a future
-        // middleware that did would otherwise leak per-connection
-        // state across the proxy boundary.
-        fetchSpy.mockResolvedValueOnce(new Response('[]', { status: 200 }));
-        const resolve = vi.fn();
-        await handle({
-            event: makeEvent('/api/v1/health', {
-                headers: {
-                    host: 'app.example.com',
-                    'content-length': '0',
-                    connection: 'keep-alive',
-                    'keep-alive': 'timeout=5',
-                    'proxy-authenticate': 'Basic realm=x',
-                    'proxy-authorization': 'Basic xyz',
-                    te: 'trailers',
-                    trailer: 'Expires',
-                    'transfer-encoding': 'chunked',
-                    upgrade: 'websocket',
-                    // A non-hop-by-hop header to ensure non-targets
-                    // aren't accidentally stripped.
-                    'x-custom': 'pass-through'
-                }
-            }),
-            resolve
-        });
-        const init = fetchSpy.mock.calls[0][1] as RequestInit;
-        const headers = init.headers as Headers;
-        for (const h of [
-            'host',
-            'content-length',
-            'connection',
-            'keep-alive',
-            'proxy-authenticate',
-            'proxy-authorization',
-            'te',
-            'trailer',
-            'transfer-encoding',
-            'upgrade'
-        ]) {
-            expect(headers.get(h), `${h} should be stripped`).toBeNull();
-        }
-        expect(headers.get('x-custom')).toBe('pass-through');
-    });
-
-    it('aborts and returns 502 when the upstream stalls past the timeout', async () => {
-        const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-        // Simulate an aborted fetch (AbortController.abort() raises a
-        // DOMException with name 'AbortError' on Node's fetch). The
-        // handler should treat it as the same upstream_unavailable
-        // 502 it uses for any other network failure.
-        const abortErr = new DOMException('aborted', 'AbortError');
-        fetchSpy.mockRejectedValueOnce(abortErr);
-
-        const resolve = vi.fn();
-        const resp = await handle({ event: makeEvent('/api/v1/slow'), resolve });
-        expect(resp.status).toBe(502);
-        const body = await resp.json();
-        expect(body.error.code).toBe('upstream_unavailable');
-        expect(errSpy).toHaveBeenCalled();
-    });
-
-    it('attaches an AbortSignal to the upstream fetch so it can time out', async () => {
-        fetchSpy.mockResolvedValueOnce(new Response('[]', { status: 200 }));
-        const resolve = vi.fn();
-        await handle({ event: makeEvent('/api/v1/health'), resolve });
-        const init = fetchSpy.mock.calls[0][1] as RequestInit;
-        expect(init.signal).toBeInstanceOf(AbortSignal);
-        // The signal hasn't fired (handler returned in time), but its
-        // presence is the contract this test is pinning.
-        expect(init.signal?.aborted).toBe(false);
-    });
 });

frontend/src/hooks.server.ts

@@ -12,66 +12,20 @@ import type { Handle } from '@sveltejs/kit';
 
 const BACKEND_URL = process.env.BACKEND_URL ?? 'http://localhost:8080';
 
-/**
- * Hop-by-hop headers per RFC 7230 §6.1. These are scoped to a single
- * transport-level connection and must not be forwarded by a proxy.
- * Plus `host` and `content-length`: `host` would mislead the backend
- * about its origin, and `content-length` is recomputed by the upstream
- * fetch from the body stream.
- */
-const HOP_BY_HOP_HEADERS = [
-    'host',
-    'content-length',
-    'connection',
-    'keep-alive',
-    'proxy-authenticate',
-    'proxy-authorization',
-    'te',
-    'trailer',
-    'transfer-encoding',
-    'upgrade'
-];
-
-/**
- * Cap each proxied request at 5 minutes. The bound exists to surface
- * a wedged backend (stuck on a slow DB query, deadlocked, etc.) as a
- * 502 rather than letting the browser request hang indefinitely.
- *
- * The default leans toward the slow-upload end of the spectrum: at a
- * 1 Mbps upstream, a 200 MiB chapter upload (the default
- * `MAX_REQUEST_BYTES` cap) needs ~27 minutes; 300 s covers the more
- * realistic 25 Mbps urban-broadband case (~64 s for the same upload)
- * with comfortable headroom. Operators serving very slow clients
- * should raise `BACKEND_PROXY_TIMEOUT_MS`; operators behind a
- * tighter upstream proxy may want to lower it. A future improvement
- * is an idle-based timeout (reset per chunk) instead of this
- * wall-clock budget — that's a fair bit more code, deferred.
- */
-const PROXY_TIMEOUT_MS = (() => {
-    const raw = process.env.BACKEND_PROXY_TIMEOUT_MS;
-    const n = raw ? Number(raw) : 300_000;
-    return Number.isFinite(n) && n > 0 ? n : 300_000;
-})();
-
 export const handle: Handle = async ({ event, resolve }) => {
     if (event.url.pathname.startsWith('/api/')) {
         const target = `${BACKEND_URL}${event.url.pathname}${event.url.search}`;
 
+        // Strip hop-by-hop headers — `host` would mislead the backend
+        // about the origin, and `content-length` will be recomputed.
         const headers = new Headers(event.request.headers);
-        for (const h of HOP_BY_HOP_HEADERS) headers.delete(h);
-
-        // AbortController times the upstream fetch out so a backend
-        // wedged on a slow DB query doesn't keep the browser request
-        // hanging forever. The `signal` is also wired into the
-        // RequestInit so the body stream is cancelled cleanly.
-        const ctrl = new AbortController();
-        const timeoutHandle = setTimeout(() => ctrl.abort(), PROXY_TIMEOUT_MS);
+        headers.delete('host');
+        headers.delete('content-length');
 
         const init: RequestInit & { duplex?: 'half' } = {
             method: event.request.method,
             headers,
-            redirect: 'manual',
-            signal: ctrl.signal
+            redirect: 'manual'
         };
         if (event.request.method !== 'GET' && event.request.method !== 'HEAD') {
             init.body = event.request.body;
@@ -85,13 +39,11 @@ export const handle: Handle = async ({ event, resolve }) => {
             upstream = await fetch(target, init);
         } catch (e) {
             // Network-layer failure (DNS / connection refused / TLS
-            // handshake / abort by timeout) — most commonly "backend
-            // container restarting". SvelteKit's default 500 would be
-            // an HTML page that client.ts can't .json(), which masks
-            // the real cause. Emit the standard envelope with a
-            // dedicated code instead.
+            // handshake) — most commonly "backend container restarting".
+            // SvelteKit's default 500 would be an HTML page that
+            // client.ts can't .json(), which masks the real cause. Emit
+            // the standard envelope with a dedicated code instead.
             console.error('Proxy to backend failed:', e);
-            clearTimeout(timeoutHandle);
             return new Response(
                 JSON.stringify({
                     error: {
@@ -106,7 +58,6 @@ export const handle: Handle = async ({ event, resolve }) => {
             );
         }
 
-        clearTimeout(timeoutHandle);
         return new Response(upstream.body, {
             status: upstream.status,
             statusText: upstream.statusText,

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach, type MockInstance } from 'vitest';
-import { ApiError, request } from './client';
+import { ApiError, request, setOn401Hook } from './client';
 import { getManga } from './mangas';
 
 describe('request error envelope parsing', () => {
@@ -73,3 +73,88 @@ describe('request error envelope parsing', () => {
         expect(err.code).toBe('http_error');
     });
 });
+
+describe('on401 hook', () => {
+    let fetchSpy: MockInstance<typeof globalThis.fetch>;
+
+    beforeEach(() => {
+        fetchSpy = vi.spyOn(globalThis, 'fetch');
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+        // Critical: reset the module-level hook between tests so a
+        // hook installed by one test doesn't leak into the next.
+        setOn401Hook(null);
+    });
+
+    it('invokes the hook exactly once on a 401 response and re-throws', async () => {
+        const hook = vi.fn();
+        setOn401Hook(hook);
+        fetchSpy.mockResolvedValueOnce(
+            new Response(
+                JSON.stringify({ error: { code: 'unauthenticated', message: 'no auth' } }),
+                { status: 401, headers: { 'content-type': 'application/json' } }
+            )
+        );
+        await expect(getManga('x')).rejects.toMatchObject({
+            status: 401,
+            code: 'unauthenticated'
+        });
+        expect(hook).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not invoke the hook on non-401 errors', async () => {
+        const hook = vi.fn();
+        setOn401Hook(hook);
+        fetchSpy.mockResolvedValueOnce(
+            new Response(
+                JSON.stringify({ error: { code: 'not_found', message: 'no' } }),
+                { status: 404, headers: { 'content-type': 'application/json' } }
+            )
+        );
+        await expect(getManga('x')).rejects.toMatchObject({ status: 404 });
+        expect(hook).not.toHaveBeenCalled();
+    });
+
+    it('does not invoke the hook on successful responses', async () => {
+        const hook = vi.fn();
+        setOn401Hook(hook);
+        fetchSpy.mockResolvedValueOnce(
+            new Response(
+                JSON.stringify({
+                    id: 'm1',
+                    title: 't',
+                    status: 'ongoing',
+                    alt_titles: [],
+                    description: null,
+                    cover_image_path: null,
+                    created_at: '2026-01-01T00:00:00Z',
+                    updated_at: '2026-01-01T00:00:00Z',
+                    authors: [],
+                    genres: [],
+                    tags: []
+                }),
+                { status: 200, headers: { 'content-type': 'application/json' } }
+            )
+        );
+        await getManga('m1');
+        expect(hook).not.toHaveBeenCalled();
+    });
+
+    it('swallows hook exceptions so the original ApiError still propagates', async () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+        setOn401Hook(() => {
+            throw new Error('hook boom');
+        });
+        fetchSpy.mockResolvedValueOnce(
+            new Response(
+                JSON.stringify({ error: { code: 'unauthenticated', message: 'x' } }),
+                { status: 401, headers: { 'content-type': 'application/json' } }
+            )
+        );
+        await expect(getManga('x')).rejects.toMatchObject({ status: 401 });
+        // The original ApiError won — the hook's panic was logged but
+        // didn't replace the API error.
+        expect(consoleSpy).toHaveBeenCalled();
+    });
+});

frontend/src/lib/api/client.ts

@@ -25,6 +25,21 @@ export class ApiError extends Error {
 
 type ErrorEnvelope = { error?: { code?: unknown; message?: unknown } };
 
+/**
+ * Optional hook fired the first moment `request()` observes a 401 on
+ * any endpoint. Used by the session store to clear the cached user
+ * when the server reports the session is no longer valid (expired
+ * cookie, rotated server-side, password changed on another device).
+ *
+ * Set to `null` (or `undefined`) to disable. Tests that don't want
+ * the side effect should leave it unset.
+ */
+let on401Hook: (() => void) | null = null;
+
+export function setOn401Hook(handler: (() => void) | null): void {
+    on401Hook = handler;
+}
+
 export async function request<T>(path: string, init?: RequestInit): Promise<T> {
     // Forward credentials (session cookie) explicitly so cross-origin
     // deployments — those configured via CORS_ALLOWED_ORIGINS — keep
@@ -54,6 +69,16 @@ export async function request<T>(path: string, init?: RequestInit): Promise<T> {
         } catch {
             // Body wasn't parseable; keep the http_error fallback.
         }
+        if (res.status === 401 && on401Hook) {
+            // Fire before throwing so the session store updates even
+            // if the caller swallows the ApiError (e.g. the *OrEmpty
+            // wrappers used by guest-rendering pages).
+            try {
+                on401Hook();
+            } catch (e) {
+                console.error('on401 hook threw:', e);
+            }
+        }
         throw new ApiError(res.status, code, message);
     }
     // Any empty body (not just 204) returns undefined — the manga-add

frontend/src/lib/session.svelte.ts

@@ -3,7 +3,17 @@
 // 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.
+//
+// IMPORTANT: do not call any `api/*` helper from `+page.server.ts` /
+// `+layout.server.ts`. The `setOn401Hook` below is registered at
+// module load (gated on `browser`, so it only fires in the client
+// bundle), so a 401 from a server-side fetch would mutate this
+// module-level `session.user` across SvelteKit requests — a real
+// cross-request state leak. The `if (browser)` guard makes that
+// failure mode mechanical rather than convention-based.
 
+import { browser } from '$app/environment';
+import { setOn401Hook } from './api/client';
 import { me, type User } from './api/auth';
 
 class SessionStore {
@@ -31,3 +41,16 @@ class SessionStore {
 }
 
 export const session = new SessionStore();
+
+// When any backend call returns 401, drop the cached user. Before this
+// hook, the `*OrEmpty` wrappers silently returned empty pages on 401
+// — so a mid-session expiry left the UI rendering as "logged in but
+// no bookmarks/collections/etc." until the user manually reloaded.
+// With the hook the session.user reactive store flips to null on the
+// first 401, so the layout re-renders the login affordance.
+//
+// Gated on `browser` so it's only installed in the client bundle.
+// See the module-level comment above for the SSR rationale.
+if (browser) {
+    setOn401Hook(() => session.setUser(null));
+}