diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-13 23:46:16 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-13 23:46:16 +0900 |
| commit | 7258ca81812a24edd382438ce6e9ebc538549427 (patch) | |
| tree | 9bbc034be62777a2412d871211188268d7c56da4 /frontend/app/hooks | |
| parent | 7757f26295cbf19c4d6fa068e2cb6bdc2589d01a (diff) | |
| download | phperkaigi-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.ts | 63 |
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 }; } |
