Two-Step Setup Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The Turn on two-step button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SetupFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

The three views, and the closing note, share one grid cell with the unseen ones made invisible and inert, so the dialog keeps its height whichever you are on, and Back keeps what you typed or ticked. Next on the second step stays off until you tick that you saved the codes. The Steps header only shows where you are: it isn't a row of buttons, so the order can't be skipped.

The QR code is real and a phone's authenticator can scan it: it encodes an otpauth:// link with an account, an issuer and a key. But the key and the eight backup codes are typed in the file so the block is the same on every render, which means everyone sees the same ones. Never ship them: generate a key and codes for each account on your server and put them in place of SETUP_URI, SECRET and BACKUP_CODES.

Only that you typed 482913, the code in the hint, and it counts three tries: a wrong code says how many are left, and after the third the field locks until you go back or close the dialog. In your app verify the code on the server as a time-based one-time password (RFC 6238) against the key you stored for that person, allow a step of clock drift either way, switch two-step sign-in on only after a first code passes, and store the backup codes hashed.

Nothing is enrolled. Copy uses the real clipboard and Download saves a real text file of the typed codes, but a finished setup only turns the drawn Two-step row to On and says so in the polite status; the header's button becomes Start over, which turns it Off again to try another code.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first control of the first step and stays inside until it closes, and Escape, Cancel and the close button return focus to the header's button. Each step is announced by the polite status line, and the QR code carries a text alternative: the key beside it. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. On a phone the copy shown on load docks to the foot of the page as a bottom sheet, the codes become one column and the body scrolls above the pinned actions; the real dialog keeps the Dialog's own phone layout.