aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/pages
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/pages
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/pages')
-rw-r--r--frontend/app/pages/DashboardPage.tsx9
-rw-r--r--frontend/app/pages/GolfPlayPage.tsx9
-rw-r--r--frontend/app/pages/GolfWatchPage.tsx9
-rw-r--r--frontend/app/pages/TournamentPage.tsx5
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))