Enterprise SSO Login Block for React

All of it. The three workspaces are a typed list, Continue with SSO shows where a real sign-in would go and nothing redirects or is sent, and a polite status message says what the lookup found. In a product, look the workspace up on your server by the address the person typed, return its protocol and its sign-in endpoint, and redirect there with a SAML request or an OpenID Connect authorization request where the code says so. Replace the typed list with that lookup and keep the same states: found, one edit away, not found.

It takes the part of the text before the first dot, slash or space, lower-cases it and drops a leading https://, so a pasted address like https://aldermoss.girder.example/login finds aldermoss. A workspace that matches shows at once. "No such workspace" waits until typing pauses for half a second, or until the field loses focus, so calderpi never scolds you on the way to calderpike. A name within two edits of a real one offers it, and "Use calderpike" puts it in the field.

It can, and that is a real trade-off. Workspace addresses are usually subdomains anyone can resolve, so naming a match gives little away. If yours are private, answer the same way for every name, say that a sign-in link will be emailed if the workspace exists, and rate-limit the lookup. This demo names matches because its list is typed and the hint under the field lists the three.

A disabled button can't explain itself and keyboard users can't reach it. Pressing Continue with an empty field or a workspace that doesn't exist 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 below it moves.

The providers are named in text only, each with a neutral tile of two typed letters (Ok, En, Gw), never a logo or a brand color. A provider's logo comes with its own usage rules; drop in the official mark where the code marks the icon slot if you have the right to use it.

On a phone the https:// at the start of the address is hidden and the suffix stays, so the field keeps room for the name; the page is centered and the answer box keeps one height for every state, so the button never moves. In an RTL page the address, the suffix and the workspace names keep their own direction, and the rest of the text and the layout mirror.