({
+ resolver: zodResolver(schema),
+ defaultValues: { email: '', password: '' },
+ });
+
+ const onSubmit = handleSubmit(async (values) => {
+ setServerError(null);
+ try {
+ await login(values.email, values.password);
+ await navigate({ to: search.redirect ?? '/dashboard' });
+ } catch (err) {
+ if (err instanceof ProblemDetailsError && err.status === 401) {
+ setServerError(t('login.errors.invalidCredentials'));
+ } else if (err instanceof NetworkError) {
+ setServerError(t('errors.network'));
+ } else {
+ setServerError(t('login.errors.generic'));
+ }
+ }
+ });
+
+ return (
+
+
+
+ {t('login.title')}
+ {t('login.subtitle')}
+
+
+
+
+
+
+
+
+ {t('common.appName')} β Setup
+
+
+ Coming soon.
+
+
+
+
+ {t('nav.users')}
+
+
Coming soon.
+
+
+
+ );
+}
+
+/**
+ * Wrap a per-feature page in a lazy boundary so Vite emits a separate chunk
+ * (NFR-U1-01 / Q1-A). The auth/root shell and login stay eager for fast paint.
+ */
+function lazyPage>(
+ factory: () => Promise<{ [key: string]: ComponentType
}>,
+ exportName: string,
+) {
+ const Loaded = lazy(() => factory().then((module) => ({ default: module[exportName] })));
+ return function LazyRouteComponent() {
+ return (
+ }>
+
+
+ );
+ };
+}
+
+const rootRoute = createRootRouteWithContext()({
+ component: () => ,
+});
+
+// '/' redirects into the protected area; the guard sends guests to /login.
+const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ beforeLoad: () => {
+ throw redirect({ to: '/dashboard' });
+ },
+});
+
+const loginRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/login',
+ validateSearch: (search: Record): { redirect?: string } => ({
+ redirect: typeof search.redirect === 'string' ? search.redirect : undefined,
+ }),
+ // Authenticated users never see /login (BR-U1-06).
+ beforeLoad: ({ context }) => {
+ if (context.auth.isAuthenticated) {
+ throw redirect({ to: '/dashboard' });
+ }
+ },
+ component: LoginPage,
+});
+
+const setupRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/setup',
+ component: lazyPage(() => import('@/pages/SetupPage'), 'SetupPage'),
+});
+
+// Layout route guarding every protected page (BR-U1-05).
+const authenticatedRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ id: '_authenticated',
+ beforeLoad: ({ context, location }) => {
+ if (!context.auth.isAuthenticated) {
+ throw redirect({ to: '/login', search: { redirect: location.href } });
+ }
+ },
+ component: AppLayout,
+});
+
+const dashboardRoute = createRoute({
+ getParentRoute: () => authenticatedRoute,
+ path: '/dashboard',
+ component: lazyPage(() => import('@/pages/DashboardPage'), 'DashboardPage'),
+});
+
+const usersRoute = createRoute({
+ getParentRoute: () => authenticatedRoute,
+ path: '/users',
+ component: lazyPage(() => import('@/pages/UsersPage'), 'UsersPage'),
+});
+
+const cmsRoute = createRoute({
+ getParentRoute: () => authenticatedRoute,
+ path: '/cms',
+ component: lazyPage(() => import('@/pages/CmsPage'), 'CmsPage'),
+});
+
+export const routeTree = rootRoute.addChildren([
+ indexRoute,
+ loginRoute,
+ setupRoute,
+ authenticatedRoute.addChildren([dashboardRoute, usersRoute, cmsRoute]),
+]);
+
+export const router = createRouter({
+ routeTree,
+ defaultPreload: 'intent',
+ // Real auth is injected per render via RouterProvider's `context` prop.
+ context: { auth: undefined as unknown as AuthContextValue },
+});
+
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
diff --git a/frontend/src/test/RouteGuard.test.tsx b/frontend/src/test/RouteGuard.test.tsx
new file mode 100644
index 0000000..615d149
--- /dev/null
+++ b/frontend/src/test/RouteGuard.test.tsx
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { screen } from '@testing-library/react';
+import { renderApp, mockAuthenticated, mockGuest } from '@/test/utils';
+
+describe('Route guards (BR-U1-05, BR-U1-06)', () => {
+ it('redirects an unauthenticated user from a protected route to /login', async () => {
+ mockGuest();
+ renderApp('/dashboard');
+
+ expect(await screen.findByTestId('login-form-submit-button')).toBeInTheDocument();
+ expect(screen.queryByTestId('dashboard-title')).not.toBeInTheDocument();
+ });
+
+ it('allows an authenticated user to reach a protected route', async () => {
+ mockAuthenticated();
+ renderApp('/dashboard');
+
+ expect(await screen.findByTestId('dashboard-title')).toBeInTheDocument();
+ });
+
+ it('redirects an authenticated user away from /login to the dashboard', async () => {
+ mockAuthenticated();
+ renderApp('/login');
+
+ expect(await screen.findByTestId('dashboard-title')).toBeInTheDocument();
+ expect(screen.queryByTestId('login-form-submit-button')).not.toBeInTheDocument();
+ });
+});
diff --git a/frontend/src/test/setup.ts b/frontend/src/test/setup.ts
new file mode 100644
index 0000000..a9005c9
--- /dev/null
+++ b/frontend/src/test/setup.ts
@@ -0,0 +1,45 @@
+import '@testing-library/jest-dom/vitest';
+import { afterAll, afterEach, beforeAll, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import { server } from '@/mocks/server';
+import { api } from '@/lib/api-client';
+import '@/i18n/config';
+
+// jsdom is missing a few browser APIs that Radix/sonner touch.
+const globalAny = globalThis as unknown as {
+ matchMedia?: unknown;
+ ResizeObserver?: unknown;
+};
+
+if (typeof globalAny.matchMedia === 'undefined') {
+ globalAny.matchMedia = vi.fn().mockImplementation((query: string) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ }));
+}
+
+if (typeof globalAny.ResizeObserver === 'undefined') {
+ globalAny.ResizeObserver = class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ };
+}
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+
+afterEach(() => {
+ cleanup();
+ server.resetHandlers();
+ // Reset shared client state between tests.
+ api.setAccessToken(null);
+ localStorage.clear();
+});
+
+afterAll(() => server.close());
diff --git a/frontend/src/test/utils.tsx b/frontend/src/test/utils.tsx
new file mode 100644
index 0000000..9664331
--- /dev/null
+++ b/frontend/src/test/utils.tsx
@@ -0,0 +1,64 @@
+/* eslint-disable react-refresh/only-export-components */
+import { useState, type ReactElement } from 'react';
+import { render } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { createMemoryHistory, createRouter, RouterProvider } from '@tanstack/react-router';
+import { I18nextProvider } from 'react-i18next';
+import { AuthProvider } from '@/contexts/AuthProvider';
+import { useAuth } from '@/contexts/auth-context';
+import { routeTree } from '@/router';
+import { server } from '@/mocks/server';
+import { API_BASE, makeAuthResponse } from '@/mocks/auth/fixtures';
+import i18n from '@/i18n/config';
+
+/** Force the silent-refresh-on-mount to fail, leaving the app in guest state. */
+export function mockGuest(): void {
+ server.use(
+ http.post(`${API_BASE}/api/v1/auth/refresh`, () =>
+ HttpResponse.json({ status: 401, title: 'Unauthorized' }, { status: 401 }),
+ ),
+ );
+}
+
+/** Force the silent-refresh-on-mount to succeed, leaving the app authenticated. */
+export function mockAuthenticated(): void {
+ server.use(
+ http.post(`${API_BASE}/api/v1/auth/refresh`, () => HttpResponse.json(makeAuthResponse())),
+ );
+}
+
+/** Render an arbitrary element wrapped in the i18n + auth providers. */
+export function renderWithProviders(ui: ReactElement) {
+ return render(
+
+ {ui}
+ ,
+ );
+}
+
+function AppHarness({ initialPath }: { initialPath: string }) {
+ const auth = useAuth();
+ const [router] = useState(() =>
+ createRouter({
+ routeTree,
+ history: createMemoryHistory({ initialEntries: [initialPath] }),
+ context: { auth },
+ }),
+ );
+
+ if (auth.status === 'loading') {
+ return null;
+ }
+ return ;
+}
+
+/** Render the full application router at a given path, inside all providers. */
+export function renderApp(initialPath = '/') {
+ return render(
+
+
+
+
+ ,
+ );
+}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..534d52c
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,13 @@
+///
+
+interface ImportMetaEnv {
+ /** Base URL of the SlpModularCms .NET API (e.g. http://localhost:5000). */
+ readonly VITE_API_BASE_URL: string;
+ /** Set to 'true' to run the MSW mock backend in the browser during dev. */
+ readonly VITE_ENABLE_MSW?: string;
+ // Add future typed env flags here.
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 0000000..29720d2
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,31 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM", "DOM.Iterable"],
+ "module": "esnext",
+ "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Path aliases (resolved relative to this config file) */
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..d3c52ea
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "module": "esnext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..39e8ac2
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,36 @@
+///
+import path from 'node:path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
+ server: {
+ port: 5173,
+ },
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: ['./src/test/setup.ts'],
+ css: true,
+ coverage: {
+ provider: 'v8',
+ reporter: ['text', 'html'],
+ include: ['src/**/*.{ts,tsx}'],
+ exclude: [
+ 'src/**/*.test.{ts,tsx}',
+ 'src/test/**',
+ 'src/mocks/**',
+ 'src/main.tsx',
+ 'src/vite-env.d.ts',
+ ],
+ },
+ },
+});