Passwordless Login Block for React

Everything: the choice, the next-line cell and the button are local state, and each result says what Echoburrow would do and that this demo did nothing. In a product, the button starts the chosen method with your auth endpoint: send the link, ask the browser for a passkey with navigator.credentials.get(), send the text code, or show the field for an authenticator code. The account and the masked address and phone are typed constants here; read them from the first step of your own sign-in.

A choice of one among a few is what radios are for, and the browser gives the arrow keys, the group name and the checked state for free. Each row is a label around a visually hidden radio, so a click anywhere on it chooses it, the focus ring is drawn on the row, and the radio is named by its title and described by its hint. They need no library, so every version behaves the same.

All four sentences share one grid cell and the unchosen ones are invisible, so the cell is as tall as the longest and nothing moves when you choose. On a phone the rows drop their hint lines (a screen reader still reads them) to keep the button on the first screen.

Offer the strongest one your visitor can use first. Echoburrow starts on the passkey, since it can't be phished and needs nothing typed; a text code is the weakest of the four, because phone numbers can be taken over, so keep it for people who have nothing better. Whatever you pick, keep a password route for people who want one, as the link under the button does here.

Here it lists all four for one typed account. In a product, listing only the methods a person has set up tells a stranger who typed that address what they use. Ask for the identifier first, then show the methods, and show the same generic list for unknown addresses if that is a risk for you.