Auth: Login mit E-Mail/Passwort und Passkey, Logout

app/login/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/client";
+
+function germanAuthError(message: string): string {
+  if (/invalid login credentials/i.test(message))
+    return "E-Mail-Adresse oder Passwort ist falsch.";
+  if (/email not confirmed/i.test(message))
+    return "Die E-Mail-Adresse wurde noch nicht bestätigt.";
+  if (/cancelled|aborted|NotAllowedError/i.test(message))
+    return "Passkey-Anmeldung wurde abgebrochen.";
+  return `Anmeldung fehlgeschlagen: ${message}`;
+}
+
+export default function LoginPage() {
+  const router = useRouter();
+  const supabase = createClient();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function redirectByRole(userId: string) {
+    const { data: profile } = await supabase
+      .from("profiles")
+      .select("role")
+      .eq("id", userId)
+      .single();
+    router.replace(profile?.role === "admin" ? "/admin" : "/intern");
+    router.refresh();
+  }
+
+  async function signInWithPassword(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    if (error || !data.user) {
+      setError(germanAuthError(error?.message ?? "Unbekannter Fehler"));
+      setBusy(false);
+      return;
+    }
+    await redirectByRole(data.user.id);
+  }
+
+  async function signInWithPasskey() {
+    setError(null);
+    setBusy(true);
+    try {
+      const { data, error } = await supabase.auth.signInWithPasskey();
+      if (error || !data?.user) {
+        setError(
+          germanAuthError(error?.message ?? "Passkey-Anmeldung fehlgeschlagen")
+        );
+        setBusy(false);
+        return;
+      }
+      await redirectByRole(data.user.id);
+    } catch (err) {
+      setError(germanAuthError(err instanceof Error ? err.message : String(err)));
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex-1 flex items-center justify-center p-4">
+      <div className="card w-full max-w-sm">
+        <h1 className="text-xl font-bold text-[var(--c-primary)] mb-4">
+          Anmeldung
+        </h1>
+        <form onSubmit={signInWithPassword} className="space-y-3">
+          <div>
+            <label className="label" htmlFor="email">
+              E-Mail-Adresse
+            </label>
+            <input
+              id="email"
+              type="email"
+              className="input"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete="username webauthn"
+              required
+            />
+          </div>
+          <div>
+            <label className="label" htmlFor="password">
+              Passwort
+            </label>
+            <input
+              id="password"
+              type="password"
+              className="input"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              required
+            />
+          </div>
+          {error && <p className="text-sm text-[var(--c-del)]">{error}</p>}
+          <button type="submit" className="btn btn-primary w-full" disabled={busy}>
+            Anmelden
+          </button>
+        </form>
+
+        <div className="my-4 flex items-center gap-3 text-xs text-gray-400">
+          <span className="h-px flex-1 bg-gray-200" />
+          oder
+          <span className="h-px flex-1 bg-gray-200" />
+        </div>
+
+        <button
+          type="button"
+          onClick={signInWithPasskey}
+          className="btn btn-neutral w-full"
+          disabled={busy}
+        >
+          Mit Passkey anmelden
+        </button>
+
+        <p className="mt-4 text-center text-sm">
+          <Link href="/" className="text-gray-500 hover:text-[var(--c-primary)]">
+            ← Zur Speisekarte
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/logout/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase/server";
+
+export async function POST(request: Request) {
+  const supabase = await createClient();
+  await supabase.auth.signOut();
+  return NextResponse.redirect(new URL("/login", request.url), { status: 303 });
+}