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/hooks/useAuth.ts | 65 +++++++++++++------------------------------
 1 file changed, 20 insertions(+), 45 deletions(-)

(limited to 'frontend/app/hooks')

diff --git a/frontend/app/hooks/useAuth.ts b/frontend/app/hooks/useAuth.ts
index 8762734..7913a0e 100644
--- a/frontend/app/hooks/useAuth.ts
+++ b/frontend/app/hooks/useAuth.ts
@@ -1,58 +1,33 @@
-import { useCallback, useSyncExternalStore } from "react";
-import { apiLogin } from "../api/client";
-import {
-	type User,
-	clearToken,
-	getToken,
-	getUserFromToken,
-	isTokenExpired,
-	setToken,
-} from "../auth";
-
-// Simple external store to trigger re-renders when auth state changes.
-let authVersion = 0;
-const listeners = new Set<() => void>();
-
-function subscribe(callback: () => void) {
-	listeners.add(callback);
-	return () => listeners.delete(callback);
-}
-
-function getSnapshot() {
-	return authVersion;
-}
-
-function notifyAuthChange() {
-	authVersion++;
-	for (const listener of listeners) {
-		listener();
-	}
-}
+import { useCallback, useEffect, useState } from "react";
+import { apiGetMe, apiLogin, apiLogout } from "../api/client";
+import type { User } from "../auth";
 
 export function useAuth(): {
 	user: User | null;
-	token: string | null;
 	isLoggedIn: boolean;
+	isLoading: boolean;
 	login: (username: string, password: string) => Promise<void>;
-	logout: () => void;
+	logout: () => Promise<void>;
 } {
-	useSyncExternalStore(subscribe, getSnapshot);
-
-	const token = getToken();
-	const isExpired = isTokenExpired();
-	const user = isExpired ? null : getUserFromToken();
-	const isLoggedIn = user !== null && !isExpired;
+	const [user, setUser] = useState<User | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		apiGetMe()
+			.then((data) => setUser(data?.user ?? null))
+			.catch(() => setUser(null))
+			.finally(() => setIsLoading(false));
+	}, []);
 
 	const login = useCallback(async (username: string, password: string) => {
-		const { token } = await apiLogin(username, password);
-		setToken(token);
-		notifyAuthChange();
+		const { user } = await apiLogin(username, password);
+		setUser(user);
 	}, []);
 
-	const logout = useCallback(() => {
-		clearToken();
-		notifyAuthChange();
+	const logout = useCallback(async () => {
+		await apiLogout();
+		setUser(null);
 	}, []);
 
-	return { user, token: isLoggedIn ? token : null, isLoggedIn, login, logout };
+	return { user, isLoggedIn: user !== null, isLoading, login, logout };
 }
-- 
cgit v1.3.1