create-authenik8-app 2.4.12 → 2.4.14

package/templates/fullstack/apps/api/tests/security.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("../src/config/env.js", () => ({
+  env: {
+    COOKIE_SECURE: false,
+    NODE_ENV: "test",
+    REFRESH_SECRET: "test-refresh-secret-with-more-than-32-characters",
+    WEB_ORIGIN: "http://localhost:5173",
+  },
+}));
+
+import { readRefreshCookie, refreshCookieName, refreshCookieOptions, setRefreshCookie } from "../src/auth/cookies.js";
+import { csrfCookieName, issueCsrfToken, requireCsrf } from "../src/middleware/csrf.js";
+import { requireAllowedOrigin } from "../src/middleware/origin.js";
+
+describe("browser session defenses", () => {
+  it("restricts the refresh cookie", () => {
+    expect(refreshCookieOptions()).toMatchObject({
+      httpOnly: true,
+      sameSite: "strict",
+      path: "/api",
+    });
+  });
+
+  it("encrypts refresh tokens before cookie storage", () => {
+    const cookie = vi.fn();
+    const rawToken = "refresh-token-value";
+    setRefreshCookie({ cookie } as never, rawToken);
+
+    const sealedToken = cookie.mock.calls[0]?.[1] as string;
+    expect(sealedToken).not.toContain(rawToken);
+    expect(readRefreshCookie({ cookies: { [refreshCookieName]: sealedToken } } as never)).toBe(rawToken);
+    expect(readRefreshCookie({ cookies: { [refreshCookieName]: `${sealedToken}tampered` } } as never)).toBeUndefined();
+  });
+
+  it("requires the signed CSRF cookie and matching request header", () => {
+    const cookie = vi.fn();
+    const token = issueCsrfToken({ cookies: {} } as never, { cookie } as never);
+    const next = vi.fn();
+    const status = vi.fn().mockReturnThis();
+    const json = vi.fn();
+
+    requireCsrf(
+      { cookies: { [csrfCookieName]: token }, get: () => token, id: "request-3" } as never,
+      { status, json } as never,
+      next,
+    );
+
+    expect(cookie).toHaveBeenCalledWith(csrfCookieName, token, expect.objectContaining({ httpOnly: true, sameSite: "strict" }));
+    expect(next).toHaveBeenCalledOnce();
+    expect(status).not.toHaveBeenCalled();
+  });
+
+  it("rejects a missing or mismatched CSRF token without disclosing it", () => {
+    const status = vi.fn().mockReturnThis();
+    const json = vi.fn();
+    const next = vi.fn();
+    requireCsrf(
+      { cookies: {}, get: () => undefined, id: "request-4" } as never,
+      { status, json } as never,
+      next,
+    );
+
+    expect(status).toHaveBeenCalledWith(403);
+    expect(json).toHaveBeenCalledWith({
+      error: { code: "CSRF_REJECTED", message: "Request verification failed" },
+      requestId: "request-4",
+    });
+    expect(next).not.toHaveBeenCalled();
+  });
+
+  it("rejects a mismatched cookie request origin", () => {
+    const status = vi.fn().mockReturnThis();
+    const json = vi.fn();
+    const next = vi.fn();
+    requireAllowedOrigin(
+      { get: () => "https://attacker.example", id: "request-1" } as never,
+      { status, json } as never,
+      next,
+    );
+    expect(status).toHaveBeenCalledWith(403);
+    expect(json).toHaveBeenCalledWith(expect.objectContaining({ error: expect.objectContaining({ code: "ORIGIN_REJECTED" }) }));
+    expect(next).not.toHaveBeenCalled();
+  });
+
+  it("allows the local preview origin during development", () => {
+    const status = vi.fn().mockReturnThis();
+    const json = vi.fn();
+    const next = vi.fn();
+    requireAllowedOrigin(
+      { get: () => "http://localhost:4173", id: "request-2" } as never,
+      { status, json } as never,
+      next,
+    );
+    expect(next).toHaveBeenCalledOnce();
+    expect(status).not.toHaveBeenCalled();
+  });
+});

