One-Time Link Login Block for React

All of it. Sending waits 700 ms and shows the status; opening, expiring and requesting only change local state, and a polite message says nothing was sent. In a product, create a random token on your server when the address is submitted, store its hash with an expiry 10 minutes ahead and a used flag, and email a link that carries it. When the link is opened, check the hash, the expiry and the flag, set the flag in the same step that starts the session, and refuse every later attempt. Replace the three demo controls with the real link in the email.

A link is Fresh until it is used or its 10 minutes pass. Opening a fresh link makes it Used; skipping to expiry, or the timer reaching zero, makes it Expired; a used or expired link never goes back. Requesting a new link starts a fresh one and retires the old, so a link you were sent earlier stops working the moment you ask for another. The strip, the timer line and a notice below it all follow the same state.

Yes. It starts when the link is sent, counts down from 10:00 in real time, and reaching zero expires the link. It lives in the status pane and starts over for each new link. The digits are hidden from screen readers, which get a sentence with the minutes and seconds instead. Under reduced motion the ticking digits give way to the sentence "Expires in 10 minutes".

It is part of the drawing, not a field: no input accepts it, so it opens nothing. It shows the usual pattern, a code printed in the email for people whose mail app strips buttons or opens links in the wrong browser, entered on the sign-in page itself. If you offer one, make it as single-use and short-lived as the link, and limit the attempts.

The drawn email is hidden below the large breakpoint, since it only illustrates what the status already says. The form, the status strip, the timer and the controls take the full width, and the page keeps one height whichever state shows, so nothing moves when a link is used or expires.

A disabled button can't explain itself and keyboard users can't reach it. Pressing Send 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.