shadcn.io is not affiliated with official shadcn/ui
Two-Factor Setup Notification Block for Solid
An account-security prompt to turn on two-factor sign-in: three radio cards for the method, a QR code with a made-up key and a six-digit code field for the app, a masked number for text messages, and a Turn on button that accepts the printed demo code.
Installation
Overview
Ask someone to add a second step to sign-in and let them finish it in the same place, with this two-factor prompt for Solid with Ark UI. It is Keyhallow, an account-security service: a quiet start column gives three reasons, and a hairline frame with a plus mark on each corner holds the choice. A Radio Group of three cards offers an authenticator app, a text message and a security key, one line each. The app draws a QR Code of a made-up setup key; the app and the text message both ask for the six digits in an Input OTP, and the key explains that this demo reads none. The hint prints the code that passes (123456), and Turn on two-factor, the one Shine Button, checks it. The result replaces the setup in the same height. Guides draw the lines. For security settings, account protection and sign-in flows.
FAQ
Is two-factor really turned on?
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.
Which code works, and when is it checked?
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.
Why does each method show something different?
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.
Can I paste the code?
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.
Is it accessible?
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.