Two Factor Setup Dialog
A two factor setup dialog with a QR mockup beside a copyable manual key, a six cell code entry, and a one time recovery codes note.
A two factor setup dialog with a QR mockup beside a copyable manual key, a six cell code entry, and a one time recovery codes note.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Two Factor Setup Dialog is the static blueprint for the enrollment step where a user connects an authenticator app. A Step 2 of 3 badge sits beside the heading. An inline SVG QR mockup renders from a module grid, next to a monospaced manual setup key with a copy button for when the camera cannot reach the screen. Below sits a six cell code row with the first three digits filled and the fourth cell focused mid entry, plus a note that codes refresh every 30 seconds. A muted callout warns that ten one time recovery codes are issued once after this step, and the Verify button stays disabled until all six digits land.
The QR modules and code cells are typed arrays, the QR is drawn as plain rects, and the whole dialog is static markup with no Radix portal opened, so it renders correctly inside the preview iframe. Nothing here is a working scanner, it is the layout and copy of the setup moment.
Reach for this block in account security settings when a user turns on two factor authentication. Wire the copy button to the real secret, render a live QR from your provisioning URI, and enable Verify once the six digit field is complete and validated against the shared key.
A natural flow around it on an Application Pro page:
Before
After
One strong use is authenticator app enrollment with a QR and manual key. Other setup and verify dialogs:
Tip: keep the manual key beside the QR, some users enroll from the same device and cannot scan the screen.