Social Buttons Login Block for React

Nothing leaves the page. A provider row shows "Continue with GitHub" with a note that Lumenroll would send you to that provider's own sign-in page, and a Back button; the "Last used" badge moves to the row you pressed. Email sign-in waits under a spinner for less than a second, then shows "You're signed in" and a polite status message says nothing was sent. Reload and GitHub is the last used again, because nothing is remembered. To wire it for real, point each row at your OAuth or OpenID Connect redirect and post the email form to your auth endpoint where the code says so.

Store the method after a successful sign-in, not when a row is pressed, in a first-party cookie or in local storage, and read it when the page renders so the badge is there on the first paint instead of popping in. Here it is a typed constant, LAST_ON_LOAD, and the state moves with each press so you can see the badge travel. Signing in with email moves it to a quiet "Last used on this browser" line under the email button, since email isn't one of the four rows.

Opening the email form makes the page taller, and a centered page would move its heading up by half of that. This one is start-aligned, with more room above than the other sign-in pages, so everything above the form stays where it is and the page grows downward. Pressing "Sign in with email" hides the button, shows the two fields and the Sign in button, moves focus to the email field and says so in the polite status message. "Use a provider instead" puts it away and returns focus to the button that opened it.

A disabled button can't explain itself, and keyboard users can't reach it. Pressing Sign in with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first. Typing clears that field's problem. Each field keeps a line for its problem even when there is none, so a problem never pushes the page.

A provider's logo comes with its own usage rules, so the block ships a neutral tile with two letters (Go, Gh, Ap, Ms) and says the provider's name in the button. Drop in the official marks from each provider's brand guidelines where the code marks the icon slot. To add a row, add an entry to PROVIDERS with its name, a slug and its two letters; the list, the "Last used" logic and the result all follow.

On a phone the rows show only the provider's name; the words "Continue with" stay in the button's name for screen readers, so each row still reads "Continue with GitHub", followed by "Last used" where it applies. The rows are real buttons in a list named "Sign in with", in the order they appear. The email button is a disclosure: it is named "Sign in with email" and says it controls the pair of fields.