WompSchmiede/FamilienFeierPlaner
SHA256
1
1
Fork 0
Code Issues 18 Pull requests Projects Releases 5 Packages 3 Wiki Activity Actions

BFF-Routen + UI + i18n fuer Account-Sicherheit #162

New issue
Closed
opened 2026-07-01 16:09:07 +00:00 by niboer · 1 comment
niboer commented 2026-07-01 16:09:07 +00:00
Owner
Copy link

Beschreibung

Das Frontend (BFF + UI) muss Account-Sicherheitseinstellungen erhalten: Passwort wechseln, TOTP/2FA einrichten, Passkeys (WebAuthn) registrieren und verwalten. Die Kommunikation mit Keycloak erfolgt via BFF-Proxy unter Verwendung des User-eigenen JWT (session_token) gegen die Keycloak Account Console API.

Abhaengig von #129 (Keycloak-Realm-Konfiguration).

Umsetzung

1. BFF-Routen (frontend/src/routes/api/auth/)

  • change-password/+server.ts — POST: Proxied an POST /realms/{realm}/account/password mit Body {currentPassword, newPassword, confirmation}
  • credentials/+server.ts — GET: Listet Credentials von GET /realms/{realm}/account/credentials (TOTP-Status, registrierte Passkeys)
  • credentials/totp/+server.ts — GET: Holt TOTP-Setup-Daten (BASE32-Secret, QR-Code-URL) von GET /realms/{realm}/account/credentials/totp
  • credentials/totp/+server.ts — POST: Schliesst TOTP-Registrierung ab (POST /realms/{realm}/account/credentials/totp mit {secret, code})
  • credentials/[id]/+server.ts — DELETE: Credential entfernen (DELETE /realms/{realm}/account/credentials/{id})
  • credentials/[id]/+server.ts — PUT: userLabel aktualisieren (PUT /realms/{realm}/account/credentials/{id} mit {userLabel})
  • credentials/passkey/register/+server.ts — POST: WebAuthn-Passkey-Registrierung initiieren + abschliessen

Neue Hilfsfunktion in frontend/src/lib/server/auth.ts:

  • callKeycloakAccountApi(token, method, path, body?) — generischer Proxy zu Keycloak (analog tryRefreshToken)

Neue npm-Abhaengigkeit:

  • qrcode zum Rendern des TOTP-QR-Codes (Check: mit Projekt-Konventionen kompatibel)

2. UI — Account-Sicherheitseinstellungen (frontend/src/routes/app/account/+page.svelte)

Folgende Cards werden unterhalb der bestehenden eingefuegt:

a) Passwort aendern

  • Formular: altes Passwort, neues Passwort, Wiederholung
  • Clientseitige Validierung (Mindestlaenge, Komplexitaet)
  • POST /api/auth/change-password
  • Erfolgs-/Fehlermeldungen (ErrorAlert)

b) 2FA / TOTP

  • Statusanzeige: aktiv/inaktiv (Icon/Farbcode)
  • Setup-Flow (bei Inaktiv):
    • GET /api/auth/credentials/totp → QR-Code (via qrcode-Lib) + BASE32-Secret + Copy-Button
    • Sensible Daten werden nur im fluechtigen Komponenten-State gehalten ($state()), nie gecached/persistiert
    • Nach Verlassen der Seite oder Bestaetigung: QR-Code und Secret verschwinden
    • Bestaetigungs-Input (6-stelliger Code) → POST /api/auth/credentials/totp
    • Nach erfolgreicher Bestaetigung: einmalige Anzeige der Backup-Codes mit Download-Button
  • Deaktivierung (bei Aktiv): DELETE /api/auth/credentials/{totp-credential-id}

c) Passkeys (WebAuthn)

  • Liste registrierter Passkeys (GET /api/auth/credentials → filter passkey)
  • Pro Eintrag: userLabel, Typ, Erstellungsdatum (gekuerzt)
  • Umbenennen: Inline-Edit des userLabel → PUT /api/auth/credentials/{id}
  • Neuen Passkey registrieren:
    • Optionales Eingabefeld "Name" (wird als userLabel uebergeben)
    • Flow: BFF holt Challenge von Keycloak → Browser navigator.credentials.create() → BFF schliesst ab
  • Loeschen: DELETE /api/auth/credentials/{id}

