shadcn.io is not affiliated with official shadcn/ui
Login Providers Account Block for Solid
Go passwordless safely: the sign-in methods ranked by strength as a ladder, the four things that must hold first, and one button that turns the password off only when they all do.
Installation
Overview
Help people drop their password without locking themselves out, with this passwordless readiness panel for Solid with Ark UI. A compact header holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, a vertical divider splits two cells. At the start, the sign-in methods are ranked as a ladder from a passkey down to the password: a five-bar strength meter, the method's name with a word for its strength (a real service such as Google gets a neutral lettermark tile), one sentence and whether it is on. At the end, four things must hold before the password can go: two or more passkeys, a recovery method, saved backup codes and a passkey used in the last 14 days. Each shows its state, and each that is not done has a quiet Button that does it. The one Shine Button, Turn off password sign-in, stays quiet until all four hold, then opens an Alert Dialog saying what changes. Afterwards the same place reads Turn password back on. It's built from Alert Dialog, Badge, Button, Shine Button and Guides, with a CSS entrance only. For a security settings page, a hosting or banking account or any app adding passkeys.
FAQ
How do I fill it with my own methods and conditions?
Edit RUNGS for the ways to sign in, strongest first: an id, a name, a one-sentence line, a word for the strength and a number from 1 to 5 that draws the bars (a two-letter mark gives a service a neutral tile). Edit START for what the account has when the page opens (passkeys added, codes saved, the ISO day a passkey last signed in) and needsOf for the four conditions; each is a name, a state sentence and a met flag worked out from the setup, so the counts in both headings and the status line are always true. The dates are derived from a fixed AS_OF day, never the clock.
What stays local, and how do I make it real?
All of it. Add a passkey, Save the codes and Try a passkey change this page's state and say so in the status line ("Added a passkey in this demo."): no passkey is registered, no codes are generated and nothing is stored. Confirming the dialog only flips the password rung to Off. To wire it, call your WebAuthn endpoints from act, load the real counts and dates into START, and have confirm call the server that disables password sign-in, keeping the stored hash so Turn password back on can work.
Why is the button there but quiet at first?
Hiding the main action until it is allowed would make the page jump and leave people wondering where it went. Instead it is always in the same place, marked unavailable with aria-disabled, and pressing it explains: the status line says how many things are still to do and focus moves to the first button that does one. Once the last condition holds it becomes the trigger of the dialog, and a short line says so.
How are the methods ranked?
By what an attacker would need. A passkey is bound to the site and unlocked on your device, so it resists phishing and cannot be reused; a security key with a code is nearly as strong but a lost key needs a recovery code; a linked Google account is as strong as that account; an email link is as strong as the inbox; a password can be guessed, reused or phished. The words and bars are typed data you can change for your own ranking. The ladder shows what is on, so the count follows the Password rung when you turn it off.
How does the dialog work on each library?
open and onOpenChange, and its trigger is the Shine Button wrapped in AlertDialogTrigger with asChild. Focus starts on Keep password on, there is no outside-click close, and Escape closes it with focus back on the button.Is it accessible?
Both cells are real lists with names, each method reads as its name, its strength word and its state (the bars are hidden and the word says the same), and each condition says "Ready" or "Still to do" for screen readers as well as showing a mark. The quiet button keeps its place in the focus order, and focus follows the work: to the next thing to do, or to the main button once everything holds. One polite status line reports each result.