Two-Factor Setup Notification Block for React

No. The code is compared with a constant in the page, the QR code encodes a made-up key that opens nothing, and the text message is only described. The result reads "Two-factor is on (demo)" and says nothing was saved. In your app generate the secret on the server, show its QR code and key, and verify the six digits there before you flip anything on.

123456, printed in the hint under the field. It is checked when you press Turn on two-factor or press Enter in a slot, not as you type, so a wrong code gives one clear message ("That code does not match") rather than flickering. An incomplete code says how many digits are needed.

Each method needs its own setup: the app needs a code to scan, the text message needs a number, and a security key needs a device. The three panes share one cell, so choosing a method never moves the page, and the code field keeps its place and is hidden and inert for the key.

Yes. Pasting "123 456" or "123456" fills the six slots, and anything that is not a digit is dropped. Digits keep their order in a right-to-left layout.

The cards are one radio group with a label, each with its name and its line, and the code field is named "Enter the 6-digit code" and tied to its hint and its problem line. Only the visible setup can be reached; the hidden ones are inert. One polite status line reports every result, and Start over puts the choice back.

The reasons sit above the frame, the QR code stacks over its text, and the six slots shrink a little so they stay on one row. The button and Start over share the foot as two equal columns.