Centered Sign In Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Sign out brings the form back with your email still filled in. Pressing Continue with Google or GitHub shows where a real one would send you, with a way back. To wire it for real, post the email and password to your auth endpoint where the code says so (a server action or your auth library's sign-in call), keep the busy state until it answers, then redirect, or show its error under the field it concerns. Point each provider row at your OAuth or OpenID Connect redirect.

A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, which reads its problem out. Typing clears that field's problem. The browser's own validation bubbles are turned off with noValidate, so the messages look the same in every browser. Each field keeps a line for its problem even when there is none, so a problem never pushes the page.

Yes. The email field is type="email" with autocomplete="username", and the password field autocomplete="current-password", which is what browsers and password managers look for on a sign-in form. Both fields have real labels and names. For a sign-up page, use new-password on the password so managers offer to generate one.

A brand's logo comes with its own usage rules, so the block ships a neutral tile with two letters (Go, Gh) 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 Apple or Microsoft, add a row to PROVIDERS with its name, a slug and its two letters (Ap, Ms).

Tab runs through the provider rows, the email, Forgot password, the password, its show and hide toggle and Sign in; Enter in either field signs in. The toggle is a named button, pressed while the password shows, and Enter or Space flips it. The heading names the form, each problem is tied to its field, and after signing in focus moves to the result's heading while a polite status message says what happened, so screen reader users hear the outcome.

The page's column is at least the screen's height (min-h-svh, which doesn't jump when a phone's toolbars hide) and centers the band with a little more room below than above, so the form sits where the eye lands. It follows your theme in light and dark, and on a phone the band is tighter so the Sign in button stays on the first screen.