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/pages | |
| 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/pages')
| -rw-r--r-- | frontend/app/pages/DashboardPage.tsx | 9 | ||||
| -rw-r--r-- | frontend/app/pages/GolfPlayPage.tsx | 9 | ||||
| -rw-r--r-- | frontend/app/pages/GolfWatchPage.tsx | 9 | ||||
| -rw-r--r-- | frontend/app/pages/TournamentPage.tsx | 5 |
4 files changed, 8 insertions, 24 deletions
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)) |
