Backup Codes Page

About this block

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.

When to use

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

• Auth pages

After

• Settings pages

What you can display

One strong use is post-enrollment code reveal. Other shapes:

• Regenerate confirm. The same grid with a warning that the previous set is now dead before the new codes show.
• Codes remaining. A settings view counting how many of the 8 are still unused, with a regenerate action.
• Print layout. A stripped card sized for paper with the account name and generation date in the header.

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.