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,21 @@
+import Link from 'next/link';
+import { Blocks } from 'lucide-react';
+import { DesktopNav } from './bottom-nav';
+import { UserMenu } from './user-menu';
+import type { SessionUser } from '@/lib/session';
+
+export function AppHeader({ user }: { user: SessionUser }) {
+  return (
+    <header className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur">
+      <div className="mx-auto flex h-14 max-w-5xl items-center gap-3 px-4">
+        <Link href="/" className="flex items-center gap-2 font-semibold tracking-tight">
+          <Blocks className="size-5 text-primary" aria-hidden />
+          <span>Bricktrack</span>
+        </Link>
+        <div className="flex-1" />
+        <DesktopNav />
+        <UserMenu user={user} />
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,73 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Boxes, Gift, LayoutGrid, User } from 'lucide-react';
+import { cn } from 'cn';
+
+const items = [
+  { href: '/katalog', label: 'Katalog', icon: LayoutGrid },
+  { href: '/sammlung', label: 'Sammlung', icon: Boxes },
+  { href: '/wunschlisten', label: 'Wünsche', icon: Gift },
+  { href: '/konto', label: 'Konto', icon: User },
+] as const;
+
+export function BottomNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      aria-label="Hauptnavigation"
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 pb-[env(safe-area-inset-bottom)] backdrop-blur md:hidden"
+    >
+      <ul className="mx-auto flex max-w-lg">
+        {items.map((item) => {
+          const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
+          return (
+            <li key={item.href} className="flex-1">
+              <Link
+                href={item.href}
+                aria-current={active ? 'page' : undefined}
+                className={cn(
+                  'flex h-16 flex-col items-center justify-center gap-1 text-xs transition-colors',
+                  active ? 'text-primary' : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                <item.icon className="size-5" aria-hidden />
+                {item.label}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}
+
+export function DesktopNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav aria-label="Hauptnavigation" className="hidden items-center gap-1 md:flex">
+      {items.map((item) => {
+        const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            aria-current={active ? 'page' : undefined}
+            className={cn(
+              'flex h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors',
+              active
+                ? 'bg-muted text-foreground'
+                : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+            )}
+          >
+            <item.icon className="size-4" aria-hidden />
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
@@ -0,0 +1,62 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { LogOut, Settings, UserRound } from 'lucide-react';
+import { authClient } from '@/lib/auth-client';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import type { SessionUser } from '@/lib/session';
+
+export function UserMenu({ user }: { user: SessionUser }) {
+  const router = useRouter();
+
+  async function signOut() {
+    await authClient.signOut();
+    router.push('/anmelden');
+    router.refresh();
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Konto-Menü">
+          <UserRound />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <span className="block text-sm font-medium">{user.name}</span>
+          <span className="block truncate text-xs text-muted-foreground">{user.email}</span>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/konto">
+            <UserRound />
+            Konto und Passkeys
+          </Link>
+        </DropdownMenuItem>
+        {user.role === 'admin' ? (
+          <DropdownMenuItem asChild>
+            <Link href="/verwaltung/hersteller">
+              <Settings />
+              Verwaltung
+            </Link>
+          </DropdownMenuItem>
+        ) : null}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onSelect={() => void signOut()}>
+          <LogOut />
+          Abmelden
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}