From 7258ca81812a24edd382438ce6e9ebc538549427 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 13 Feb 2026 23:46:16 +0900
Subject: 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>
---
 frontend/app/pages/DashboardPage.tsx  | 9 +++------
 frontend/app/pages/GolfPlayPage.tsx   | 9 ++-------
 frontend/app/pages/GolfWatchPage.tsx  | 9 ++-------
 frontend/app/pages/TournamentPage.tsx | 5 +----
 4 files changed, 8 insertions(+), 24 deletions(-)

(limited to 'frontend/app/pages')

diff --git a/frontend/app/pages/DashboardPage.tsx b/frontend/app/pages/DashboardPage.tsx
index c81014d..708a867 100644
--- a/frontend/app/pages/DashboardPage.tsx
+++ b/frontend/app/pages/DashboardPage.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { useLocation } from "wouter";
 import { createApiClient } from "../api/client";
 import type { components } from "../api/schema";
-import { getToken } from "../auth";
 import BorderedContainerWithCaption from "../components/BorderedContainerWithCaption";
 import NavigateLink from "../components/NavigateLink";
 import UserIcon from "../components/UserIcon";
@@ -22,17 +21,15 @@ export default function DashboardPage() {
 	const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
-		const token = getToken();
-		if (!token) return;
-		const apiClient = createApiClient(token);
+		const apiClient = createApiClient();
 		apiClient
 			.getGames()
 			.then(({ games }) => setGames(games))
 			.finally(() => setLoading(false));
 	}, []);
 
-	function handleLogout() {
-		logout();
+	async function handleLogout() {
+		await logout();
 		navigate("/");
 	}
 
diff --git a/frontend/app/pages/GolfPlayPage.tsx b/frontend/app/pages/GolfPlayPage.tsx
index 3fddbf8..c183ac8 100644
--- a/frontend/app/pages/GolfPlayPage.tsx
+++ b/frontend/app/pages/GolfPlayPage.tsx
@@ -3,7 +3,6 @@ import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "wouter";
 import { ApiClientContext, createApiClient } from "../api/client";
 import type { components } from "../api/schema";
-import { getToken } from "../auth";
 import GolfPlayApp from "../components/GolfPlayApp";
 import { APP_NAME } from "../config";
 import { useAuth } from "../hooks/useAuth";
@@ -29,9 +28,7 @@ export default function GolfPlayPage({ gameId }: { gameId: string }) {
 	);
 
 	useEffect(() => {
-		const token = getToken();
-		if (!token) return;
-		const apiClient = createApiClient(token);
+		const apiClient = createApiClient();
 		Promise.all([
 			apiClient.getGame(gameIdNum),
 			apiClient.getGamePlayLatestState(gameIdNum),
@@ -57,11 +54,9 @@ export default function GolfPlayPage({ gameId }: { gameId: string }) {
 		);
 	}
 
-	const token = getToken()!;
-
 	return (
 		<JotaiProvider store={store}>
-			<ApiClientContext.Provider value={createApiClient(token)}>
+			<ApiClientContext.Provider value={createApiClient()}>
 				<GolfPlayApp
 					key={game.game_id}
 					game={game}
diff --git a/frontend/app/pages/GolfWatchPage.tsx b/frontend/app/pages/GolfWatchPage.tsx
index 317f860..519a030 100644
--- a/frontend/app/pages/GolfWatchPage.tsx
+++ b/frontend/app/pages/GolfWatchPage.tsx
@@ -3,7 +3,6 @@ import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "wouter";
 import { ApiClientContext, createApiClient } from "../api/client";
 import type { components } from "../api/schema";
-import { getToken } from "../auth";
 import GolfWatchApp from "../components/GolfWatchApp";
 import { APP_NAME } from "../config";
 import { usePageTitle } from "../hooks/usePageTitle";
@@ -31,9 +30,7 @@ export default function GolfWatchPage({ gameId }: { gameId: string }) {
 	);
 
 	useEffect(() => {
-		const token = getToken();
-		if (!token) return;
-		const apiClient = createApiClient(token);
+		const apiClient = createApiClient();
 		Promise.all([
 			apiClient.getGame(gameIdNum),
 			apiClient.getGameWatchRanking(gameIdNum),
@@ -61,11 +58,9 @@ export default function GolfWatchPage({ gameId }: { gameId: string }) {
 		);
 	}
 
-	const token = getToken()!;
-
 	return (
 		<JotaiProvider store={store}>
-			<ApiClientContext.Provider value={createApiClient(token)}>
+			<ApiClientContext.Provider value={createApiClient()}>
 				<GolfWatchApp
 					key={game.game_id}
 					game={game}
diff --git a/frontend/app/pages/TournamentPage.tsx b/frontend/app/pages/TournamentPage.tsx
index 43ea790..404fa2d 100644
--- a/frontend/app/pages/TournamentPage.tsx
+++ b/frontend/app/pages/TournamentPage.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { createApiClient } from "../api/client";
 import type { components } from "../api/schema";
-import { getToken } from "../auth";
 import BorderedContainer from "../components/BorderedContainer";
 import UserIcon from "../components/UserIcon";
 import { APP_NAME } from "../config";
@@ -241,9 +240,7 @@ export default function TournamentPage() {
 
 		setPlayerIDs(pIDs);
 
-		const token = getToken();
-		if (!token) return;
-		const apiClient = createApiClient(token);
+		const apiClient = createApiClient();
 		apiClient
 			.getTournament(game1, game2, game3, game4, game5)
 			.then(({ tournament }) => setTournament(tournament))
-- 
cgit v1.3.1