Magic Link Login Block for React

Everything: the form checks the address, waits 700 ms and shows the inbox state, and a polite status message says "This demo sent nothing". Nothing is emailed and no token exists. In a product, post the address to your auth endpoint where the code says so. The server creates a single-use token that expires soon (15 minutes is common), stores only its hash, and emails a link that carries it. The page that link opens exchanges the token for a session and discards it.

Yes. Pressing Resend link starts the count: the button reads Resend in 30s, ticks down once a second, and a fill drains behind the label, run by a CSS animation whose end is the end of the wait. Pressing it while it counts does nothing, and focus stays on it. The first send starts the same count, so the button is already waiting when the inbox state appears. A real server should enforce its own limit too, since a page's timer can be skipped.

No, and yours shouldn't. The inbox state reads the same for every well-formed address, whether or not an account exists; your server decides quietly whether to send a sign-in link, a sign-up link or nothing. Only a malformed address gets a problem message.

In the demo it only says that a real link would open your mail app. The web has no way to open the visitor's mail app directly; products usually link to the webmail they can guess from the address's domain, or to a mailto: or app link on a phone. Pick what fits your audience and keep the button a link, not a script.

A disabled button can't explain itself and keyboard users can't reach it. Pressing it with an empty or malformed address marks the field invalid, writes one sentence under it and moves focus there. Typing clears the problem, and the field keeps a line for its problem even when there is none, so nothing moves.

The form and the inbox share one grid cell, and an unseen copy of the inbox holds its height, so the centred page keeps the heading where it is. The form turns invisible and inert while the inbox shows, so nothing hidden takes focus. Under reduced motion the swap is instant.