3. i18n (frontend/src/lib/i18n/{de,en}/account.json)

  • security.heading — "Sicherheit"
  • security.password und Sub-Keys
  • security.twoFactor und Sub-Keys
  • security.passkey und Sub-Keys
  • Alle Fehlermeldungen, Labels, Status-Texte

4. i18n-Store erweitern (frontend/src/lib/stores/i18n.svelte.ts)

  • Keine Aenderung noetig — dynamischer Import deckt account.json automatisch ab

Technische Hinweise

  • Kein Backend-Change — BFF routet direkt an Keycloak Account Console API mit User-JWT
  • Keycloak Account Console API v2: POST /realms/{realm}/account/password, GET /realms/{realm}/account/credentials, etc.
  • TOTP-Secret wird von Keycloak als BASE32 generiert
  • Der QR-Code wird clientseitig via qrcode-Lib gerendert (kein externer Service)
  • Backup-Codes werden nur einmalig nach erfolgreicher TOTP-Registrierung angezeigt

Referenzen

  • #129 (Keycloak-Realm-Konfiguration)
  • #163 (Doku)
### Beschreibung Das Frontend (BFF + UI) muss Account-Sicherheitseinstellungen erhalten: Passwort wechseln, TOTP/2FA einrichten, Passkeys (WebAuthn) registrieren und verwalten. Die Kommunikation mit Keycloak erfolgt via BFF-Proxy unter Verwendung des User-eigenen JWT (session_token) gegen die Keycloak Account Console API. Abhaengig von #129 (Keycloak-Realm-Konfiguration). ### Umsetzung **1. BFF-Routen (`frontend/src/routes/api/auth/`)** - [ ] `change-password/+server.ts` — `POST`: Proxied an `POST /realms/{realm}/account/password` mit Body `{currentPassword, newPassword, confirmation}` - [ ] `credentials/+server.ts` — `GET`: Listet Credentials von `GET /realms/{realm}/account/credentials` (TOTP-Status, registrierte Passkeys) - [ ] `credentials/totp/+server.ts` — `GET`: Holt TOTP-Setup-Daten (BASE32-Secret, QR-Code-URL) von `GET /realms/{realm}/account/credentials/totp` - [ ] `credentials/totp/+server.ts` — `POST`: Schliesst TOTP-Registrierung ab (`POST /realms/{realm}/account/credentials/totp` mit `{secret, code}`) - [ ] `credentials/[id]/+server.ts` — `DELETE`: Credential entfernen (`DELETE /realms/{realm}/account/credentials/{id}`) - [ ] `credentials/[id]/+server.ts` — `PUT`: `userLabel` aktualisieren (`PUT /realms/{realm}/account/credentials/{id}` mit `{userLabel}`) - [ ] `credentials/passkey/register/+server.ts` — `POST`: WebAuthn-Passkey-Registrierung initiieren + abschliessen Neue Hilfsfunktion in `frontend/src/lib/server/auth.ts`: - [ ] `callKeycloakAccountApi(token, method, path, body?)` — generischer Proxy zu Keycloak (analog `tryRefreshToken`) Neue npm-Abhaengigkeit: - [ ] `qrcode` zum Rendern des TOTP-QR-Codes (Check: mit Projekt-Konventionen kompatibel) **2. UI — Account-Sicherheitseinstellungen (`frontend/src/routes/app/account/+page.svelte`)** Folgende Cards werden unterhalb der bestehenden eingefuegt: **a) Passwort aendern** - [ ] Formular: altes Passwort, neues Passwort, Wiederholung - [ ] Clientseitige Validierung (Mindestlaenge, Komplexitaet) - [ ] `POST /api/auth/change-password` - [ ] Erfolgs-/Fehlermeldungen (ErrorAlert) **b) 2FA / TOTP** - [ ] Statusanzeige: aktiv/inaktiv (Icon/Farbcode) - [ ] **Setup-Flow** (bei Inaktiv): - GET /api/auth/credentials/totp → QR-Code (via qrcode-Lib) + BASE32-Secret + Copy-Button - Sensible Daten werden **nur im fluechtigen Komponenten-State** gehalten (`$state()`), nie gecached/persistiert - Nach Verlassen der Seite oder Bestaetigung: QR-Code und Secret verschwinden - Bestaetigungs-Input (6-stelliger Code) → POST /api/auth/credentials/totp - Nach erfolgreicher Bestaetigung: einmalige Anzeige der Backup-Codes mit Download-Button - [ ] **Deaktivierung** (bei Aktiv): DELETE /api/auth/credentials/{totp-credential-id} **c) Passkeys (WebAuthn)** - [ ] Liste registrierter Passkeys (GET /api/auth/credentials → filter passkey) - [ ] Pro Eintrag: userLabel, Typ, Erstellungsdatum (gekuerzt) - [ ] **Umbenennen:** Inline-Edit des userLabel → PUT /api/auth/credentials/{id} - [ ] **Neuen Passkey registrieren:** - Optionales Eingabefeld "Name" (wird als userLabel uebergeben) - Flow: BFF holt Challenge von Keycloak → Browser `navigator.credentials.create()` → BFF schliesst ab - [ ] **Loeschen:** DELETE /api/auth/credentials/{id} **3. i18n (`frontend/src/lib/i18n/{de,en}/account.json`)** - [ ] `security.heading` — "Sicherheit" - [ ] `security.password` und Sub-Keys - [ ] `security.twoFactor` und Sub-Keys - [ ] `security.passkey` und Sub-Keys - [ ] Alle Fehlermeldungen, Labels, Status-Texte **4. i18n-Store erweitern (`frontend/src/lib/stores/i18n.svelte.ts`)** - [ ] Keine Aenderung noetig — dynamischer Import deckt account.json automatisch ab ### Technische Hinweise - Kein Backend-Change — BFF routet direkt an Keycloak Account Console API mit User-JWT - Keycloak Account Console API v2: `POST /realms/{realm}/account/password`, `GET /realms/{realm}/account/credentials`, etc. - TOTP-Secret wird von Keycloak als BASE32 generiert - Der QR-Code wird clientseitig via qrcode-Lib gerendert (kein externer Service) - Backup-Codes werden nur **einmalig** nach erfolgreicher TOTP-Registrierung angezeigt ### Referenzen - #129 (Keycloak-Realm-Konfiguration) - #163 (Doku)
niboer commented 2026-07-01 16:20:50 +00:00
Author
Owner
Copy link

