V 2.2.0 Anmeldung per Passkey (WebAuthn)

Zusätzlich zu Benutzername/Passwort ist die Anmeldung per Passkey möglich
(Fingerabdruck, Gesichtserkennung, Geräte-PIN). Das Passwort bleibt als
Alternative bestehen.

- lib/webauthn.ts kapselt @simplewebauthn/server, RP-Config über
  RP_ID/RP_ORIGIN/RP_NAME, Challenge in kurzlebigem httpOnly-Cookie
- lib/passkeys.ts speichert Credentials je Benutzer in der MySQL-Tabelle
  passkeys und legt sie beim ersten Zugriff an
- API unter app/api/passkey/: register (Session nötig), authenticate
  (öffentlich, in proxy.ts von der Session-Pflicht ausgenommen), GET/DELETE
  zum Verwalten
- Neuer Tab "Einstellungen" zum Registrieren und Entfernen von Passkeys
- Button "Mit Passkey anmelden" auf der Login-Seite

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-01 09:25:06 +02:00
parent 475c804ce7
commit da79543d54
19 changed files with 981 additions and 4 deletions
+28
View File
@@ -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 });
}
}
+36
View File
@@ -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 });
}
}
+40
View File
@@ -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 });
}
}