Email First Sign In Login Block for React

The lookup knows two typed accounts, maya@billfinch.example and luis@billfinch.example, and waits 700 milliseconds, so every visitor gets the same answer and nothing is sent. Signing in and creating an account wait the same way, then show what happened in the card's own space, with a polite status message saying nothing was sent. In a product, post the address to your own endpoint where the code says so, keep the busy state until it answers, and branch on what it says: a password step, a redirect to single sign-on, a magic link, or sign-up.

It does, and that is the price of this flow: anyone can try addresses and see which go to the password step. Rate-limit the lookup per address and per client, answer in the same time whether or not the account exists, and ask for a challenge after repeated misses. If revealing it is not acceptable for your product, send every address to a step that can't be told apart, such as a sign-in link by email.

Back returns to the email step with the address still in the field and focus on it. The password, the name and any problems are cleared, so nothing sensitive stays in the page. While you are on the password or sign-up step the address stays above the field in a badge, so it's always clear which account you are signing in to.

A disabled button can't say why, and keyboard users can't reach it. Pressing Continue with no address, or one that isn't a full address, marks the field invalid, writes one sentence under it and moves focus there; each step does the same for its own fields. Each field keeps a line for its problem even when there is none, so nothing moves when one appears.

The steps and the result sit in one grid cell, and the ones not showing are invisible, out of the tab order and hidden from assistive technology, so a keyboard or screen reader user only meets the step in hand. The cell is as tall as the tallest step, account creation, all the time, which matters because the page is centered: anything that grew would move the heading too. With reduced motion the steps simply swap.

The email is a real email field with autocomplete username, the password step asks for current-password and account creation for new-password, so a manager can offer the saved address on the first step, the password on the second and a new password on sign-up. Managers differ in how well they follow two-step sign-ins; if one of yours needs both fields on one screen to save a sign-in, keep the address in the second step as a hidden field.