Design System

MFA enrollment

Shared TOTP enrollment flow used by every Halwel surface. Three phases — fetch secret, scan QR + verify 6-digit code, save the 10 backup codes — driven by a single component that the patient, provider, and HQ apps mount with their own HTTP plumbing.

Tap a button below to walk through each mode. The fixtures here are static — the verify step accepts any 6 digits in the demo and shows 10 deterministic backup codes.

import from @halwel/ui/components/auth/MfaEnrollmentModal

Variants

Dismissible — settings opt-in

Cancel + esc + backdrop click all close the modal until backup codes are shown. Mirrors the patient/provider/HQ settings/security card flow.

Required — first-login onboarding gate

No cancel affordance, escape ignored. Used by /onboarding/mfa for provider + HQ first logins.

Failing verify — error inline

Calls onConfirm that always rejects so you can see the inline error banner state.