fix: MFA setup completion not updating UI state

Root cause: the MFA status endpoint returned `mfa_enabled` as the JSON
key but the TypeScript MfaStatus interface expected `enabled`. At
runtime, `mfaStatus.value?.enabled` was always `undefined`, so
`isEnabled` was always false — the banner never hid and the method
cards never showed "Geconfigureerd".

Additionally, the auth store had no way to re-fetch /auth/me after
initialization, so `mfaSetupRequired` was never properly refreshed
from the backend after MFA setup.

Fixes:
- Rename `mfa_enabled` → `enabled` in the MFA status endpoint response
  to match the TypeScript type (and the /auth/me MeResource which
  already used `enabled`)
- Add `refreshUser()` to the auth store for post-initialization
  re-fetching of /auth/me
- Call `refreshUser()` in onSetupCompleted so the store reflects the
  backend state without a full page reload
- Update backend tests to match the renamed response key

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-15 22:30:58 +02:00
parent 4e6d5eb4aa
commit c62f377668
4 changed files with 23 additions and 5 deletions

View File

@@ -80,10 +80,13 @@ const backupCodesColor = computed(() => {
})
function onSetupCompleted() {
// Refetch MFA status so the method cards update (enabled, method, backup codes)
refetchMfaStatus()
// Immediately clear the MFA enforcement state so the banner disappears
// and the router guard no longer redirects
// Immediately clear the enforcement flag so the router guard unblocks navigation
authStore.mfaSetupRequired = false
// Refresh the full /auth/me response into the store so the flag stays
// correct on subsequent navigations (without needing a full page reload)
authStore.refreshUser()
}
function onDisabled() {