feat(auth): better-auth mit passwort, passkeys und app-shell

Registrierung des ersten Nutzers macht ihn zum Administrator, danach ist die Registrierung geschlossen (Einladungen folgen in Phase 2). Login per Passwort oder Passkey inklusive Conditional UI, Verwaltung der Passkeys unter "Konto" mit Umbenennen und Loeschen. Rate-Limiting liegt in der Datenbank und ueberlebt Neustarts; Session-Cookies sind httpOnly, sameSite=lax und im Produktivbetrieb secure. Die Client-IP wird hinter dem Reverse Proxy aus x-forwarded-for gelesen. Dazu die mobile-first Grundstruktur: Bottom-Navigation, Header mit Konto-Menue, Healthcheck unter /api/health und ein Dashboard mit den vier Einstiegspunkten. Bedienelemente sind auf 44px Touch-Groesse angehoben. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-06 22:40:54 +02:00
parent b74cecb729
commit 4c78c5672b
35 changed files with 2089 additions and 974 deletions
@@ -0,0 +1,38 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { Suspense } from 'react';
+import { LoginForm } from '@/components/auth/login-form';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { isFirstRun } from '@/lib/auth';
+import { getSession } from '@/lib/session';
+
+export const metadata: Metadata = { title: 'Anmelden' };
+
+export default async function LoginPage() {
+  if (await getSession()) redirect('/');
+
+  // Nobody registered yet: send the very first visitor straight to sign-up.
+  if (isFirstRun()) redirect('/registrieren');
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Anmelden</CardTitle>
+        <CardDescription>Melde dich an, um die Sammlung zu verwalten.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <Suspense fallback={<Skeleton className="h-64 w-full" />}>
+          <LoginForm />
+        </Suspense>
+        <p className="text-center text-xs text-muted-foreground">
+          Noch kein Konto?{' '}
+          <Link href="/registrieren" className="underline underline-offset-4">
+            Registrierung
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import { Blocks } from 'lucide-react';
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-dvh flex-col items-center justify-center gap-8 px-4 py-10">
+      <Link href="/" className="flex items-center gap-2 text-xl font-semibold tracking-tight">
+        <Blocks className="size-6 text-primary" aria-hidden />
+        Bricktrack
+      </Link>
+      <main className="w-full max-w-sm">{children}</main>
+      <p className="text-center text-xs text-muted-foreground">
+        Die Sammlung und die Wunschlisten deiner Familie – auf deinem eigenen Server.
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,47 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+import { RegisterForm } from '@/components/auth/register-form';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { isFirstRun } from '@/lib/auth';
+import { getSession } from '@/lib/session';
+
+export const metadata: Metadata = { title: 'Registrieren' };
+
+export default async function RegisterPage() {
+  if (await getSession()) redirect('/');
+
+  // After the first user, accounts only come from an invitation link.
+  if (!isFirstRun()) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Registrierung geschlossen</CardTitle>
+          <CardDescription>
+            Diese Bricktrack-Instanz hat bereits einen Administrator. Weitere Konten entstehen nur
+            über einen Einladungslink.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Link href="/anmelden" className="text-sm underline underline-offset-4">
+            Zur Anmeldung
+          </Link>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Erstes Konto anlegen</CardTitle>
+        <CardDescription>
+          Du bist der erste Nutzer und wirst damit automatisch Administrator.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <RegisterForm />
+      </CardContent>
+    </Card>
+  );
+}