feat(auth): store JWT in HTTP-only cookie instead of JS-accessible cookie

Prevent XSS-based token theft by making the JWT inaccessible to
JavaScript. The backend now sets/clears the cookie via Set-Cookie
headers, and the frontend retrieves user info from /api/me instead
of decoding the JWT directly.

- Add JWTCookieMiddleware to parse cookie and inject claims into context
- Add /me and /logout endpoints to OpenAPI spec and handlers
- Update PostLogin to return user object + Set-Cookie header
- Replace Authorization header auth with cookie-based auth throughout
- Rewrite frontend auth to use /api/me instead of jwt-decode
- Remove jwt-decode dependency
- Configure CORS with credentials for local dev

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

2 files changed, 102 insertions, 47 deletions

diff --git a/frontend/app/api/client.ts b/frontend/app/api/client.ts
index 86f2506..26c20d1 100644
--- a/frontend/app/api/client.ts
+++ b/frontend/app/api/client.ts
@@ -9,6 +9,7 @@ const apiOrigin =
 
 const client = createClient<paths>({
 	baseUrl: `${apiOrigin}${API_BASE_PATH}`,
+	credentials: "include",
 });
 
 export async function apiLogin(username: string, password: string) {
@@ -22,15 +23,20 @@ export async function apiLogin(username: string, password: string) {
 	return data;
 }
 
-class AuthenticatedApiClient {
-	constructor(public readonly token: string) {}
+export async function apiLogout() {
+	const { error } = await client.POST("/logout");
+	if (error) throw new Error(error.message);
+}
 
+export async function apiGetMe() {
+	const { data, error } = await client.GET("/me");
+	if (error) return null;
+	return data;
+}
+
+class AuthenticatedApiClient {
 	async getGames() {
-		const { data, error } = await client.GET("/games", {
-			params: {
-				header: this._getAuthorizationHeader(),
-			},
-		});
+		const { data, error } = await client.GET("/games");
 		if (error) throw new Error(error.message);
 		return data;
 	}
@@ -38,7 +44,6 @@ class AuthenticatedApiClient {
 	async getGame(gameId: number) {
 		const { data, error } = await client.GET("/games/{game_id}", {
 			params: {
-				header: this._getAuthorizationHeader(),
 				path: { game_id: gameId },
 			},
 		});
@@ -51,7 +56,6 @@ class AuthenticatedApiClient {
 			"/games/{game_id}/play/latest_state",
 			{
 				params: {
-					header: this._getAuthorizationHeader(),
 					path: { game_id: gameId },
 				},
 			},
@@ -63,7 +67,6 @@ class AuthenticatedApiClient {
 	async postGamePlayCode(gameId: number, code: string) {
 		const { error } = await client.POST("/games/{game_id}/play/code", {
 			params: {
-				header: this._getAuthorizationHeader(),
 				path: { game_id: gameId },
 			},
 			body: { code },
@@ -74,7 +77,6 @@ class AuthenticatedApiClient {
 	async postGamePlaySubmit(gameId: number, code: string) {
 		const { data, error } = await client.POST("/games/{game_id}/play/submit", {
 			params: {
-				header: this._getAuthorizationHeader(),
 				path: { game_id: gameId },
 			},
 			body: { code },
@@ -86,7 +88,6 @@ class AuthenticatedApiClient {
 	async getGameWatchRanking(gameId: number) {
 		const { data, error } = await client.GET("/games/{game_id}/watch/ranking", {
 			params: {
-				header: this._getAuthorizationHeader(),
 				path: { game_id: gameId },
 			},
 		});
@@ -99,7 +100,6 @@ class AuthenticatedApiClient {
 			"/games/{game_id}/watch/latest_states",
 			{
 				params: {
-					header: this._getAuthorizationHeader(),
 					path: { game_id: gameId },
 				},
 			},
@@ -117,21 +117,18 @@ class AuthenticatedApiClient {
 	) {
 		const { data, error } = await client.GET("/tournament", {
 			params: {
-				header: this._getAuthorizationHeader(),
 				query: { game1, game2, game3, game4, game5 },
 			},
 		});
 		if (error) throw new Error(error.message);
 		return data;
 	}
-
-	_getAuthorizationHeader() {
-		return { Authorization: `Bearer ${this.token}` };
-	}
 }
 
-export function createApiClient(token: string) {
-	return new AuthenticatedApiClient(token);
+const apiClient = new AuthenticatedApiClient();
+
+export function createApiClient() {
+	return apiClient;
 }
 
 export const ApiClientContext = createContext<AuthenticatedApiClient | null>(
diff --git a/frontend/app/api/schema.d.ts b/frontend/app/api/schema.d.ts
index 04bfc10..6f9e270 100644
--- a/frontend/app/api/schema.d.ts
+++ b/frontend/app/api/schema.d.ts
@@ -21,6 +21,40 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/logout": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** User logout */
+        post: operations["postLogout"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/me": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get current user */
+        get: operations["getMe"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/games": {
         parameters: {
             query?: never;
@@ -291,7 +325,6 @@ export interface components {
         };
     };
     parameters: {
-        header_authorization: string;
         path_game_id: number;
     };
     requestBodies: never;
@@ -325,20 +358,59 @@ export interface operations {
                 };
                 content: {
                     "application/json": {
-                        /** @example xxxxx.xxxxx.xxxxx */
-                        token: string;
+                        user: components["schemas"]["User"];
                     };
                 };
             };
             401: components["responses"]["Unauthorized"];
         };
     };
-    getGames: {
+    postLogout: {
         parameters: {
             query?: never;
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successfully logged out */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
             };
+            401: components["responses"]["Unauthorized"];
+        };
+    };
+    getMe: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Current user info */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        user: components["schemas"]["User"];
+                    };
+                };
+            };
+            401: components["responses"]["Unauthorized"];
+        };
+    };
+    getGames: {
+        parameters: {
+            query?: never;
+            header?: never;
             path?: never;
             cookie?: never;
         };
@@ -362,9 +434,7 @@ export interface operations {
     getGame: {
         parameters: {
             query?: never;
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
-            };
+            header?: never;
             path: {
                 game_id: components["parameters"]["path_game_id"];
             };
@@ -391,9 +461,7 @@ export interface operations {
     getGamePlayLatestState: {
         parameters: {
             query?: never;
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
-            };
+            header?: never;
             path: {
                 game_id: components["parameters"]["path_game_id"];
             };
@@ -420,9 +488,7 @@ export interface operations {
     postGamePlayCode: {
         parameters: {
             query?: never;
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
-            };
+            header?: never;
             path: {
                 game_id: components["parameters"]["path_game_id"];
             };
@@ -452,9 +518,7 @@ export interface operations {
     postGamePlaySubmit: {
         parameters: {
             query?: never;
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
-            };
+            header?: never;
             path: {
                 game_id: components["parameters"]["path_game_id"];
             };
@@ -484,9 +548,7 @@ export interface operations {
     getGameWatchRanking: {
         parameters: {
             query?: never;
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
-            };
+            header?: never;
             path: {
                 game_id: components["parameters"]["path_game_id"];
             };
@@ -513,9 +575,7 @@ export interface operations {
     getGameWatchLatestStates: {
         parameters: {
             query?: never;
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
-            };
+            header?: never;
             path: {
                 game_id: components["parameters"]["path_game_id"];
             };
@@ -550,9 +610,7 @@ export interface operations {
                 game4: number;
                 game5: number;
             };
-            header: {
-                Authorization: components["parameters"]["header_authorization"];
-            };
+            header?: never;
             path?: never;
             cookie?: never;
         };