Frontend

Frontend

Tech-Stack

• React 19 + TanStack Start (SSR via Nitro)
• TanStack Router (File-based Routing)
• TanStack Query (React Query)
• Mantine 8 (Component Library)
• Tailwind CSS 4
• React Hook Form + Zod
• i18next (Deutsch als primaere Sprache)

BFF-Pattern (Frontend → Backend)

Request-Kette

Browser → Cloudflare → TanStack Start (SSR) → Go Backend

Browser kommuniziert NIE direkt mit dem Go-Backend. Alle API-Calls laufen serverseitig ueber TanStack Start Server Functions.

Header-Weiterleitung

Cloudflare-Header	X-Header ans Backend	Inhalt
Cf-Connecting-Ip	X-Client-Ip	Echte Client-IP
Cf-Ipcountry	X-Client-Ip-Country	Laendercode
Cf-Ray	X-Client-Ray-Id	Trace-ID
Browser User-Agent	X-User-Agent	Browser UA

Cookie-Forwarding

Server Functions leiten Set-Cookie Headers vom Backend an den Browser weiter und lesen Browser-Cookies fuer Backend-Requests.

Implementierte Routen

Route	Beschreibung
/_auth/login	Login-Formular
/_auth/verify-2fa	2FA-Code Eingabe
/_auth/reset-password	Password-Reset (oeffentlich)
/_app/	Dashboard (Shell)
/_app/account/profile	Profil bearbeiten
/_app/account/password	Passwort aendern
/_app/account/sessions	Sessions verwalten
/_app/team	Team-Verwaltung
/_app/team/create	Account anlegen

Server Functions

Auth (api/auth.ts)

• login() — POST /api/public/auth/login
• verify2fa() — POST /api/public/auth/verify-2fa
• getSession() — GET /api/public/auth/session
• logout() — POST /api/protected/auth/logout

Zod-Schemas (lib/schemas.ts)

• loginRequestSchema — email + password
• loginResponseSchema — session_id oder attempt_id + two_fa_required
• verify2faRequestSchema — attempt_id + code
• sessionResponseSchema — account_id, display_name, role, tenant_id