package/templates/fullstack/apps/api/tests/validation.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import {
+  identifierSchema,
+  pageSchema,
+  projectCreateSchema,
+  registerSchema,
+} from "@authenik8/contracts";
+
+describe("request validation", () => {
+  it("normalizes valid registration input", () => {
+    expect(registerSchema.parse({
+      name: "  Jane   Example  ",
+      email: "  JANE@EXAMPLE.COM ",
+      password: "SecurePass1",
+    })).toEqual({
+      name: "Jane Example",
+      email: "jane@example.com",
+      password: "SecurePass1",
+    });
+  });
+
+  it("rejects weak registration input and unknown fields", () => {
+    expect(registerSchema.safeParse({
+      name: "J",
+      email: "not-an-email",
+      password: "password",
+      role: "ADMIN",
+    }).success).toBe(false);
+  });
+
+  it("normalizes project text and bounds route/query values", () => {
+    expect(projectCreateSchema.parse({ name: "  Project   Alpha ", description: " notes\r\n" }))
+      .toMatchObject({ name: "Project Alpha", description: "notes" });
+    expect(identifierSchema.safeParse("not-a-uuid").success).toBe(false);
+    expect(pageSchema.parse("2")).toBe(2);
+  });
+});

package/templates/fullstack/apps/api/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "rootDir": "src",
+    "outDir": "dist",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "include": ["src"],
+  "exclude": ["tests"]
+}

package/templates/fullstack/apps/api/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    include: ["tests/**/*.test.ts"],
+    restoreMocks: true,
+  },
+});

package/templates/fullstack/apps/web/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#17492f" />
+    <link rel="icon" href="/authenik8-logo.svg" />
+    <title>Authenik8 Workspace</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/fullstack/apps/web/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@authenik8/web",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "test": "vitest run",
+    "typecheck": "tsc -b --pretty false"
+  },
+  "dependencies": {
+    "@authenik8/api-client": "0.1.0",
+    "@authenik8/contracts": "0.1.0",
+    "@authenik8/ui": "0.1.0",
+    "@tanstack/react-query": "^5.90.0",
+    "lucide-react": "^0.468.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "typescript": "^6.0.3",
+    "vite": "^7.2.0",
+    "vitest": "^4.1.8"
+  }
+}

package/templates/fullstack/apps/web/public/authenik8-logo.svg

@@ -0,0 +1,53 @@
+<svg width="680" height="680" viewBox="0 0 680 680" role="img" aria-labelledby="title desc" xmlns="http://www.w3.org/2000/svg">
+  <title id="title">Authenik8 A8 logo</title>
+  <desc id="desc">A geometric Authenik8 mark with interlocked A and 8 forms in a mint green security badge.</desc>
+  <defs>
+    <radialGradient id="badgeFill" cx="50%" cy="42%" r="64%">
+      <stop offset="0" stop-color="#246a43" />
+      <stop offset="1" stop-color="#17492f" />
+    </radialGradient>
+    <filter id="softGlow" x="-18%" y="-18%" width="136%" height="136%">
+      <feGaussianBlur stdDeviation="10" result="blur" />
+      <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.49 0 0 0 0 0.91 0 0 0 0 0.67 0 0 0 0.45 0" result="glow" />
+      <feMerge>
+        <feMergeNode in="glow" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+
+  <g opacity="0.34" fill="#7ce8aa">
+    <circle cx="100" cy="100" r="3.5" />
+    <circle cx="160" cy="100" r="3.5" />
+    <circle cx="220" cy="100" r="3.5" />
+    <circle cx="460" cy="100" r="3.5" />
+    <circle cx="520" cy="100" r="3.5" />
+    <circle cx="580" cy="100" r="3.5" />
+    <circle cx="100" cy="160" r="3.5" />
+    <circle cx="580" cy="160" r="3.5" />
+    <circle cx="100" cy="520" r="3.5" />
+    <circle cx="580" cy="520" r="3.5" />
+    <circle cx="100" cy="580" r="3.5" />
+    <circle cx="160" cy="580" r="3.5" />
+    <circle cx="220" cy="580" r="3.5" />
+    <circle cx="460" cy="580" r="3.5" />
+    <circle cx="520" cy="580" r="3.5" />
+    <circle cx="580" cy="580" r="3.5" />
+  </g>
+
+  <circle cx="340" cy="340" r="280" fill="none" stroke="#7ce8aa" stroke-width="2" stroke-dasharray="8 14" opacity="0.35" />
+
+  <g filter="url(#softGlow)">
+    <circle cx="340" cy="340" r="240" fill="url(#badgeFill)" />
+    <circle cx="340" cy="340" r="240" fill="none" stroke="#39c978" stroke-width="5" />
+    <circle cx="340" cy="340" r="224" fill="none" stroke="#bdf6d4" stroke-width="1.4" opacity="0.28" />
+
+    <polygon points="226 490 262 490 342 260 322 260" fill="#f7fff9" />
+    <polygon points="356 260 336 260 418 490 454 490" fill="#f7fff9" />
+    <rect x="270" y="388" width="98" height="32" rx="5" fill="#f7fff9" />
+
+    <rect x="360" y="262" width="92" height="96" rx="36" fill="#a7dfbf" />
+    <rect x="354" y="362" width="102" height="112" rx="42" fill="#a7dfbf" />
+    <rect x="358" y="349" width="94" height="22" rx="5" fill="#a7dfbf" />
+  </g>
+</svg>

