Domain Routing Login Block for React

All of it. The four rules are a typed list, a provider press shows where a real sign-in would go and nothing redirects, and a password sign-in waits under a spinner and shows a result that says nothing was sent. In a product, look the domain up on your server when the email is submitted, return the company's rule (its providers and whether a password is allowed), and redirect with a SAML request or an OpenID Connect authorization request where the code says so. The three states of the card, one provider, a choice and no rule, are the three answers your lookup can give.

The card reads the text after the last @, lower-cased. A domain that matches a rule shows its provider at once. A domain that matches nothing waits until typing pauses for half a second, or the field loses focus, and then, if the address is a full one, the card turns into a password field with a sentence naming the domain. Until then it shows the hint, so a half-typed domain never gets a verdict.

It is the rule an admin chose when a company allows passwords next to single sign-on. The card says so and offers Use password instead, which swaps in a password field and a Sign in button; Use Google Workspace instead goes back. A Required rule has no such button, and the space where it would be is held so nothing moves.

Lowrie Logistics has staff on one provider and drivers and contractors on another, so the card becomes two native radio rows with the audience under each name. The first is chosen, and the button names the one in hand. They are plain radios named by their text, so the arrow keys move between them on every target.

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

It says that an admin set a sign-in rule for the domain, that the page reads the domain after the @ and sends everyone at it to the same place, and whether passwords are on or off for it. It opens from the keyboard, Escape closes it and focus returns to the link that opened it. It appears only on a card that has a rule to explain, and the room is held when it doesn't.