@johnnyboy11234/esg-idea-contest 0.2.2 → 0.2.3

package/frontend/src/app/pages/login.test.tsx

@@ -0,0 +1,218 @@
+import { QueryClient } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { createMemoryRouter } from "react-router";
+import { axe } from "vitest-axe";
+import { clearCsrfToken } from "@/shared/api";
+import { problem } from "@/shared/api/mocks/problem";
+import { server } from "@/shared/api/mocks/server";
+import { initI18n } from "@/shared/i18n";
+import { App } from "../App";
+import { routes } from "../router";
+
+const API = "http://localhost:3000/api/v1";
+const USER = { empNo: "089290", name: "Wang", email: "w@x.io", role: "USER" };
+const ADMIN = { empNo: "000001", name: "Root", email: null, role: "ADMIN" };
+
+/** A visitor on `path`; `account` is who a successful login returns. `GET /auth/me` follows the session. */
+async function open(path: string, account: typeof USER | typeof ADMIN = USER) {
+  clearCsrfToken();
+  let session: typeof USER | typeof ADMIN | null = null;
+  const calls: { login: unknown[]; logoutCsrf: (string | null)[] } = {
+    login: [],
+    logoutCsrf: [],
+  };
+  server.use(
+    http.get(`${API}/auth/me`, () =>
+      session ? HttpResponse.json(session) : problem(401, "UNAUTHENTICATED"),
+    ),
+    http.get(`${API}/deadline`, () =>
+      HttpResponse.json({
+        deadline: null,
+        state: "OPEN",
+        serverTime: "2026-11-08T00:00:00.000Z",
+      }),
+    ),
+    http.get(`${API}/auth/csrf`, () =>
+      HttpResponse.json({ token: session ? "tok-session" : "tok-anon" }),
+    ),
+    http.post(`${API}/auth/login`, async ({ request }) => {
+      calls.login.push(await request.json());
+      session = account;
+      return HttpResponse.json(account);
+    }),
+    http.post(`${API}/auth/logout`, ({ request }) => {
+      calls.logoutCsrf.push(request.headers.get("X-CSRF-Token"));
+      session = null;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+  await initI18n("en");
+  const router = createMemoryRouter(routes, { initialEntries: [path] });
+  const view = render(<App router={router} client={new QueryClient()} />);
+  await screen.findByRole("heading", {
+    level: 1,
+    name: "Sign in to your account",
+  });
+  return { router, calls, user: userEvent.setup(), ...view };
+}
+
+async function signIn(
+  user: ReturnType<typeof userEvent.setup>,
+  empNo = "089290",
+  password = "secret",
+) {
+  await user.type(screen.getByLabelText("Employee ID"), empNo);
+  await user.type(screen.getByLabelText("Password"), password);
+  await user.click(screen.getByRole("button", { name: "Sign in" }));
+}
+
+describe("Login page", () => {
+  it("has labelled, autocompleted fields and no axe violations", async () => {
+    const { container } = await open("/login");
+    expect(screen.getByLabelText("Employee ID")).toHaveAttribute(
+      "autocomplete",
+      "username",
+    );
+    expect(screen.getByLabelText("Password")).toHaveAttribute(
+      "autocomplete",
+      "current-password",
+    );
+    expect((await axe(container)).violations).toEqual([]);
+  });
+
+  it("signs a User in and lands on /ideas", async () => {
+    const { router, calls, user } = await open("/login");
+    await signIn(user, " 089290 ", "secret");
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+    expect(calls.login).toEqual([{ empNo: "089290", password: "secret" }]);
+    expect(await screen.findByText("Wang")).toBeInTheDocument();
+    expect(screen.queryByText("Administrator")).not.toBeInTheDocument();
+  });
+
+  it("signs an Admin in, to the same page, with the Administrator badge", async () => {
+    const { router, user } = await open("/login", ADMIN);
+    await signIn(user, "000001");
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+    expect(await screen.findByText("Administrator")).toBeInTheDocument();
+  });
+
+  it("follows a role-allowed next", async () => {
+    const { router, user } = await open("/login?next=%2Fjoin-requests");
+    await signIn(user);
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe("/join-requests"),
+    );
+  });
+
+  it.each([
+    "//evil.example",
+    "https://evil.example/x",
+    "/admin/deadline",
+    "/nope",
+    "\\\\evil.example",
+  ])("ignores next=%s", async (next) => {
+    const { router, user } = await open(
+      `/login?next=${encodeURIComponent(next)}`,
+    );
+    await signIn(user);
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+    expect(router.state.location.search).toBe("");
+  });
+
+  it("shows one message for a wrong password, clears the password and focuses the message", async () => {
+    const { user, container } = await open("/login");
+    server.use(
+      http.post(`${API}/auth/login`, () => problem(401, "INVALID_CREDENTIALS")),
+    );
+    await signIn(user, "089290", "wrong");
+    const alert = await screen.findByRole("alert");
+    expect(alert).toHaveTextContent(
+      "The employee ID or password is incorrect.",
+    );
+    expect(alert).toHaveFocus();
+    expect(screen.getByLabelText("Password")).toHaveValue("");
+    expect(screen.getByLabelText("Employee ID")).toHaveValue("089290");
+    expect((await axe(container)).violations).toEqual([]);
+  });
+
+  it("shows the throttle message", async () => {
+    const { user } = await open("/login");
+    server.use(
+      http.post(`${API}/auth/login`, () =>
+        problem(429, "LOGIN_THROTTLED", {}, { "Retry-After": "60" }),
+      ),
+    );
+    await signIn(user);
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Too many sign-in attempts",
+    );
+  });
+
+  it("shows the registered and session-ended notices", async () => {
+    const router = createMemoryRouter(routes, {
+      initialEntries: [
+        { pathname: "/login", state: { notice: "sessionEnded" } },
+      ],
+    });
+    server.use(
+      http.get(`${API}/auth/me`, () => problem(401, "UNAUTHENTICATED")),
+      http.get(`${API}/deadline`, () =>
+        HttpResponse.json({
+          deadline: null,
+          state: "OPEN",
+          serverTime: "2026-11-08T00:00:00.000Z",
+        }),
+      ),
+    );
+    await initI18n("en");
+    render(<App router={router} client={new QueryClient()} />);
+    expect(await screen.findByRole("status", { name: "" })).toBeInTheDocument();
+    expect(
+      await screen.findByText("Your session has ended. Please sign in again."),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Sign out", () => {
+  it("ends the session with the session-bound CSRF token and returns to a clean /login", async () => {
+    const { router, calls, user } = await open("/login");
+    await signIn(user);
+    await user.click(await screen.findByRole("button", { name: "Sign out" }));
+    await screen.findByRole("heading", {
+      level: 1,
+      name: "Sign in to your account",
+    });
+    expect(calls.logoutCsrf).toEqual(["tok-session"]);
+    expect(router.state.location.pathname).toBe("/login");
+    expect(router.state.location.search).toBe("");
+    expect(
+      screen.queryByText("Your session has ended. Please sign in again."),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Wang")).not.toBeInTheDocument();
+  });
+
+  it("a second login after logout uses a fresh CSRF token", async () => {
+    const { router, user } = await open("/login");
+    await signIn(user);
+    await user.click(await screen.findByRole("button", { name: "Sign out" }));
+    await screen.findByRole("heading", {
+      level: 1,
+      name: "Sign in to your account",
+    });
+    await signIn(user);
+    await waitFor(() => expect(router.state.location.pathname).toBe("/ideas"));
+  });
+
+  it("tells the user when sign-out fails and keeps them signed in", async () => {
+    const { router, user } = await open("/login");
+    await signIn(user);
+    server.use(
+      http.post(`${API}/auth/logout`, () => problem(500, "INTERNAL_ERROR")),
+    );
+    await user.click(await screen.findByRole("button", { name: "Sign out" }));
+    expect(await screen.findByRole("alert")).toBeInTheDocument();
+    expect(router.state.location.pathname).toBe("/ideas");
+  });
+});

package/frontend/src/app/pages/register.test.tsx

@@ -0,0 +1,231 @@
+import { QueryClient } from '@tanstack/react-query';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { createMemoryRouter } from 'react-router';
+import { axe } from 'vitest-axe';
+import { clearCsrfToken } from '@/shared/api';
+import { problem } from '@/shared/api/mocks/problem';
+import { server } from '@/shared/api/mocks/server';
+import { initI18n, type Locale } from '@/shared/i18n';
+import { App } from '../App';
+import { routes } from '../router';
+
+const API = 'http://localhost:3000/api/v1';
+
+interface Seen {
+  body: unknown;
+  csrf: string | null;
+  cookieSet: boolean;
+}
+
+/** Visitor on /register; returns what POST /auth/register received. */
+async function open(locale: Locale = 'en') {
+  clearCsrfToken();
+  const seen: Seen[] = [];
+  server.use(
+    http.get(`${API}/auth/me`, () => problem(401, 'UNAUTHENTICATED')),
+    http.get(`${API}/deadline`, () => HttpResponse.json({ deadline: null, state: 'OPEN', serverTime: '2026-11-08T00:00:00.000Z' })),
+    http.get(`${API}/auth/csrf`, () => HttpResponse.json({ token: 'tok' })),
+  );
+  await initI18n(locale);
+  const router = createMemoryRouter(routes, { initialEntries: ['/register'] });
+  const view = render(<App router={router} client={new QueryClient()} />);
+  await screen.findByRole('heading', { level: 1, name: locale === 'en' ? 'Create an account' : '建立帳號' });
+  return { router, seen, user: userEvent.setup(), ...view };
+}
+
+function registerReturns(seen: Seen[], respond: () => Response | Promise<Response>) {
+  server.use(
+    http.post(`${API}/auth/register`, async ({ request }) => {
+      seen.push({ body: await request.json(), csrf: request.headers.get('X-CSRF-Token'), cookieSet: false });
+      return respond();
+    }),
+  );
+}
+
+async function fill(user: ReturnType<typeof userEvent.setup>, v: Partial<Record<'Employee ID' | 'Name' | 'Email' | 'Password' | 'Confirm password', string>>) {
+  for (const [label, value] of Object.entries(v)) await user.type(screen.getByLabelText(label), value);
+}
+
+const VALID = { 'Employee ID': '089290', Name: '  Wang   Xiao Ming ', Email: ' Wang@Example.COM ', Password: 'Correct-Horse-9', 'Confirm password': 'Correct-Horse-9' };
+
+describe('Register page: markup', () => {
+  it('labels every field and sets autocomplete (WCAG 1.3.1, 1.3.5)', async () => {
+    await open();
+    const expected: [string, string][] = [
+      ['Employee ID', 'username'],
+      ['Name', 'name'],
+      ['Email', 'email'],
+      ['Password', 'new-password'],
+      ['Confirm password', 'new-password'],
+    ];
+    for (const [label, ac] of expected) {
+      const input = screen.getByLabelText(label);
+      expect(input).toHaveAttribute('autocomplete', ac);
+      expect(input).toBeRequired();
+    }
+    expect(screen.getByLabelText('Password')).toHaveAttribute('type', 'password');
+    expect(screen.getByLabelText('Email')).toHaveAttribute('type', 'email');
+  });
+
+  it.each(['en', 'zh-TW'] as const)('has no axe violations (%s), also with errors shown', async (locale) => {
+    const { container, user } = await open(locale);
+    await screen.findByRole('region', { name: locale === 'en' ? 'Submission status' : /.+/ });
+    expect((await axe(container)).violations).toEqual([]);
+    await user.click(screen.getByRole('button', { name: locale === 'en' ? 'Create account' : '建立帳號' }));
+    expect(await screen.findByRole('alert')).toBeInTheDocument();
+    expect((await axe(container)).violations).toEqual([]);
+  });
+});
+
+describe('Register page: pre-check and error summary', () => {
+  it('blocks an empty submit, focuses the summary and sends no request', async () => {
+    const { user } = await open();
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const summary = await screen.findByRole('alert');
+    await waitFor(() => expect(summary).toHaveFocus());
+    const links = within(summary).getAllByRole('link');
+    expect(links.map((l) => l.textContent)).toEqual([
+      'Employee ID: This field is required.',
+      'Name: This field is required.',
+      'Email: This field is required.',
+      'Password: This field is required.',
+    ]);
+    // each field points at its error text and is marked invalid
+    const empNo = screen.getByLabelText('Employee ID');
+    expect(empNo).toHaveAttribute('aria-invalid', 'true');
+    expect(empNo.getAttribute('aria-describedby')).toContain('empNo-error');
+    expect(document.getElementById('empNo-error')).toHaveTextContent('This field is required.');
+  });
+
+  it('a summary link moves focus to its field (keyboard: Enter)', async () => {
+    const { user } = await open();
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const summary = await screen.findByRole('alert');
+    await waitFor(() => expect(summary).toHaveFocus());
+    await user.tab();
+    expect(within(summary).getAllByRole('link')[0]).toHaveFocus();
+    await user.tab();
+    await user.keyboard('{Enter}');
+    expect(screen.getByLabelText('Name')).toHaveFocus();
+  });
+
+  it.each([
+    ['12345', 'The format is not valid.'],
+    ['12345a', 'The format is not valid.'],
+    ['１２３４５６', 'The format is not valid.'],
+  ])('employee ID %j', async (empNo, msg) => {
+    const { user } = await open();
+    await fill(user, { ...VALID, 'Employee ID': empNo });
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByText(`Employee ID: ${msg}`)).toBeInTheDocument();
+  });
+
+  it('email with a space is rejected before any request (PRD §6.3)', async () => {
+    const { user } = await open();
+    await fill(user, { ...VALID, Email: 'a b@x.com' });
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByText('Email: The format is not valid.')).toBeInTheDocument();
+  });
+
+  it('name with a forbidden character and a mismatching confirmation', async () => {
+    const { user } = await open();
+    await fill(user, { ...VALID, Name: 'a/b', 'Confirm password': 'other' });
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByText('Name: The name contains characters that are not allowed.')).toBeInTheDocument();
+    expect(screen.getByText('Confirm password: The passwords do not match.')).toBeInTheDocument();
+  });
+});
+
+describe('Register page: submit', () => {
+  it('sends the cleaned values with the CSRF token, then goes to /login with a notice and no login', async () => {
+    const { user, seen, router } = await open();
+    registerReturns(seen, () => HttpResponse.json({ empNo: '089290', name: 'Wang Xiao Ming', email: 'wang@example.com' }, { status: 201 }));
+    let loginCalls = 0;
+    server.use(http.post(`${API}/auth/login`, () => (loginCalls++, problem(500, 'INTERNAL_ERROR'))));
+    await fill(user, VALID);
+    await user.keyboard('{Enter}'); // submit from the keyboard
+    await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+    expect(seen).toEqual([
+      { body: { empNo: '089290', name: 'Wang Xiao Ming', email: 'wang@example.com', password: 'Correct-Horse-9' }, csrf: 'tok', cookieSet: false },
+    ]);
+    expect(router.state.location.search).toBe('');
+    expect(router.state.location.state).toEqual({ notice: 'registered' });
+    expect(await screen.findByRole('status', { name: '' })).toBeDefined();
+    expect(screen.getByText('Your account was created. Sign in to continue.')).toBeInTheDocument();
+    expect(loginCalls).toBe(0);
+  });
+
+  it('disables the button while the request is pending (no double submit)', async () => {
+    const { user, seen, router } = await open();
+    let release!: () => void;
+    const gate = new Promise<void>((r) => (release = r));
+    registerReturns(seen, async () => {
+      await gate;
+      return HttpResponse.json({ empNo: '089290', name: 'W', email: 'w@x.io' }, { status: 201 });
+    });
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const busy = await screen.findByRole('button', { name: 'Creating account…' });
+    expect(busy).toBeDisabled();
+    release();
+    await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+    expect(seen).toHaveLength(1);
+  });
+
+  it.each([
+    ['EMP_NO_TAKEN', 'Employee ID', 'Employee ID: This employee ID is already registered.'],
+    ['EMAIL_TAKEN', 'Email', 'Email: This email address is already registered.'],
+  ] as const)('409 %s is shown on its field and the user stays on the form', async (code, label, summaryText) => {
+    const { user, seen, router } = await open();
+    registerReturns(seen, () => problem(409, code));
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByRole('link', { name: summaryText })).toBeInTheDocument();
+    expect(screen.getByLabelText(label)).toHaveAttribute('aria-invalid', 'true');
+    expect(router.state.location.pathname).toBe('/register');
+    expect(screen.getByLabelText('Password')).toHaveValue('Correct-Horse-9'); // nothing the user typed is lost
+  });
+
+  it('422 field errors map to their fields; PASSWORD_POLICY shows the policy message', async () => {
+    const { user, seen } = await open();
+    registerReturns(seen, () =>
+      problem(422, 'PASSWORD_POLICY', {
+        errors: [
+          { field: 'name', code: 'OUT_OF_RANGE' },
+          { field: 'password', code: 'LENGTH' },
+          { field: 'password', code: 'COMPLEXITY' },
+        ],
+      }),
+    );
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(await screen.findByRole('link', { name: 'Name: The value is out of range.' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Password: The password does not meet the requirements.' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Name')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('a failure without a field (503) is a form-level message with the request ID', async () => {
+    const { user, seen, router } = await open();
+    registerReturns(seen, () => problem(503, 'SERVICE_UNAVAILABLE'));
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    const summary = await screen.findByRole('alert');
+    expect(summary).toHaveTextContent('The service is temporarily unavailable. Please try again later.');
+    expect(summary).toHaveTextContent('Request ID: 6f1c2c1e-0000-4000-8000-000000000000');
+    expect(within(summary).queryAllByRole('link')).toHaveLength(0);
+    expect(router.state.location.pathname).toBe('/register');
+    expect(screen.getByRole('button', { name: 'Create account' })).toBeEnabled();
+  });
+
+  it('retries once after CSRF_INVALID (shared client behaviour) and still succeeds', async () => {
+    const { user, router } = await open();
+    let n = 0;
+    server.use(http.post(`${API}/auth/register`, () => (n++ === 0 ? problem(403, 'CSRF_INVALID') : HttpResponse.json({ empNo: '089290', name: 'W', email: 'w@x.io' }, { status: 201 }))));
+    await fill(user, VALID);
+    await user.click(screen.getByRole('button', { name: 'Create account' }));
+    await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+    expect(n).toBe(2);
+  });
+});

package/frontend/src/app/router.tsx

@@ -1,29 +1,39 @@
-import { lazy, Suspense, type ComponentType } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Navigate, useLocation, useSearchParams, type RouteObject } from 'react-router';
-import { decide, safeNext } from './access';
-import { AppShell, PublicLayout } from './layouts';
-import { NotFound } from './pages/NotFound';
-import { Login, Register } from './pages/auth';
-import { IdeaCreate, IdeaDetail, IdeaEdit, IdeaList } from './pages/ideas';
-import { JoinRequests } from './pages/JoinRequests';
-import { ROUTES } from './routes';
-import { useMe } from './session';
+import { lazy, Suspense, useEffect, type ComponentType } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Navigate,
+  useLocation,
+  useSearchParams,
+  type RouteObject,
+} from "react-router";
+import { decide, safeNext } from "./access";
+import { AppShell, PublicLayout } from "./layouts";
+import { NotFound } from "./pages/NotFound";
+import { Login, Register } from "./pages/auth";
+import { IdeaCreate, IdeaDetail, IdeaEdit, IdeaList } from "./pages/ideas";
+import { JoinRequests } from "./pages/JoinRequests";
+import { ROUTES } from "./routes";
+import { ApiError } from "@/shared/api";
+import { leavingReason, useMe, type SessionEndedState } from "./session";
 
-const AdminDeadline = lazy(() => import('./pages/admin').then((m) => ({ default: m.AdminDeadline })));
-const AdminStats = lazy(() => import('./pages/admin').then((m) => ({ default: m.AdminStats })));
+const AdminDeadline = lazy(() =>
+  import("./pages/admin").then((m) => ({ default: m.AdminDeadline })),
+);
+const AdminStats = lazy(() =>
+  import("./pages/admin").then((m) => ({ default: m.AdminStats })),
+);
 
 /** Page per route path; keys must match `ROUTES` (checked by a test). */
 export const PAGES: Record<string, ComponentType> = {
-  '/login': Login,
-  '/register': Register,
-  '/ideas': IdeaList,
-  '/ideas/new': IdeaCreate,
-  '/ideas/:id': IdeaDetail,
-  '/ideas/:id/edit': IdeaEdit,
-  '/join-requests': JoinRequests,
-  '/admin/deadline': AdminDeadline,
-  '/admin/stats': AdminStats,
+  "/login": Login,
+  "/register": Register,
+  "/ideas": IdeaList,
+  "/ideas/new": IdeaCreate,
+  "/ideas/:id": IdeaDetail,
+  "/ideas/:id/edit": IdeaEdit,
+  "/join-requests": JoinRequests,
+  "/admin/deadline": AdminDeadline,
+  "/admin/stats": AdminStats,
 };
 
 /** Wraps a page with identity, the access decision (§6.3) and the right layout. `route` undefined = 404. */
@@ -31,35 +41,74 @@ function Gate({ route }: { route?: (typeof ROUTES)[number] }) {
   const { t } = useTranslation();
   const location = useLocation();
   const [params] = useSearchParams();
-  const { data: me, isPending, isError } = useMe();
+  const { data: me, isPending, isError, error } = useMe();
+  useEffect(() => {
+    if (!isError) return;
+    if (error instanceof ApiError)
+      console.error(
+        "GET /auth/me failed",
+        error.status,
+        error.code,
+        error.requestId,
+      );
+    else
+      console.error(
+        "GET /auth/me failed (network error or non-JSON response; is the backend / dev proxy up?)",
+        error,
+      );
+  }, [isError, error]);
 
-  if (isPending) return <p role="status">{t('common.loading')}</p>;
-  if (isError) return <p role="alert">{t('errors.UNKNOWN')}</p>;
+  if (isPending) return <p role="status">{t("common.loading")}</p>;
+  if (isError) return <p role="alert">{t("errors.UNKNOWN")}</p>;
 
   const role = me?.role ?? null;
-  const d = route ? decide(route.access, role, location) : ({ kind: 'notFound' } as const);
-  if (d.kind === 'login') return <Navigate to={`/login?next=${encodeURIComponent(d.next)}`} replace />;
-  if (d.kind === 'home') return <Navigate to={role ? safeNext(params.get('next'), role) : '/login'} replace />;
+  const d = route
+    ? decide(route.access, role, location)
+    : ({ kind: "notFound" } as const);
+  if (d.kind === "login") {
+    const why = leavingReason();
+    if (why === "signedOut") return <Navigate to="/login" replace />;
+    const state: SessionEndedState | undefined =
+      why === "sessionEnded" ? { notice: "sessionEnded" } : undefined;
+    return (
+      <Navigate
+        to={`/login?next=${encodeURIComponent(d.next)}`}
+        replace
+        state={state}
+      />
+    );
+  }
+  if (d.kind === "home")
+    return (
+      <Navigate
+        to={role ? safeNext(params.get("next"), role) : "/login"}
+        replace
+      />
+    );
 
-  const Page = d.kind === 'allow' && route ? PAGES[route.path] : undefined;
+  const Page = d.kind === "allow" && route ? PAGES[route.path] : undefined;
   const page = Page ? (
-    <Suspense fallback={<p role="status">{t('common.loading')}</p>}>
+    <Suspense fallback={<p role="status">{t("common.loading")}</p>}>
       <Page />
     </Suspense>
   ) : (
     <NotFound />
   );
-  return me ? <AppShell me={me}>{page}</AppShell> : <PublicLayout>{page}</PublicLayout>;
+  return me ? (
+    <AppShell me={me}>{page}</AppShell>
+  ) : (
+    <PublicLayout>{page}</PublicLayout>
+  );
 }
 
 function RootRedirect() {
   const { data: me, isPending } = useMe();
   if (isPending) return null;
-  return <Navigate to={me ? '/ideas' : '/login'} replace />;
+  return <Navigate to={me ? "/ideas" : "/login"} replace />;
 }
 
 export const routes: RouteObject[] = [
-  { path: '/', element: <RootRedirect /> },
+  { path: "/", element: <RootRedirect /> },
   ...ROUTES.map((r) => ({ path: r.path, element: <Gate route={r} /> })),
-  { path: '*', element: <Gate /> },
+  { path: "*", element: <Gate /> },
 ];