package/templates/fullstack/apps/web/src/App.tsx

@@ -0,0 +1,45 @@
+import { Route, Routes } from "react-router-dom";
+import { AdminRoute, ProtectedRoute } from "./auth/RouteGuards";
+import { AppShell } from "./components/AppShell";
+import { LoginPage } from "./pages/auth/LoginPage";
+import { RegisterPage } from "./pages/auth/RegisterPage";
+import { ForgotPasswordPage, ResetPasswordPage } from "./pages/auth/RecoveryPages";
+import { VerifyEmailPage } from "./pages/auth/VerifyEmailPage";
+import { OAuthCallbackPage } from "./pages/auth/OAuthCallbackPage";
+import { DashboardPage } from "./pages/DashboardPage";
+import { ProjectsPage, ProjectDetailPage, ProjectFormPage } from "./features/projects/ProjectPages";
+import { ProfilePage } from "./pages/settings/ProfilePage";
+import { SecurityPage } from "./pages/settings/SecurityPage";
+import { UsersPage } from "./pages/admin/UsersPage";
+import { AuditPage } from "./pages/admin/AuditPage";
+import { ForbiddenPage, NotFoundPage } from "./pages/StatusPages";
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/register" element={<RegisterPage />} />
+      <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+      <Route path="/reset-password" element={<ResetPasswordPage />} />
+      <Route path="/verify-email" element={<VerifyEmailPage />} />
+      <Route path="/auth/callback" element={<OAuthCallbackPage />} />
+      <Route element={<ProtectedRoute />}>
+        <Route element={<AppShell />}>
+          <Route index element={<DashboardPage />} />
+          <Route path="projects" element={<ProjectsPage />} />
+          <Route path="projects/new" element={<ProjectFormPage />} />
+          <Route path="projects/:id" element={<ProjectDetailPage />} />
+          <Route path="projects/:id/edit" element={<ProjectFormPage />} />
+          <Route path="settings/profile" element={<ProfilePage />} />
+          <Route path="settings/security" element={<SecurityPage />} />
+          <Route path="forbidden" element={<ForbiddenPage />} />
+          <Route element={<AdminRoute />}>
+            <Route path="admin/users" element={<UsersPage />} />
+            <Route path="admin/audit" element={<AuditPage />} />
+          </Route>
+        </Route>
+      </Route>
+      <Route path="*" element={<NotFoundPage />} />
+    </Routes>
+  );
+}

package/templates/fullstack/apps/web/src/auth/AuthProvider.tsx

@@ -0,0 +1,53 @@
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+import type { LoginInput, User } from "@authenik8/contracts";
+import { authApi } from "@authenik8/api-client";
+
+type AuthContextValue = {
+  user: User | null;
+  loading: boolean;
+  login: (input: LoginInput) => Promise<void>;
+  logout: () => Promise<void>;
+  completeOAuth: (code: string) => Promise<void>;
+  setUser: (user: User) => void;
+};
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let active = true;
+    authApi.restore()
+      .then((result) => { if (active) setUser(result?.user ?? null); })
+      .finally(() => { if (active) setLoading(false); });
+    return () => { active = false; };
+  }, []);
+
+  const value = useMemo<AuthContextValue>(() => ({
+    user,
+    loading,
+    async login(input) {
+      const result = await authApi.login(input);
+      setUser(result.user);
+    },
+    async logout() {
+      await authApi.logout();
+      setUser(null);
+    },
+    async completeOAuth(code) {
+      const result = await authApi.exchangeOAuth(code);
+      setUser(result.user);
+    },
+    setUser,
+  }), [user, loading]);
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const value = useContext(AuthContext);
+  if (!value) throw new Error("useAuth must be used inside AuthProvider");
+  return value;
+}