Umsetzung abgeschlossen in Commit 7588b3c:

  • BFF-Routen: change-password (POST), credentials (GET), credentials/totp (GET+POST), credentials/[id] (DELETE+PUT), credentials/passkey/register (POST)
  • UI: Passwort-Card mit Validierung, 2FA/TOTP-Card mit QR-Code+BASE32-Secret+Backup-Codes, Passkey-Card mit Liste+Umbenennen+Registrieren+Loeschen
  • i18n: DE und EN fuer alle security.*-Keys
  • Abhaengigkeit: qrcode fuer QR-Code-Generierung
Umsetzung abgeschlossen in Commit 7588b3c: - BFF-Routen: change-password (POST), credentials (GET), credentials/totp (GET+POST), credentials/[id] (DELETE+PUT), credentials/passkey/register (POST) - UI: Passwort-Card mit Validierung, 2FA/TOTP-Card mit QR-Code+BASE32-Secret+Backup-Codes, Passkey-Card mit Liste+Umbenennen+Registrieren+Loeschen - i18n: DE und EN fuer alle security.*-Keys - Abhaengigkeit: qrcode fuer QR-Code-Generierung
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
v0.5.0
v0.4.0
v0.3.0
v0.2.2
v0.2.1
v0.2.0
v0.1.0
Labels
Clear labels   
component/backend
Backend-Komponente

  
component/docs
Dokumentation (README, design.md, AGENTS.md)

  
component/e2e
E2E-Testinfrastruktur (Playwright, Docker-E2E-Runner)

  
component/frontend
Frontend (Cloudflare Worker, BFF, UI)

  
component/infra
Infrastruktur (Docker, CI/CD, Build)

  
component/keycloak
Keycloak (Realm, Theme, Admin API)

  
prio/high
Hohe Prioritaet (blockierend/kritisch)

  
prio/low
Niedrige Prioritaet

  
prio/medium
Mittlere Prioritaet

  
type/bug
Fehler oder unerwartetes Verhalten

  
type/chore
Wartungs- und Konfigurationsaufgaben

  
type/feature
Neues Feature

  
type/refactor
Refactoring

  
type/test
Tests

No labels
component/backend
component/docs
component/e2e
component/frontend
component/infra
component/keycloak
prio/high
prio/low
prio/medium
type/bug
type/chore
type/feature
type/refactor
type/test
Milestone
Clear milestone
No items
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
WompSchmiede/FamilienFeierPlaner#162
No description provided.