Two Factor Page
TOTP verification with six OTP slots, device trust checkbox, backup code link, and human recovery promise.
TOTP verification with six OTP slots, device trust checkbox, backup code link, and human recovery promise.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Two Factor Page centers the InputOTP strip, six size-11 slots with "704" already entered to show the filled state, below the heading that confirms the account: Signing in as maya@acme.com. The hint below the slots notes that codes rotate every 30 seconds so the current one is fine. A trust-this-device checkbox lets the user skip the check for 30 days. The fallback links are concrete: Use a backup code instead above the border, and a footer that names security@acme.com and promises a human verifies and resets two factor within one business day.
Slots come from a const index array, six items rendered once. The device trust checkbox and the backup code link together cover the two most common support paths, which means fewer tickets when they land.
Reach for this block as the second factor step in your sign-in flow, wired to your TOTP verification endpoint. Wire the trust checkbox to a long-lived cookie and the backup code link to your recovery code flow.
A natural flow around it on an Application Pro page:
Before
After
One strong use is TOTP app verification. Other shapes:
Tip: name the account being signed into in the subheading; on shared machines it catches the wrong account before the code is entered.