feat: Anmelden mit Passkey
Passkeys (WebAuthn/FIDO2) als zweiter Anmeldeweg - auf der Anmeldeseite und bei der erneuten Bestaetigung vor sensiblen Aktionen. Verwaltet unter "Mein Konto". Der Passkey ERSETZT den zweiten Faktor, statt zu ihm hinzuzukommen. Das ist tragbar, weil er zwei Faktoren in sich vereint: Besitz des Geraets und dessen Entsperrung. Damit das keine Annahme bleibt, wird die Nutzerverifikation angefordert (userVerification: 'required') und serverseitig nachgeprueft - eine Antwort ohne sie wird abgewiesen. TOTP muss vorher eingerichtet sein. Ein Passkey haengt an einem Geraet; waere er der einzige Weg hinein, koennte ein verlorenes Handy die Akte schliessen. Aufbau: - Die Pruefung laeuft vollstaendig im Credentials-Provider "passkey", nicht in der Server Action davor. Ein "war schon geprueft" ueber die Grenze zu reichen waere die Stelle, an der sich Anmeldungen faelschen lassen. - Challenges liegen serverseitig und werden per DELETE genau einmal verbraucht - die Datenbank entscheidet, wer sie bekommt. - Bereichskennung und Herkunft kommen aus AUTH_URL, nicht aus einer zweiten Konfigurationsquelle. - Ohne https wird der Knopf gar nicht erst angeboten. - Rate-Limiting, Kontosperre und Audit-Log gelten unveraendert; die Anmeldung nennt den verwendeten Passkey namentlich. Zwei Anmerkungen zur Migration: - "prisma migrate diff" wollte zusaetzlich die Trigramm-Indizes aus prisma/sql/suche.sql loeschen, die Prisma nicht kennt. Die Zeilen sind entfernt und im Migrationskopf vermerkt - ein DROP haette die unscharfe Suche stillgelegt, ohne dass etwas fehlgeschlagen waere. - "prisma format" hat das Schema durchgaengig neu ausgerichtet. Ohne Whitespace betrachtet sind es 88 hinzugefuegte Zeilen und keine geloeschte. Geprueft: 21 Einheitstests, drei End-to-End-Tests gegen Chromiums virtuellen Authenticator (einrichten, anmelden, bestaetigen, entfernen, Geraet ohne Verifikation abgewiesen), beide Geraeteprofile. 496 Tests, null Typfehler, Produktionsbau steht. Nebenbei: Die Zahlen im README waren veraltet (24 statt 33 Modelle, 46 statt 79 Seiten). Sie stehen jetzt mit dem Befehl daneben, mit dem man sie nachzaehlt.
This commit is contained in:
Florian Wilde
@@ -1,9 +1,16 @@
|
||||
'use client'
|
||||
|
||||
import { useActionState } from 'react'
|
||||
import { useActionState, useEffect, useState } from 'react'
|
||||
import { useFormStatus } from 'react-dom'
|
||||
import { AlertCircle, Loader2, ShieldCheck } from 'lucide-react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { AlertCircle, Fingerprint, Loader2, ShieldCheck } from 'lucide-react'
|
||||
import { anmeldungBestaetigen, type BestaetigenZustand } from '@/server/actions/bestaetigen'
|
||||
import { passkeyBestaetigen, passkeyBestaetigungStarten } from '@/server/actions/passkey'
|
||||
import {
|
||||
browserSupportsWebAuthn,
|
||||
passkeyBrowserfehler,
|
||||
startAuthentication,
|
||||
} from '@/lib/passkey-browser'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
@@ -19,36 +26,133 @@ function Absenden() {
|
||||
)
|
||||
}
|
||||
|
||||
export function BestaetigenFormular({ weiter }: { weiter: string }) {
|
||||
export function BestaetigenFormular({
|
||||
weiter,
|
||||
passkeysMoeglich,
|
||||
}: {
|
||||
weiter: string
|
||||
passkeysMoeglich: boolean
|
||||
}) {
|
||||
const [zustand, aktion] = useActionState<BestaetigenZustand, FormData>(anmeldungBestaetigen, {})
|
||||
|
||||
return (
|
||||
<form action={aktion} className="space-y-4" noValidate>
|
||||
<input type="hidden" name="weiter" value={weiter} />
|
||||
<div className="space-y-5">
|
||||
<form action={aktion} className="space-y-4" noValidate>
|
||||
<input type="hidden" name="weiter" value={weiter} />
|
||||
|
||||
{zustand.fehler && (
|
||||
{zustand.fehler && (
|
||||
<Alert variant="fehler">
|
||||
<AlertCircle aria-hidden="true" />
|
||||
<AlertDescription>{zustand.fehler}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Feld id="passwort" beschriftung="Passwort" pflicht>
|
||||
<Input name="passwort" type="password" autoComplete="current-password" required autoFocus />
|
||||
</Feld>
|
||||
|
||||
<Feld id="code" beschriftung="Code aus der Authenticator-App" pflicht>
|
||||
<Input
|
||||
name="code"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
placeholder="123456"
|
||||
className="text-center font-mono text-lg tracking-[0.4em]"
|
||||
required
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
<Absenden />
|
||||
</form>
|
||||
|
||||
{passkeysMoeglich && <PasskeyBestaetigung weiter={weiter} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Bestaetigung mit Passkey statt mit Passwort und Code.
|
||||
*
|
||||
* Geprueft wird zusaetzlich, dass der Passkey zum angemeldeten Benutzer
|
||||
* gehoert - sonst koennte jemand mit dem eigenen Finger eine fremde,
|
||||
* offen stehende Sitzung freischalten. Genau der Fall, gegen den diese
|
||||
* Seite gebaut ist.
|
||||
*/
|
||||
function PasskeyBestaetigung({ weiter }: { weiter: string }) {
|
||||
const router = useRouter()
|
||||
const [browserKann, setBrowserKann] = useState(false)
|
||||
const [laeuft, setLaeuft] = useState(false)
|
||||
const [fehler, setFehler] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
setBrowserKann(browserSupportsWebAuthn())
|
||||
}, [])
|
||||
|
||||
async function bestaetigen() {
|
||||
setFehler(null)
|
||||
setLaeuft(true)
|
||||
|
||||
try {
|
||||
const start = await passkeyBestaetigungStarten()
|
||||
if (!start.ok) {
|
||||
setFehler(start.fehler)
|
||||
return
|
||||
}
|
||||
|
||||
const antwort = await startAuthentication({ optionsJSON: start.optionen })
|
||||
const ergebnis = await passkeyBestaetigen(JSON.stringify(antwort))
|
||||
|
||||
if (!ergebnis.ok) {
|
||||
setFehler(ergebnis.fehler)
|
||||
return
|
||||
}
|
||||
|
||||
router.replace(weiter)
|
||||
router.refresh()
|
||||
} catch (ausnahme) {
|
||||
setFehler(passkeyBrowserfehler(ausnahme))
|
||||
} finally {
|
||||
setLaeuft(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!browserKann) return null
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-px flex-1 bg-border" />
|
||||
<span className="text-xs uppercase tracking-wide text-muted-foreground">oder</span>
|
||||
<span className="h-px flex-1 bg-border" />
|
||||
</div>
|
||||
|
||||
{fehler && (
|
||||
<Alert variant="fehler">
|
||||
<AlertCircle aria-hidden="true" />
|
||||
<AlertDescription>{zustand.fehler}</AlertDescription>
|
||||
<AlertDescription>{fehler}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Feld id="passwort" beschriftung="Passwort" pflicht>
|
||||
<Input name="passwort" type="password" autoComplete="current-password" required autoFocus />
|
||||
</Feld>
|
||||
|
||||
<Feld id="code" beschriftung="Code aus der Authenticator-App" pflicht>
|
||||
<Input
|
||||
name="code"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
placeholder="123456"
|
||||
className="text-center font-mono text-lg tracking-[0.4em]"
|
||||
required
|
||||
/>
|
||||
</Feld>
|
||||
|
||||
<Absenden />
|
||||
</form>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
onClick={() => void bestaetigen()}
|
||||
disabled={laeuft}
|
||||
>
|
||||
{laeuft ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" aria-hidden="true" />
|
||||
Warte auf das Gerät …
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Fingerprint aria-hidden="true" />
|
||||
Mit Passkey bestätigen
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ShieldAlert } from 'lucide-react'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { erfordereBenutzer } from '@/lib/auth/sitzung'
|
||||
import { passkeysMoeglich } from '@/lib/auth/passkey'
|
||||
import { BestaetigenFormular } from './formular'
|
||||
|
||||
export const metadata: Metadata = { title: 'Bestätigen' }
|
||||
@@ -26,7 +27,7 @@ export default async function BestaetigenSeite({
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BestaetigenFormular weiter={weiter} />
|
||||
<BestaetigenFormular weiter={weiter} passkeysMoeglich={passkeysMoeglich()} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { KeyRound, ShieldCheck } from 'lucide-react'
|
||||
import { Fingerprint, KeyRound, ShieldCheck } from 'lucide-react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { SeitenKopf } from '@/components/seiten-kopf'
|
||||
import { erfordereBenutzer } from '@/lib/auth/sitzung'
|
||||
import { passkeysDesBenutzers, passkeysMoeglich } from '@/lib/auth/passkey'
|
||||
import { PasskeyVerwaltung } from '@/components/konto/passkey-verwaltung'
|
||||
import { ROLLEN_BESCHRIFTUNG, ROLLEN_ERKLAERUNG } from '@/lib/auth/rollen'
|
||||
import { formatDatumZeit } from '@/lib/utils'
|
||||
import { PasswortFormular } from './passwort-formular'
|
||||
@@ -16,10 +18,11 @@ export const dynamic = 'force-dynamic'
|
||||
export default async function KontoSeite() {
|
||||
const benutzer = await erfordereBenutzer()
|
||||
const codesUebrig = benutzer.wiederherstellungscodes.length
|
||||
const passkeys = await passkeysDesBenutzers(benutzer.id)
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<SeitenKopf titel="Mein Konto" beschreibung="Zugangsdaten und zweiter Faktor." />
|
||||
<SeitenKopf titel="Mein Konto" beschreibung="Zugangsdaten, zweiter Faktor und Passkeys." />
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
@@ -89,6 +92,28 @@ export default async function KontoSeite() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Fingerprint className="size-5" aria-hidden="true" />
|
||||
Passkeys
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Anmelden mit Fingerabdruck, Gesicht oder Geräte-PIN — ohne E-Mail, Passwort und Code.
|
||||
Ein Passkey gilt als zweiter Faktor, weil er Besitz des Geräts und dessen Entsperrung
|
||||
verlangt. Er ist an diese Adresse gebunden: Auf einer nachgebauten Anmeldeseite
|
||||
funktioniert er nicht.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PasskeyVerwaltung
|
||||
passkeys={passkeys}
|
||||
zweiterFaktorAktiv={Boolean(benutzer.totpAktiviertAm)}
|
||||
moeglich={passkeysMoeglich()}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
|
||||
@@ -34,6 +34,8 @@ const AKTION_BESCHRIFTUNG: Record<AuditAktion, string> = {
|
||||
ANMELDUNG_FEHLGESCHLAGEN: 'Anmeldung fehlgeschlagen',
|
||||
ABMELDUNG: 'abgemeldet',
|
||||
ZWEITER_FAKTOR_EINGERICHTET: 'zweiter Faktor eingerichtet',
|
||||
PASSKEY_REGISTRIERT: 'Passkey eingerichtet',
|
||||
PASSKEY_ENTFERNT: 'Passkey entfernt',
|
||||
PASSWORT_GEAENDERT: 'Passwort geändert',
|
||||
ROLLE_GEAENDERT: 'Rolle geändert',
|
||||
FREIGABE_GEAENDERT: 'Freigabe geändert',
|
||||
@@ -41,7 +43,8 @@ const AKTION_BESCHRIFTUNG: Record<AuditAktion, string> = {
|
||||
|
||||
function variante(aktion: AuditAktion) {
|
||||
if (aktion === 'ANMELDUNG_FEHLGESCHLAGEN' || aktion === 'ENDGUELTIG_GELOESCHT') return 'rot'
|
||||
if (aktion === 'GELOESCHT' || aktion === 'EXPORTIERT') return 'orange'
|
||||
if (aktion === 'GELOESCHT' || aktion === 'EXPORTIERT' || aktion === 'PASSKEY_ENTFERNT')
|
||||
return 'orange'
|
||||
if (aktion === 'ERSTELLT') return 'gruen'
|
||||
return 'secondary'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user