create-authenik8-app 2.4.14 → 2.4.15

package/templates/fullstack/apps/api/prisma/migrations/20260721000000_init/migration.sql

@@ -0,0 +1,163 @@
+-- CreateEnum
+CREATE TYPE "Role" AS ENUM ('USER', 'ADMIN');
+
+-- CreateEnum
+CREATE TYPE "UserStatus" AS ENUM ('ACTIVE', 'SUSPENDED');
+
+-- CreateEnum
+CREATE TYPE "ProjectStatus" AS ENUM ('DRAFT', 'ACTIVE', 'ARCHIVED');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "passwordHash" TEXT,
+    "name" TEXT NOT NULL,
+    "role" "Role" NOT NULL DEFAULT 'USER',
+    "status" "UserStatus" NOT NULL DEFAULT 'ACTIVE',
+    "emailVerifiedAt" TIMESTAMP(3),
+    "passwordUpdatedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "OAuthAccount" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "provider" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "providerEmail" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "OAuthAccount_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "coreSessionId" TEXT NOT NULL,
+    "refreshHash" TEXT NOT NULL,
+    "userAgent" TEXT NOT NULL,
+    "ipAddress" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "lastUsedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "revokedAt" TIMESTAMP(3),
+
+    CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Project" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT NOT NULL DEFAULT '',
+    "status" "ProjectStatus" NOT NULL DEFAULT 'DRAFT',
+    "ownerId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Project_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PasswordResetToken" (
+    "id" TEXT NOT NULL,
+    "tokenHash" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "usedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "PasswordResetToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EmailVerificationToken" (
+    "id" TEXT NOT NULL,
+    "tokenHash" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "usedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "EmailVerificationToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "AuditEvent" (
+    "id" TEXT NOT NULL,
+    "actorId" TEXT,
+    "action" TEXT NOT NULL,
+    "targetType" TEXT NOT NULL,
+    "targetId" TEXT,
+    "metadata" JSONB,
+    "ipAddress" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "AuditEvent_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OAuthAccount_provider_providerAccountId_key" ON "OAuthAccount"("provider", "providerAccountId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OAuthAccount_userId_provider_key" ON "OAuthAccount"("userId", "provider");
+
+-- CreateIndex
+CREATE INDEX "OAuthAccount_userId_idx" ON "OAuthAccount"("userId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_coreSessionId_key" ON "Session"("coreSessionId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_refreshHash_key" ON "Session"("refreshHash");
+
+-- CreateIndex
+CREATE INDEX "Session_userId_revokedAt_idx" ON "Session"("userId", "revokedAt");
+
+-- CreateIndex
+CREATE INDEX "Project_ownerId_updatedAt_idx" ON "Project"("ownerId", "updatedAt");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PasswordResetToken_tokenHash_key" ON "PasswordResetToken"("tokenHash");
+
+-- CreateIndex
+CREATE INDEX "PasswordResetToken_userId_expiresAt_idx" ON "PasswordResetToken"("userId", "expiresAt");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "EmailVerificationToken_tokenHash_key" ON "EmailVerificationToken"("tokenHash");
+
+-- CreateIndex
+CREATE INDEX "EmailVerificationToken_userId_expiresAt_idx" ON "EmailVerificationToken"("userId", "expiresAt");
+
+-- CreateIndex
+CREATE INDEX "AuditEvent_createdAt_idx" ON "AuditEvent"("createdAt");
+
+-- CreateIndex
+CREATE INDEX "AuditEvent_actorId_idx" ON "AuditEvent"("actorId");
+
+-- AddForeignKey
+ALTER TABLE "OAuthAccount" ADD CONSTRAINT "OAuthAccount_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Project" ADD CONSTRAINT "Project_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PasswordResetToken" ADD CONSTRAINT "PasswordResetToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EmailVerificationToken" ADD CONSTRAINT "EmailVerificationToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "AuditEvent" ADD CONSTRAINT "AuditEvent_actorId_fkey" FOREIGN KEY ("actorId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

package/templates/fullstack/apps/api/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added to your version-control system
+provider = "postgresql"

package/templates/fullstack/apps/api/src/auth/authenik8.ts

@@ -1,11 +1,20 @@
 import { createAuthenik8 } from "authenik8-core";
 import { Redis } from "ioredis";
+import RedisMock from "ioredis-mock";
 import { env } from "../config/env.js";
 
-export const redis = new Redis(env.REDIS_URL, {
-  maxRetriesPerRequest: 2,
-  enableReadyCheck: true,
-});
+function createRedisClient(): Redis {
+  if (env.REDIS_URL === "memory://") {
+    return new RedisMock() as unknown as Redis;
+  }
+
+  return new Redis(env.REDIS_URL, {
+    maxRetriesPerRequest: 2,
+    enableReadyCheck: true,
+  });
+}
+
+export const redis = createRedisClient();
 
 type AuthInstance = Awaited<ReturnType<typeof createAuthenik8>>;
 let instance: AuthInstance | undefined;

package/templates/fullstack/apps/api/src/config/env.ts

@@ -43,7 +43,7 @@ const schema = z.object({
   PORT: z.coerce.number().int().positive().default(3000),
   WEB_ORIGIN: z.string().url().default("http://localhost:5173"),
   DATABASE_URL: z.string().min(1),
-  REDIS_URL: z.string().min(1).default("redis://localhost:6379"),
+  REDIS_URL: z.string().min(1).default("memory://"),
   AUTHENIK8_SIGNING_JWKS: signingJwks,
   AUTHENIK8_ACTIVE_KID: z.string().min(1),
   AUTHENIK8_ISSUER: z.string().url(),
@@ -61,6 +61,14 @@ const schema = z.object({
   GITHUB_CLIENT_ID: z.string().optional(),
   GITHUB_CLIENT_SECRET: z.string().optional(),
   GITHUB_REDIRECT_URI: z.string().url().optional().or(z.literal("")),
+}).superRefine((environment, context) => {
+  if (environment.NODE_ENV === "production" && environment.REDIS_URL === "memory://") {
+    context.addIssue({
+      code: "custom",
+      path: ["REDIS_URL"],
+      message: "must use redis:// or rediss:// in production",
+    });
+  }
 });
 
 const result = schema.safeParse(process.env);

package/templates/fullstack/apps/api/src/config/logger.ts

@@ -1,17 +1,27 @@
-import pino from "pino";
+import pino, { type DestinationStream, type LoggerOptions } from "pino";
 import { env } from "./env.js";
 
-export const logger = pino({
+export const redactedLogPaths = [
+  "req.headers.authorization",
+  "req.headers.cookie",
+  'req.headers["x-csrf-token"]',
+  'res.headers["set-cookie"]',
+  "password",
+  "passwordHash",
+  "accessToken",
+  "refreshToken",
+];
+
+const loggerOptions: LoggerOptions = {
   level: env.LOG_LEVEL,
   redact: {
-    paths: [
-      "req.headers.authorization",
-      "req.headers.cookie",
-      "password",
-      "passwordHash",
-      "accessToken",
-      "refreshToken",
-    ],
+    paths: redactedLogPaths,
     censor: "[REDACTED]",
   },
-});
+};
+
+export function createLogger(destination?: DestinationStream) {
+  return destination ? pino(loggerOptions, destination) : pino(loggerOptions);
+}
+
+export const logger = createLogger();

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

@@ -0,0 +1,43 @@
+import { Writable } from "node:stream";
+import express from "express";
+import { pinoHttp } from "pino-http";
+import request from "supertest";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("../src/config/env.js", () => ({
+  env: { LOG_LEVEL: "info" },
+}));
+
+import { createLogger } from "../src/config/logger.js";
+
+describe("HTTP log redaction", () => {
+  it("does not record bearer, CSRF, or cookie credentials", async () => {
+    let output = "";
+    const destination = new Writable({
+      write(chunk, _encoding, callback) {
+        output += chunk.toString();
+        callback();
+      },
+    });
+    const app = express();
+
+    app.use(pinoHttp({ logger: createLogger(destination) }));
+    app.get("/session", (_req, res) => {
+      res.cookie("authenik8_refresh", "sealed-refresh-secret", { httpOnly: true });
+      res.sendStatus(204);
+    });
+
+    await request(app)
+      .get("/session")
+      .set("authorization", "Bearer access-secret")
+      .set("cookie", "authenik8_refresh=incoming-cookie-secret")
+      .set("x-csrf-token", "csrf-secret")
+      .expect(204);
+
+    expect(output).toContain("[REDACTED]");
+    expect(output).not.toContain("access-secret");
+    expect(output).not.toContain("incoming-cookie-secret");
+    expect(output).not.toContain("csrf-secret");
+    expect(output).not.toContain("sealed-refresh-secret");
+  });
+});

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

@@ -10,6 +10,8 @@
     "typecheck": "tsc -b --pretty false"
   },
   "dependencies": {
+    "@astryxdesign/core": "0.1.7",
+    "@astryxdesign/theme-neutral": "0.1.7",
     "@authenik8/api-client": "0.1.0",
     "@authenik8/contracts": "0.1.0",
     "@authenik8/ui": "0.1.0",
@@ -17,7 +19,7 @@
     "lucide-react": "^0.468.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-router-dom": "^7.9.0"
+    "react-router": "8.3.0"
   },
   "devDependencies": {
     "@types/node": "^25.0.0",

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

@@ -1,4 +1,4 @@
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import { AdminRoute, ProtectedRoute } from "./auth/RouteGuards";
 import { AppShell } from "./components/AppShell";
 import { LoginPage } from "./pages/auth/LoginPage";

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

@@ -1,4 +1,4 @@
-import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router";
 import { Spinner } from "@authenik8/ui";
 import { useAuth } from "./AuthProvider";
 

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

@@ -3,15 +3,16 @@ import {
   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 { AppShell as AstryxAppShell } from "@astryxdesign/core/AppShell";
+import { Avatar } from "@astryxdesign/core/Avatar";
+import { Button } from "@astryxdesign/core/Button";
+import { SideNav, SideNavItem, SideNavSection } from "@astryxdesign/core/SideNav";
+import { TopNav, TopNavHeading } from "@astryxdesign/core/TopNav";
+import { Outlet, useLocation, useNavigate } from "react-router";
 import { useAuth } from "../auth/AuthProvider";
 
 const mainLinks = [
@@ -22,53 +23,97 @@ const mainLinks = [
 
 export function AppShell() {
   const { user, logout } = useAuth();
-  const [open, setOpen] = useState(false);
   const location = useLocation();
+  const navigate = useNavigate();
 
-  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>
+  const navigateTo = (path: string) => () => navigate(path);
+  const isSelected = (path: string, exact = false) =>
+    exact ? location.pathname === path : location.pathname.startsWith(path);
+
+  const sideNav = (
+    <SideNav
+      className="workspace-sidebar"
+      footer={
+        <div className="sidebar-account">
+          <Avatar name={user?.name} size="medium" />
+          <div>
+            <strong>{user?.name}</strong>
+            <span>{user?.email}</span>
+          </div>
+        </div>
+      }
+    >
+      <SideNavSection title="Workspace">
         {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>
+          <SideNavItem
+            key={link.to}
+            label={link.label}
+            icon={<Icon size={18} />}
+            isSelected={isSelected(link.to, link.end)}
+            onClick={navigateTo(link.to)}
+          />
         ))}
-        {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>
-    </>
+      </SideNavSection>
+      {user?.role === "ADMIN" && (
+        <SideNavSection title="Administration">
+          <SideNavItem
+            label="Users"
+            icon={<Users size={18} />}
+            isSelected={isSelected("/admin/users")}
+            onClick={navigateTo("/admin/users")}
+          />
+          <SideNavItem
+            label="Audit trail"
+            icon={<Activity size={18} />}
+            isSelected={isSelected("/admin/audit")}
+            onClick={navigateTo("/admin/audit")}
+          />
+        </SideNavSection>
+      )}
+    </SideNav>
+  );
+
+  const topNav = (
+    <TopNav
+      className="workspace-topbar"
+      label="Workspace navigation"
+      heading={
+        <TopNavHeading
+          logo={<img className="brand-logo" src="/authenik8-logo.svg" alt="" />}
+          heading="Authenik8"
+          subheading="Workspace"
+        />
+      }
+      startContent={
+        <div className="current-section">
+          <ShieldCheck size={16} aria-hidden="true" />
+          <span>{titleForPath(location.pathname)}</span>
+        </div>
+      }
+      endContent={
+        <Button
+          label="Sign out"
+          variant="ghost"
+          size="sm"
+          icon={<LogOut size={17} />}
+          onClick={() => void logout()}
+        />
+      }
+    />
   );
 
   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>
+    <AstryxAppShell
+      className="workspace-shell"
+      variant="elevated"
+      height="fill"
+      contentPadding={0}
+      mobileNav={{ breakpoint: "md" }}
+      topNav={topNav}
+      sideNav={sideNav}
+    >
+      <div className="page"><Outlet /></div>
+    </AstryxAppShell>
   );
 }
 

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

@@ -1,11 +1,12 @@
 import type { ReactNode } from "react";
-import { Link } from "react-router-dom";
+import { Card } from "@astryxdesign/core/Card";
+import { Link } from "react-router";
 
 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>
+        <Link className="auth-top-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>
@@ -15,11 +16,13 @@ export function AuthShell({ title, subtitle, children, footer }: { title: string
         <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>
+        <Card padding={0} className="auth-form-card">
+          <div className="auth-form-wrap">
+            <header><h2>{title}</h2><p>{subtitle}</p></header>
+            {children}
+            <footer>{footer}</footer>
+          </div>
+        </Card>
       </section>
     </main>
   );

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

@@ -11,14 +11,17 @@ export function PageHeader({ title, description, action }: { title: string; desc
   );
 }
 
-export function ErrorNotice({ error }: { error: unknown }) {
+export function getErrorMessage(error: unknown) {
   const fieldMessage = error instanceof ApiError
     ? Object.values(error.fields ?? {}).flat()[0]
     : undefined;
-  const message = error instanceof ApiError
+  return 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 ErrorNotice({ error }: { error: unknown }) {
+  return <div className="notice notice-error" role="alert"><AlertTriangle size={17} /><span>{getErrorMessage(error)}</span></div>;
 }
 
 export function SuccessNotice({ children }: { children: ReactNode }) {

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

@@ -1,7 +1,7 @@
 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 { Link, useNavigate, useParams } from "react-router";
 import { Badge, Button, EmptyState, Input, Spinner } from "@authenik8/ui";
 import { projectApi } from "@authenik8/api-client";
 import type { ProjectStatus } from "@authenik8/contracts";

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

@@ -1,9 +1,14 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
+import { Theme } from "@astryxdesign/core/theme";
+import { neutralTheme } from "@astryxdesign/theme-neutral/built";
 import { AuthProvider } from "./auth/AuthProvider";
 import { App } from "./App";
+import "@astryxdesign/core/reset.css";
+import "@astryxdesign/core/astryx.css";
+import "@astryxdesign/theme-neutral/theme.css";
 import "./styles.css";
 
 const queryClient = new QueryClient({
@@ -15,10 +20,12 @@ const queryClient = new QueryClient({
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <AuthProvider><App /></AuthProvider>
-      </BrowserRouter>
-    </QueryClientProvider>
+    <Theme theme={neutralTheme} mode="light">
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <AuthProvider><App /></AuthProvider>
+        </BrowserRouter>
+      </QueryClientProvider>
+    </Theme>
   </StrictMode>,
 );