aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/hooks
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2026-02-13 23:46:16 +0900
committernsfisis <nsfisis@gmail.com>2026-02-13 23:46:16 +0900
commit7258ca81812a24edd382438ce6e9ebc538549427 (patch)
tree9bbc034be62777a2412d871211188268d7c56da4 /frontend/app/hooks
parent7757f26295cbf19c4d6fa068e2cb6bdc2589d01a (diff)
downloadphperkaigi-2026-albatross-7258ca81812a24edd382438ce6e9ebc538549427.tar.gz
phperkaigi-2026-albatross-7258ca81812a24edd382438ce6e9ebc538549427.tar.zst
phperkaigi-2026-albatross-7258ca81812a24edd382438ce6e9ebc538549427.zip
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>
Diffstat (limited to 'frontend/app/hooks')
-rw-r--r--frontend/app/hooks/useAuth.ts63
1 files changed, 19 insertions, 44 deletions
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 [user, setUser] = useState<User | null>(null);
+ const [isLoading, setIsLoading] = useState(true);
- const token = getToken();
- const isExpired = isTokenExpired();
- const user = isExpired ? null : getUserFromToken();
- const isLoggedIn = user !== null && !isExpired;
+ 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 };
}