package/templates/fullstack/apps/web/src/auth/RouteGuards.tsx

@@ -0,0 +1,16 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { Spinner } from "@authenik8/ui";
+import { useAuth } from "./AuthProvider";
+
+export function ProtectedRoute() {
+  const { user, loading } = useAuth();
+  const location = useLocation();
+  if (loading) return <div className="screen-loader"><Spinner label="Restoring session" /></div>;
+  if (!user) return <Navigate to="/login" replace state={{ from: location.pathname }} />;
+  return <Outlet />;
+}
+
+export function AdminRoute() {
+  const { user } = useAuth();
+  return user?.role === "ADMIN" ? <Outlet /> : <Navigate to="/forbidden" replace />;
+}

package/templates/fullstack/apps/web/src/auth/providers.ts

@@ -0,0 +1,3 @@
+export type OAuthProvider = "google" | "github";
+
+export const enabledOAuthProviders: readonly OAuthProvider[] = ["google", "github"];

package/templates/fullstack/apps/web/src/components/AppShell.tsx

@@ -0,0 +1,80 @@
+import {
+  Activity,
+  FolderKanban,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  Settings,
+  ShieldCheck,
+  Users,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+import { NavLink, Outlet, useLocation } from "react-router-dom";
+import { Button } from "@authenik8/ui";
+import { useAuth } from "../auth/AuthProvider";
+
+const mainLinks = [
+  { to: "/", label: "Dashboard", icon: LayoutDashboard, end: true },
+  { to: "/projects", label: "Projects", icon: FolderKanban },
+  { to: "/settings/profile", label: "Settings", icon: Settings },
+];
+
+export function AppShell() {
+  const { user, logout } = useAuth();
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+
+  const nav = (
+    <>
+      <NavLink className="brand" to="/" onClick={() => setOpen(false)}>
+        <img src="/authenik8-logo.svg" alt="" />
+        <span>Authenik8 <small>Workspace</small></span>
+      </NavLink>
+      <nav className="side-nav" aria-label="Primary navigation">
+        <p className="nav-label">Workspace</p>
+        {mainLinks.map(({ icon: Icon, ...link }) => (
+          <NavLink key={link.to} to={link.to} end={link.end} onClick={() => setOpen(false)}>
+            <Icon size={18} /> <span>{link.label}</span>
+          </NavLink>
+        ))}
+        {user?.role === "ADMIN" && (
+          <>
+            <p className="nav-label">Administration</p>
+            <NavLink to="/admin/users" onClick={() => setOpen(false)}><Users size={18} /> <span>Users</span></NavLink>
+            <NavLink to="/admin/audit" onClick={() => setOpen(false)}><Activity size={18} /> <span>Audit trail</span></NavLink>
+          </>
+        )}
+      </nav>
+      <div className="sidebar-account">
+        <div className="avatar">{user?.name.slice(0, 2).toUpperCase()}</div>
+        <div><strong>{user?.name}</strong><span>{user?.email}</span></div>
+      </div>
+    </>
+  );
+
+  return (
+    <div className="app-layout">
+      <aside className="sidebar">{nav}</aside>
+      {open && <div className="mobile-scrim" onClick={() => setOpen(false)} />}
+      <aside className={`mobile-sidebar ${open ? "is-open" : ""}`} aria-hidden={!open}>{nav}</aside>
+      <div className="app-main">
+        <header className="topbar">
+          <Button className="icon-button menu-button" variant="ghost" onClick={() => setOpen(!open)} aria-label={open ? "Close navigation" : "Open navigation"} title={open ? "Close navigation" : "Open navigation"}>
+            {open ? <X size={20} /> : <Menu size={20} />}
+          </Button>
+          <div className="breadcrumb"><ShieldCheck size={17} /><span>{titleForPath(location.pathname)}</span></div>
+          <Button className="icon-button" variant="ghost" onClick={() => void logout()} aria-label="Sign out" title="Sign out"><LogOut size={19} /></Button>
+        </header>
+        <main className="page"><Outlet /></main>
+      </div>
+    </div>
+  );
+}
+
+function titleForPath(pathname: string) {
+  if (pathname.startsWith("/projects")) return "Projects";
+  if (pathname.startsWith("/settings")) return "Account settings";
+  if (pathname.startsWith("/admin")) return "Administration";
+  return "Dashboard";
+}

package/templates/fullstack/apps/web/src/components/AuthShell.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+
+export function AuthShell({ title, subtitle, children, footer }: { title: string; subtitle: string; children: ReactNode; footer: ReactNode }) {
+  return (
+    <main className="auth-layout">
+      <section className="auth-brand-panel">
+        <Link className="brand" to="/"><img src="/authenik8-logo.svg" alt="" /><span>Authenik8 <small>Workspace</small></span></Link>
+        <div className="auth-brand-copy">
+          <img className="auth-logo" src="/authenik8-logo.svg" alt="Authenik8" />
+          <span className="security-mark">A8 / IDENTITY</span>
+          <h1>Secure product foundations, already connected.</h1>
+          <p>One application boundary from browser session to owned data.</p>
+        </div>
+        <div className="auth-signal"><span className="signal-dot" /> Identity services operational</div>
+      </section>
+      <section className="auth-form-panel">
+        <div className="auth-form-wrap">
+          <header><h2>{title}</h2><p>{subtitle}</p></header>
+          {children}
+          <footer>{footer}</footer>
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/fullstack/apps/web/src/components/Page.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { AlertTriangle, CheckCircle2 } from "lucide-react";
+import { ApiError } from "@authenik8/api-client";
+
+export function PageHeader({ title, description, action }: { title: string; description?: string; action?: ReactNode }) {
+  return (
+    <header className="page-header">
+      <div><h1>{title}</h1>{description && <p>{description}</p>}</div>
+      {action && <div className="page-actions">{action}</div>}
+    </header>
+  );
+}
+
+export function ErrorNotice({ error }: { error: unknown }) {
+  const fieldMessage = error instanceof ApiError
+    ? Object.values(error.fields ?? {}).flat()[0]
+    : undefined;
+  const message = error instanceof ApiError
+    ? fieldMessage ?? error.message
+    : "Something went wrong. Try again.";
+  return <div className="notice notice-error" role="alert"><AlertTriangle size={17} /><span>{message}</span></div>;
+}
+
+export function SuccessNotice({ children }: { children: ReactNode }) {
+  return <div className="notice notice-success" role="status"><CheckCircle2 size={17} /><span>{children}</span></div>;
+}
+
+export function Field({ label, htmlFor, error, children }: { label: string; htmlFor: string; error?: string; children: ReactNode }) {
+  return <label className="field" htmlFor={htmlFor}><span>{label}</span>{children}{error && <small>{error}</small>}</label>;
+}

package/templates/fullstack/apps/web/src/features/projects/ProjectPages.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState, type FormEvent } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ArrowLeft, Edit3, FolderKanban, Plus, Save, Trash2 } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Badge, Button, EmptyState, Input, Spinner } from "@authenik8/ui";
+import { projectApi } from "@authenik8/api-client";
+import type { ProjectStatus } from "@authenik8/contracts";
+import { ErrorNotice, Field, PageHeader } from "../../components/Page";
+
+export function ProjectsPage() {
+  const query = useQuery({ queryKey: ["projects"], queryFn: projectApi.list });
+  return (
+    <>
+      <PageHeader title="Projects" description="Owned work in this workspace." action={<Link className="button button-primary" to="/projects/new"><Plus size={17} /> New project</Link>} />
+      <section className="panel">
+        {query.isPending ? <div className="panel-loading"><Spinner /></div> : query.error ? <ErrorNotice error={query.error} /> : query.data!.projects.length === 0 ? (
+          <EmptyState icon={<FolderKanban />} title="No projects found" action={<Link className="button button-primary" to="/projects/new">Create project</Link>}>Projects you create will appear here.</EmptyState>
+        ) : <div className="table-wrap"><table><thead><tr><th>Project</th><th>Status</th><th>Created</th><th>Updated</th><th><span className="sr-only">Actions</span></th></tr></thead><tbody>
+          {query.data!.projects.map((project) => <tr key={project.id}><td><Link className="table-link" to={`/projects/${project.id}`}>{project.name}</Link><small className="table-subtitle">{project.description || "No description"}</small></td><td><Badge tone={project.status === "ACTIVE" ? "success" : project.status === "ARCHIVED" ? "neutral" : "warning"}>{project.status}</Badge></td><td>{formatDate(project.createdAt)}</td><td>{formatDate(project.updatedAt)}</td><td><Link className="icon-link" to={`/projects/${project.id}/edit`} aria-label={`Edit ${project.name}`} title="Edit project"><Edit3 size={17} /></Link></td></tr>)}
+        </tbody></table></div>}
+      </section>
+    </>
+  );
+}
+
+export function ProjectFormPage() {
+  const { id } = useParams();
+  const edit = Boolean(id);
+  const navigate = useNavigate();
+  const client = useQueryClient();
+  const project = useQuery({ queryKey: ["project", id], queryFn: () => projectApi.get(id!), enabled: edit });
+  const [form, setForm] = useState<{ name: string; description: string; status: ProjectStatus }>({ name: "", description: "", status: "DRAFT" });
+  useEffect(() => { if (project.data) setForm(project.data.project); }, [project.data]);
+  const mutation = useMutation({
+    mutationFn: () => edit ? projectApi.update(id!, form) : projectApi.create(form),
+    onSuccess: async ({ project: saved }) => {
+      await client.invalidateQueries({ queryKey: ["projects"] });
+      navigate(`/projects/${saved.id}`);
+    },
+  });
+  function submit(event: FormEvent) { event.preventDefault(); mutation.mutate(); }
+  if (edit && project.isPending) return <div className="screen-loader"><Spinner /></div>;
+  return (
+    <>
+      <PageHeader title={edit ? "Edit project" : "Create project"} description="Define the project details and lifecycle state." />
+      <form className="form-panel" onSubmit={submit}>
+        {mutation.error && <ErrorNotice error={mutation.error} />}
+        <Field label="Project name" htmlFor="project-name"><Input id="project-name" value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} maxLength={120} required /></Field>
+        <Field label="Description" htmlFor="description"><textarea id="description" className="input textarea" value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} maxLength={2000} rows={6} /></Field>
+        <Field label="Status" htmlFor="status"><select id="status" className="input" value={form.status} onChange={(event) => setForm({ ...form, status: event.target.value as ProjectStatus })}><option value="DRAFT">Draft</option><option value="ACTIVE">Active</option><option value="ARCHIVED">Archived</option></select></Field>
+        <div className="form-actions"><Button type="button" variant="secondary" onClick={() => navigate(-1)}>Cancel</Button><Button type="submit" disabled={mutation.isPending}><Save size={17} /> {mutation.isPending ? "Saving..." : "Save project"}</Button></div>
+      </form>
+    </>
+  );
+}
+
+export function ProjectDetailPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const client = useQueryClient();
+  const query = useQuery({ queryKey: ["project", id], queryFn: () => projectApi.get(id!) });
+  const remove = useMutation({ mutationFn: () => projectApi.remove(id!), onSuccess: async () => { await client.invalidateQueries({ queryKey: ["projects"] }); navigate("/projects"); } });
+  if (query.isPending) return <div className="screen-loader"><Spinner /></div>;
+  if (query.error) return <ErrorNotice error={query.error} />;
+  const project = query.data!.project;
+  return (
+    <>
+      <Link className="back-link" to="/projects"><ArrowLeft size={15} /> Projects</Link>
+      <PageHeader title={project.name} description={`Created ${formatDate(project.createdAt)}`} action={<div className="action-row"><Link className="button button-secondary" to={`/projects/${project.id}/edit`}><Edit3 size={17} /> Edit</Link><Button variant="danger" onClick={() => { if (window.confirm("Delete this project permanently?")) remove.mutate(); }}><Trash2 size={17} /> Delete</Button></div>} />
+      {remove.error && <ErrorNotice error={remove.error} />}
+      <section className="detail-grid">
+        <div className="detail-main"><p className="detail-label">Description</p><p>{project.description || "No description has been added."}</p></div>
+        <dl className="detail-meta"><div><dt>Status</dt><dd><Badge tone={project.status === "ACTIVE" ? "success" : "neutral"}>{project.status}</Badge></dd></div><div><dt>Last updated</dt><dd>{formatDate(project.updatedAt)}</dd></div><div><dt>Owner ID</dt><dd><code>{project.ownerId}</code></dd></div></dl>
+      </section>
+    </>
+  );
+}
+
+const formatDate = (value: string) => new Date(value).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });

package/templates/fullstack/apps/web/src/main.tsx

@@ -0,0 +1,24 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./auth/AuthProvider";
+import { App } from "./App";
+import "./styles.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 20_000, retry: 1, refetchOnWindowFocus: false },
+    mutations: { retry: 0 },
+  },
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AuthProvider><App /></AuthProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  </StrictMode>,
+);