Backup Codes Page
Recovery code save step with an eight code grid, download and copy actions, a saved confirmation checkbox, and a one time use warning.
Recovery code save step with an eight code grid, download and copy actions, a saved confirmation checkbox, and a one time use warning.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Backup Codes Page is the one time recovery codes screen shown right after two factor setup. Eight codes sit in a two column mono grid, framed by a subheading that tells the user each code signs them in once if they lose their authenticator, and to store them like a password somewhere off this device. Download .txt and Copy all buttons cover the two ways people actually save them, and a saved-them confirmation checkbox gates the intent before the Continue to Acme button.
Codes are one const string array rendered into the grid. The divider note is the honest part: these codes are shown once, regenerating from Security settings invalidates all 8 immediately, and a used code never works twice. The footer nudges toward paper, since a locked drawer beats a screenshot sitting in a camera roll.
Reach for this block as the final step of two factor enrollment, wired to your recovery code generator. Render the codes server side once and never show them again; persist only their hashes so a used code can be retired.
A natural flow around it on an Application Pro page:
Before
After
One strong use is post-enrollment code reveal. Other shapes:
Tip: gate the Continue button behind the saved-them checkbox; the friction is the point, since a user who clicks past this screen is the one who files a lockout ticket a month later.