Identity Provider Login Block for React

All of it. The ten providers and the two Connected before marks are typed, a choice only changes the tile and the button, and the hand-off says where a real sign-in would go while nothing opens or is sent. In a product, build the list from your connections (the ones an admin enabled, the social providers you offer), mark the ones this browser signed in with from a first-party cookie, and redirect with a SAML request or an OpenID Connect or OAuth authorization request where the code says so.

It matches the text of each name, ignoring case, so ok finds Okta and micro finds Microsoft Entra ID and Microsoft, and the group counts follow what is shown. Nothing is selected by fuzzy ranking. A polite line reads the count about half a second after the last keystroke ("1 provider matches ok."), never once per letter, and a choice speaks at once and cancels the count still waiting.

Type to filter, the up and down arrow keys move the highlighted row, Enter chooses it, and Escape clears the field when it has text. Tab then goes to the button, so typing a name, pressing Enter, then Tab and Enter signs in from the keyboard.

The list's own empty state names what was typed and suggests one word; the height of the list never changes. The way out is under the button: Sign in with email instead, for people whose provider isn't listed.

A disabled button can't explain itself and keyboard users can't reach it. Pressed with nothing chosen it says "Choose a provider from the list first." and moves focus to the search field. Once a provider is chosen it names it, and it keeps its width because the label is the only thing that changes.

Real providers (Okta, Microsoft Entra ID, Google Workspace, OneLogin, Google, Microsoft, Apple) are named in text with a neutral tile of two typed letters, never a logo or a brand color. The custom ones are a school district's own SAML, OpenID Connect and LDAPS connections, so their names are invented; drop official marks in where the code marks the icon slot if you have the right to use them.