Design System

Step-up

Shared re-authentication prompt fired whenever a sensitive action returns 403 step_up_required. Password field plus an optional 6-digit code (driven by mfaEnrolled); backup codes are accepted in the same field — the api dispatches on format.

Tap a button below to walk through each variant. Fixtures here resolve / reject in-memory so the modal can be exercised without the api.

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

Variants

Password-only — user without MFA

The simplest path: just a password. Used pre-mandatory-MFA rollout for patients.

With MFA — TOTP + backup code accepted

Provider + HQ + any post-rollout patient. Accepts a 6-digit TOTP or an 8-12 char backup code in the same field.

With caller reason

Callers pass a reason string when the context is non-obvious — e.g. switching HQ PC context, revealing PHI.

Failing submit — inline error

onSubmit rejects so the modal shows the inline error banner; user can correct credentials and retry.