bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: set preferred MFA method from account settings

Browse Source 
Adds the ability for users to change their preferred/primary MFA method
when both TOTP and email are available.

Backend:
- Add PUT /auth/mfa/preferred-method endpoint with validation
  (method must be totp/email, MFA must be enabled, TOTP must be
  configured if selecting totp)
- Add totp_configured and email_configured fields to MFA status
  endpoint (totp = has secret + enabled, email = always when enabled)
- Fix setupEmail() to preserve mfa_secret so TOTP config survives
  when email is set up as a second method

Frontend (organizer + portal):
- Add useSetPreferredMethod() composable to useMfa.ts
- Add totp_configured/email_configured to MfaStatus type
- SecurityTab method cards now show "Primaire methode" chip on the
  preferred method and "Als primair instellen" button on the other
- Portal security section shows per-method rows with status chips
  and primary switching

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-15 22:47:34 +02:00
parent a77986334c
commit d5fb15e5fe
9 changed files with 225 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
api/app/Http/Controllers/Api/V1/Auth/MfaSetupController.php
View File

@@ -11,6 +11,7 @@ use App\Enums\MfaMethod;
use App\Services\MfaService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Validation\Rule;
final class MfaSetupController extends Controller
{
@@ -140,9 +141,40 @@ final class MfaSetupController extends Controller
'confirmed_at' => $user->mfa_confirmed_at?->toIso8601String(),
'backup_codes_remaining' => $this->mfaService->getRemainingBackupCodeCount($user),
'is_required' => $this->mfaService->isMfaRequired($user),
'totp_configured' => $user->mfa_enabled && $user->mfa_secret !== null,
'email_configured' => $user->mfa_enabled,
]);
}
public function setPreferredMethod(Request $request): JsonResponse
{
$request->validate([
'method' => ['required', Rule::in(['totp', 'email'])],
]);
$user = $request->user();
if (! $user->mfa_enabled) {
return $this->error('MFA is niet ingeschakeld.', 422);
}
$method = $request->input('method');
if ($method === 'totp' && $user->mfa_secret === null) {
return $this->error('Authenticator app is niet geconfigureerd.', 422);
}
$user->update(['mfa_method' => $method]);
activity('mfa')
->causedBy($user)
->performedOn($user)
->withProperties(['method' => $method])
->log('mfa.preferred_method.changed');
return $this->success(['method' => $method], 'Primaire methode gewijzigd.');
}
private function verifyBackupCodeForDisable(\App\Models\User $user, string $code): void
{
$normalizedCode = strtoupper(str_replace([' ', '-'], '', $code));

4
api/app/Services/MfaService.php
View File

@@ -90,14 +90,16 @@ final class MfaService
/**
* Setup email as MFA method (simpler than TOTP — no QR code).
* Sends a verification code to confirm.
* Preserves the TOTP secret so both methods can coexist.
*/
public function setupEmail(User $user): void
{
if (! $user->mfa_enabled) {
$user->update([
'mfa_method' => MfaMethod::EMAIL->value,
'mfa_secret' => null,
'mfa_confirmed_at' => null,
]);
}
$this->sendEmailCode($user);
}

1
api/routes/api.php
View File

@@ -137,6 +137,7 @@ Route::middleware('auth:sanctum')->group(function () {
Route::post('auth/mfa/disable', [MfaSetupController::class, 'disable']);
Route::post('auth/mfa/backup-codes', [MfaSetupController::class, 'regenerateBackupCodes']);
Route::get('auth/mfa/status', [MfaSetupController::class, 'status']);
Route::put('auth/mfa/preferred-method', [MfaSetupController::class, 'setPreferredMethod']);
// Trusted devices
Route::get('auth/trusted-devices', [TrustedDeviceController::class, 'index']);

66
apps/app/src/components/account-settings/SecurityTab.vue
View File

@@ -7,6 +7,7 @@ import {
useRevokeDevice,
useRevokeAllDevices,
useRegenerateBackupCodes,
useSetPreferredMethod,
} from '@/composables/api/useMfa'
import MfaTotpSetupDialog from '@/components/settings/MfaTotpSetupDialog.vue'
import MfaEmailSetupDialog from '@/components/settings/MfaEmailSetupDialog.vue'
@@ -59,6 +60,8 @@ const revokeDeviceMutation = useRevokeDevice()
const revokeAllMutation = useRevokeAllDevices()
const regenerateCodesMutation = useRegenerateBackupCodes()
const setPreferredMethodMutation = useSetPreferredMethod()
const showTotpSetup = ref(false)
const showEmailSetup = ref(false)
const showDisableDialog = ref(false)
@@ -69,8 +72,13 @@ const regenerateError = ref('')
const isEnabled = computed(() => mfaStatus.value?.enabled ?? false)
const totpConfigured = computed(() => isEnabled.value && mfaStatus.value?.method === 'totp')
const emailConfigured = computed(() => isEnabled.value && mfaStatus.value?.method === 'email')
const totpConfigured = computed(() => mfaStatus.value?.totp_configured ?? false)
const emailConfigured = computed(() => mfaStatus.value?.email_configured ?? false)
const preferredMethod = computed(() => mfaStatus.value?.method ?? null)
function handleSetPreferred(method: 'totp' | 'email') {
setPreferredMethodMutation.mutate(method)
}
const backupCodesRemaining = computed(() => mfaStatus.value?.backup_codes_remaining ?? 0)
const backupCodesColor = computed(() => {
@@ -298,14 +306,30 @@ function copyRegeneratedCodes() {
</div>
</div>
<p
v-if="totpConfigured && mfaStatus?.method === 'totp'"
class="text-body-2 text-medium-emphasis mb-3"
<template v-if="totpConfigured">
<VChip
v-if="preferredMethod === 'totp'"
color="primary"
variant="tonal"
size="small"
class="mt-1"
>
Primaire methode
</p>
</VChip>
<VBtn
v-else
variant="text"
size="small"
color="primary"
class="mt-1 ms-n2"
:loading="setPreferredMethodMutation.isPending.value"
@click="handleSetPreferred('totp')"
>
Als primair instellen
</VBtn>
</template>
<p
v-else-if="!totpConfigured"
v-else
class="text-body-2 text-medium-emphasis mb-3"
>
Gebruik Google Authenticator, Authy of een andere app.
@@ -315,6 +339,7 @@ function copyRegeneratedCodes() {
v-if="totpConfigured"
variant="tonal"
size="small"
class="mt-2"
@click="showTotpSetup = true"
>
Opnieuw instellen
@@ -367,14 +392,30 @@ function copyRegeneratedCodes() {
</div>
</div>
<p
v-if="emailConfigured && mfaStatus?.method === 'email'"
class="text-body-2 text-medium-emphasis mb-3"
<template v-if="emailConfigured">
<VChip
v-if="preferredMethod === 'email'"
color="primary"
variant="tonal"
size="small"
class="mt-1"
>
Primaire methode
</p>
</VChip>
<VBtn
v-else
variant="text"
size="small"
color="primary"
class="mt-1 ms-n2"
:loading="setPreferredMethodMutation.isPending.value"
@click="handleSetPreferred('email')"
>
Als primair instellen
</VBtn>
</template>
<p
v-else-if="!emailConfigured"
v-else
class="text-body-2 text-medium-emphasis mb-3"
>
Ontvang een code per e-mail bij elke login.
@@ -384,6 +425,7 @@ function copyRegeneratedCodes() {
v-if="emailConfigured"
variant="tonal"
size="small"
class="mt-2"
@click="showEmailSetup = true"
>
Opnieuw instellen

15
apps/app/src/composables/api/useMfa.ts
View File

@@ -112,6 +112,21 @@ export function useMfaStatus() {
})
}
export function useSetPreferredMethod() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (method: 'totp' | 'email') => {
const { data } = await apiClient.put<ApiResponse<{ method: string }>>('/auth/mfa/preferred-method', { method })
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['mfa-status'] })
},
})
}
// ─── Trusted devices ───
export function useTrustedDevices() {

2
apps/app/src/types/mfa.ts
View File

@@ -12,6 +12,8 @@ export interface MfaStatus {
confirmed_at: string | null
backup_codes_remaining: number
is_required: boolean
totp_configured: boolean
email_configured: boolean
}
export interface MfaUserStatus {

15
apps/portal/src/composables/api/useMfa.ts
View File

@@ -109,6 +109,21 @@ export function useMfaStatus() {
})
}
export function useSetPreferredMethod() {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (method: 'totp' | 'email') => {
const { data } = await apiClient.put<ApiResponse<{ method: string }>>('/auth/mfa/preferred-method', { method })
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['mfa-status'] })
},
})
}
// ─── Trusted devices ───
export function useTrustedDevices() {

95
apps/portal/src/pages/profiel.vue
View File

@@ -7,6 +7,7 @@ import {
useTrustedDevices,
useRevokeDevice,
useRevokeAllDevices,
useSetPreferredMethod,
} from '@/composables/api/useMfa'
import { apiClient } from '@/lib/axios'
import MfaTotpSetupDialog from '@/components/settings/MfaTotpSetupDialog.vue'
@@ -209,16 +210,19 @@ const { data: trustedDevices, refetch: refetchDevices } = useTrustedDevices()
const revokeDeviceMutation = useRevokeDevice()
const revokeAllMutation = useRevokeAllDevices()
const setPreferredMethodMutation = useSetPreferredMethod()
const showTotpSetup = ref(false)
const showEmailSetup = ref(false)
const showDisableDialog = ref(false)
const isMfaEnabled = computed(() => mfaStatus.value?.enabled ?? false)
const mfaMethodLabel = computed(() => {
if (mfaStatus.value?.method === 'totp') return 'Authenticator app'
if (mfaStatus.value?.method === 'email') return 'E-mailcode'
const totpConfigured = computed(() => mfaStatus.value?.totp_configured ?? false)
const emailConfigured = computed(() => mfaStatus.value?.email_configured ?? false)
const preferredMethod = computed(() => mfaStatus.value?.method ?? null)
return null
})
function handleSetPreferred(method: 'totp' | 'email') {
setPreferredMethodMutation.mutate(method)
}
function onMfaSetupCompleted() { refetchMfaStatus() }
function onMfaDisabled() { refetchMfaStatus(); refetchDevices() }
@@ -668,27 +672,94 @@ function viewEvent(eventId: string) {
</template>
<template v-else>
<div class="d-flex align-center justify-space-between mb-3">
<div>
<!-- Per-method status -->
<div class="d-flex flex-column gap-3 mb-4">
<!-- TOTP row -->
<div class="d-flex align-center justify-space-between">
<div class="d-flex align-center">
<VIcon
icon="tabler-device-mobile"
size="20"
class="me-2"
/>
<span class="text-body-2 font-weight-medium me-2">Authenticator app</span>
<VChip
:color="totpConfigured ? 'success' : 'default'"
variant="tonal"
size="x-small"
>
{{ totpConfigured ? 'Actief' : 'Niet ingesteld' }}
</VChip>
<VChip
v-if="totpConfigured && preferredMethod === 'totp'"
color="primary"
variant="tonal"
size="x-small"
class="ms-1"
>
Primair
</VChip>
</div>
<VBtn
v-if="totpConfigured && preferredMethod !== 'totp'"
variant="text"
size="small"
color="primary"
:loading="setPreferredMethodMutation.isPending.value"
@click="handleSetPreferred('totp')"
>
Als primair
</VBtn>
</div>
<!-- Email row -->
<div class="d-flex align-center justify-space-between">
<div class="d-flex align-center">
<VIcon
icon="tabler-mail"
size="20"
class="me-2"
/>
<span class="text-body-2 font-weight-medium me-2">E-mailcode</span>
<VChip
color="success"
variant="tonal"
size="small"
class="me-2"
size="x-small"
>
Ingeschakeld
Actief
</VChip>
<VChip
v-if="preferredMethod === 'email'"
color="primary"
variant="tonal"
size="x-small"
class="ms-1"
>
Primair
</VChip>
<span class="text-body-2">via {{ mfaMethodLabel }}</span>
</div>
<VBtn
v-if="preferredMethod !== 'email'"
variant="text"
size="small"
color="primary"
:loading="setPreferredMethodMutation.isPending.value"
@click="handleSetPreferred('email')"
>
Als primair
</VBtn>
</div>
</div>
<VBtn
color="error"
variant="tonal"
size="small"
class="mb-4"
@click="showDisableDialog = true"
>
Uitschakelen
</VBtn>
</div>
<!-- Trusted devices -->
<template v-if="trustedDevices && trustedDevices.length > 0">

2
apps/portal/src/types/mfa.ts
View File

@@ -12,6 +12,8 @@ export interface MfaStatus {
confirmed_at: string | null
backup_codes_remaining: number
is_required: boolean
totp_configured: boolean
email_configured: boolean
}
export interface MfaUserStatus {