V 1.3.0 Anmeldung per Passkey (WebAuthn)

Passkey-Login wie in ausgaben-next/werte-next: auf der Login-Seite "Mit Passkey anmelden", Verwaltung der eigenen Passkeys unter /einstellungen (Button oben rechts). Das Passwort bleibt als Alternative bestehen. - lib/webauthn.ts, lib/passkeys.ts sowie API-Routen unter /api/passkey - proxy.ts: /api/passkey/authenticate ohne Session erreichbar - Styles als eigene CSS-Klassen in globals.css (kein Tailwind in diesem Projekt), passend zum vorhandenen login-*/app-*-Schema - Tabelle tabletten_passkeys in der DB medizin: app-spezifischer Name, damit sich Apps desselben Stacks nicht gegenseitig Passkeys anzeigen oder loeschen - RP-Konfiguration ueber TABLETTEN_RP_*, da sich die .env auf dem Server mit anderen Apps teilt, die RP_ID/RP_ORIGIN bereits belegen Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-09 20:17:11 +02:00
parent 325c07b469
commit 96043efe46
17 changed files with 1094 additions and 5 deletions
@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { buildAuthenticationOptions, finishAuthentication } from '@/lib/webauthn';
+import { createSession } from '@/lib/session';
+
+// Öffentlich (kein Login): Optionen für die Anmeldung per Passkey.
+export async function GET() {
+  try {
+    return NextResponse.json(await buildAuthenticationOptions());
+  } catch (error) {
+    console.error('GET /api/passkey/authenticate:', error);
+    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+  }
+}
+
+// Öffentlich: Verifiziert die Anmelde-Antwort und erstellt bei Erfolg die Session.
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const result = await finishAuthentication(body?.response);
+    if (!result.ok) return NextResponse.json({ error: result.error }, { status: 401 });
+
+    await createSession(result.username);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error('POST /api/passkey/authenticate:', error);
+    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+  }
+}
@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSession } from '@/lib/session';
+import { buildRegistrationOptions, finishRegistration } from '@/lib/webauthn';
+
+// Optionen für die Registrierung eines neuen Passkeys (Session erforderlich).
+export async function GET() {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  try {
+    return NextResponse.json(await buildRegistrationOptions(session.username));
+  } catch (error) {
+    console.error('GET /api/passkey/register:', error);
+    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+  }
+}
+
+// Verifiziert die Registrierungs-Antwort und speichert den Passkey.
+export async function POST(request: NextRequest) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  try {
+    const body = await request.json();
+    const result = await finishRegistration(
+      session.username,
+      body?.response,
+      String(body?.label ?? '')
+    );
+    if (!result.ok) return NextResponse.json({ error: result.error }, { status: 400 });
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error('POST /api/passkey/register:', error);
+    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+  }
+}
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSession } from '@/lib/session';
+import { listPasskeys, deletePasskey } from '@/lib/passkeys';
+
+// Liste der eigenen Passkeys (ohne öffentlichen Schlüssel).
+export async function GET() {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  try {
+    const passkeys = (await listPasskeys(session.username)).map((pk) => ({
+      credentialId: pk.credentialId,
+      label: pk.label,
+      createdAt: pk.createdAt,
+      lastUsedAt: pk.lastUsedAt,
+    }));
+    return NextResponse.json({ passkeys });
+  } catch (error) {
+    console.error('GET /api/passkey:', error);
+    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+  }
+}
+
+// Löscht einen eigenen Passkey anhand seiner credentialId (?id=...).
+export async function DELETE(request: NextRequest) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  const id = request.nextUrl.searchParams.get('id');
+  if (!id) return NextResponse.json({ error: 'Keine ID angegeben.' }, { status: 400 });
+
+  try {
+    const removed = await deletePasskey(id, session.username);
+    if (!removed) return NextResponse.json({ error: 'Passkey nicht gefunden.' }, { status: 404 });
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error('DELETE /api/passkey:', error);
+    return NextResponse.json({ error: 'Serverfehler' }, { status: 500 });
+  }
+}
@@ -0,0 +1,15 @@
+import Link from 'next/link';
+import AppLayout from '@/components/AppLayout';
+import Passkeys from '@/components/Passkeys';
+
+export default function EinstellungenPage() {
+  return (
+    <AppLayout>
+      <h2 className="settings-title">Einstellungen</h2>
+      <Passkeys />
+      <p className="settings-back">
+        <Link href="/">← Zurück zur Übersicht</Link>
+      </p>
+    </AppLayout>
+  );
+}
@@ -146,9 +146,22 @@ main {
 .app-logout-bar {
  display: flex;
  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
  margin-bottom: -2px;
 }

+.btn-settings {
+  padding: 8px 16px;
+  background-color: #85B7D7;
+  color: black;
+  font-size: 0.875rem;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  text-decoration: none;
+}
+.btn-settings:hover { background-color: #6a9fc5; }
+
 .btn-logout {
  padding: 8px 16px;
  background-color: #dc2626;
@@ -314,3 +327,140 @@ main {
 }
 .login-footer a { color: #2563eb; }
 .login-footer a:hover { text-decoration: underline; }
+
+/* ---------- Passkeys / Anmeldung per Passkey ---------- */
+
+.login-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 20px 0;
+  color: #9ca3af;
+  font-size: 0.75rem;
+}
+.login-divider::before,
+.login-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: #e5e7eb;
+}
+
+.login-passkey-btn {
+  width: 100%;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: none;
+  color: #111827;
+  font-weight: 500;
+  font-size: 0.875rem;
+  border: 2px solid #9ca3af;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.login-passkey-btn:hover:not(:disabled) { border-color: #3b82f6; }
+.login-passkey-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.login-error-passkey { margin-top: 16px; }
+
+.settings-title {
+  margin: 0 0 16px;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.settings-back { margin-top: 20px; font-size: 0.875rem; }
+
+.passkeys { max-width: 28rem; }
+.passkeys-title {
+  margin: 0 0 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.passkeys-hint {
+  margin: 0 0 12px;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+.passkeys-empty {
+  margin: 0 0 12px;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.passkeys-list {
+  list-style: none;
+  margin: 0 0 16px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.passkeys-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  background: white;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+}
+.passkeys-item-info { min-width: 0; }
+.passkeys-item-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.passkeys-item-meta { font-size: 0.75rem; color: #6b7280; }
+.passkeys-remove {
+  flex-shrink: 0;
+  padding: 4px 8px;
+  background: none;
+  border: none;
+  color: #dc2626;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.passkeys-remove:hover { color: #991b1b; }
+
+.passkeys-add {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+.passkeys-add-field { flex: 1; }
+.passkeys-add-label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+.passkeys-input {
+  width: 100%;
+  padding: 8px 12px;
+  background: white;
+  border: 2px solid #9ca3af;
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+.passkeys-input:focus { border-color: #3b82f6; outline: none; }
+.passkeys-add-btn {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  background-color: #85B7D7;
+  color: black;
+  font-weight: 500;
+  font-size: 0.875rem;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.passkeys-add-btn:hover:not(:disabled) { background-color: #6a9fc5; }
+.passkeys-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.passkeys-error { margin-top: 12px; }
@@ -1,12 +1,47 @@
 'use client';

 import { useActionState, useState } from 'react';
+import { startAuthentication } from '@simplewebauthn/browser';
 import { login } from './actions';
 import packageJson from '@/package.json';

 export default function LoginPage() {
  const [state, loginAction, isPending] = useActionState(login, undefined);
  const [showPassword, setShowPassword] = useState(false);
+  const [passkeyBusy, setPasskeyBusy] = useState(false);
+  const [passkeyError, setPasskeyError] = useState<string | null>(null);
+
+  async function handlePasskeyLogin() {
+    setPasskeyError(null);
+    setPasskeyBusy(true);
+    try {
+      const optRes = await fetch('/api/passkey/authenticate');
+      if (!optRes.ok) throw new Error('Optionen konnten nicht geladen werden.');
+      const optionsJSON = await optRes.json();
+
+      const response = await startAuthentication({ optionsJSON });
+
+      const verifyRes = await fetch('/api/passkey/authenticate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ response }),
+      });
+      if (!verifyRes.ok) {
+        const data = await verifyRes.json().catch(() => null);
+        throw new Error(data?.error ?? 'Anmeldung mit Passkey fehlgeschlagen.');
+      }
+      window.location.href = '/';
+    } catch (err) {
+      // Abbruch durch Nutzer (NotAllowedError) nicht als Fehler anzeigen.
+      if (err instanceof Error && err.name === 'NotAllowedError') {
+        setPasskeyError(null);
+      } else {
+        setPasskeyError(err instanceof Error ? err.message : 'Anmeldung mit Passkey fehlgeschlagen.');
+      }
+    } finally {
+      setPasskeyBusy(false);
+    }
+  }

  const version = packageJson.version;
  const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
@@ -89,6 +124,28 @@ export default function LoginPage() {
                {isPending ? 'Anmeldung läuft...' : 'Anmelden'}
              </button>
            </form>
+
+            <div className="login-divider">
+              <span>oder</span>
+            </div>
+
+            <button
+              type="button"
+              onClick={handlePasskeyLogin}
+              disabled={passkeyBusy}
+              className="login-passkey-btn"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+              </svg>
+              {passkeyBusy ? 'Anmeldung läuft...' : 'Mit Passkey anmelden'}
+            </button>
+
+            {passkeyError && (
+              <div className="login-error login-error-passkey">
+                {passkeyError}
+              </div>
+            )}
          </div>
        </div>