MFA Enrollment Page
A required two factor enrollment gate with three method rows ranked by strength, the authenticator app preselected, a grace period deadline, and a skip link.
A required two factor enrollment gate with three method rows ranked by strength, the authenticator app preselected, a grace period deadline, and a skip link.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
MFA Enrollment Page is the gate shown when an org starts requiring two factor auth for everyone. The Acme lockup sits above a card headed Acme now requires two factor auth, a line naming the signed-in address, then three method rows in a radiogroup: authenticator app (tagged Recommended and preselected), security key (tagged Strongest), and text message. Each row has a muted icon tile, a name, and a one-line detail on its tradeoffs. A Continue with authenticator app button leads, and a footer note states the grace deadline plainly (June 30, 9 days away), what happens after it, and the 8 backup codes handed out at the end of setup. A skip link works until the deadline.
The methods are one typed const array of icon, name, detail, tag, and selected fields. Ranking the rows by strength and preselecting the practical default is what keeps a mandatory step from stalling.
Reach for this block when an admin turns on required MFA and the user has no second factor registered yet. Wire each row to its enrollment flow (TOTP, WebAuthn, or SMS) and read the grace deadline from the org policy.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the org-mandated MFA rollout. Other enrollment variants:
Tip: rank the methods by strength and preselect the one most people can finish in two minutes; an unranked list of equal choices is where enrollment stalls.