- {/* Logout-Button oben rechts */}
+ {/* Einstellungen und Logout oben rechts */}
+ {pathname !== '/einstellungen' && (
+
+ Einstellungen
+
+ )}
diff --git a/components/Passkeys.tsx b/components/Passkeys.tsx
new file mode 100644
index 0000000..b60ef27
--- /dev/null
+++ b/components/Passkeys.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { startRegistration } from '@simplewebauthn/browser';
+
+interface Passkey {
+ credentialId: string;
+ label: string;
+ createdAt: string | null;
+ lastUsedAt: string | null;
+}
+
+function formatDate(iso: string | null): string {
+ if (!iso) return '—';
+ const d = new Date(iso);
+ if (isNaN(d.getTime())) return '—';
+ return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
+
+export default function Passkeys() {
+ const [passkeys, setPasskeys] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState(null);
+ const [label, setLabel] = useState('');
+
+ function load() {
+ return fetch('/api/passkey')
+ .then((r) => (r.ok ? r.json() : Promise.reject(new Error())))
+ .then((data) => setPasskeys(data.passkeys ?? []))
+ .catch(() => setError('Passkeys konnten nicht geladen werden.'))
+ .finally(() => setLoading(false));
+ }
+
+ useEffect(() => {
+ load();
+ }, []);
+
+ async function handleRegister() {
+ setError(null);
+ setBusy(true);
+ try {
+ const optRes = await fetch('/api/passkey/register');
+ if (!optRes.ok) throw new Error('Optionen konnten nicht geladen werden.');
+ const optionsJSON = await optRes.json();
+
+ const response = await startRegistration({ optionsJSON });
+
+ const verifyRes = await fetch('/api/passkey/register', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ response, label }),
+ });
+ if (!verifyRes.ok) {
+ const data = await verifyRes.json().catch(() => null);
+ throw new Error(data?.error ?? 'Passkey konnte nicht registriert werden.');
+ }
+ setLabel('');
+ await load();
+ } catch (err) {
+ if (err instanceof Error && err.name === 'NotAllowedError') {
+ setError(null); // Abbruch durch Nutzer
+ } else {
+ setError(err instanceof Error ? err.message : 'Passkey konnte nicht registriert werden.');
+ }
+ } finally {
+ setBusy(false);
+ }
+ }
+
+ async function handleDelete(credentialId: string) {
+ if (!confirm('Diesen Passkey wirklich entfernen?')) return;
+ setError(null);
+ try {
+ const res = await fetch(`/api/passkey?id=${encodeURIComponent(credentialId)}`, {
+ method: 'DELETE',
+ });
+ if (!res.ok) throw new Error();
+ await load();
+ } catch {
+ setError('Passkey konnte nicht entfernt werden.');
+ }
+ }
+
+ return (
+
+
Passkeys
+
+ Melde dich künftig per Fingerabdruck, Gesichtserkennung oder Geräte-PIN an. Das Passwort
+ bleibt als Alternative bestehen.
+
+
+ {loading ? (
+
Lädt…
+ ) : passkeys.length === 0 ? (
+
Noch keine Passkeys registriert.
+ ) : (
+
+ {passkeys.map((pk) => (
+ -
+
+
{pk.label}
+
+ Erstellt {formatDate(pk.createdAt)} · Zuletzt {formatDate(pk.lastUsedAt)}
+
+
+ ))}
+
+ )}
+
+
+
+
+ setLabel(e.target.value)}
+ placeholder="z. B. iPhone"
+ maxLength={80}
+ className="passkeys-input"
+ />
+
+
+
+
+ {error &&
{error}
}
+