Two-Factor Recovery Codes Success Block for React

Nothing was turned on: the page describes a setup that already happened. The eight codes are made-up samples in CODES that open nothing, the account, method, phone and time are typed in ON and the facts, and Finish setup only changes this page (its label becomes Setup finished and the status line says so). To wire it, generate the codes on your server when two-step sign-in is switched on, store only their hashes, return the plain codes once and build CODES from that response, then point Finish setup at your security settings.

It is dimmed, not disabled, so keyboard and screen reader users can still reach it. Pressed before the box is ticked it says why in the status line ("Tick the box above first: codes are shown once.") and moves focus to the checkbox. Once the box is ticked the line reads "Ready. Finish when you like." and the button finishes. Unticking the box puts the gate back.

Yes, they use what the browser offers. Copy all writes the eight codes to the clipboard, one per line, and a screen reader hears "All eight sample codes copied" (or that the clipboard refused, which happens on a page not served over HTTPS). Download saves a text file built from the same list, named as a sample, through the Download Trigger. Neither sends anything anywhere.

Each works once, they are shown once, and generating new ones invalidates the old set. Make them from a secure random source, store only a hash of each, and show them on this page and nowhere else. The sheet marks each code as monospace text with a left-to-right direction, so the digits and dashes read the same in a right-to-left language, and the list is named "Recovery codes" for assistive technology.

The message comes first, then the sheet of codes in two columns, then the checkbox. The primary is pinned to the bottom of the screen with its status line under it, so it stays in reach while the page scrolls; from the small breakpoint up it sits in the flow after the checkbox. From the large breakpoint up the two halves sit side by side with a divider between them.