Two Factor Status Card
Two-factor authentication status panel showing the active method, backup codes remaining, and an enrollment prompt with the security case for new accounts.
Two-factor authentication status panel showing the active method, backup codes remaining, and an enrollment prompt with the security case for new accounts.
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
Two Factor Status Card is the security-at-a-glance panel on a profile page, two states in one component: when 2FA is on it shows the ShieldCheck icon, the Enabled badge, the method (Authenticator app, added Jan 2026), and a ruled list with 6 of 10 backup codes remaining plus a Change method and a View codes action each; when it is off it shows ShieldOff, a Not enabled outline badge, and the plain honest case for turning it on: even if someone gets your password they cannot sign in without your second factor.
The two states are driven by a single twoFactorOn const. The backup code count is the detail that prevents the support ticket where someone uses all their codes and cannot get back in.
Reach for this block on the account security page, wired to your 2FA status endpoint. Show the off state as the default for new accounts to prompt enrollment.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the account security overview. Other 2FA panels:
Tip: the backup codes remaining count is not cosmetic, surface it prominently so users know to regenerate before they run out.