401 Unauthorized Error Block for React

Nothing leaves the page. A provider row says, in a polite status line, that the provider's own sign-in page would open and that nothing opens here. The two email rows check what you typed (an empty field or an address that isn't whole names the problem and keeps focus in the field), then say what a real page would do: "Would redirect to your identity provider" or "A sign-in link would be emailed to you", put the row back and give it focus. To wire it for real, send Google and GitHub through your OAuth flow, look up the identity provider from the domain of the work email for single sign-on, and email a one-time link for the last row.

It doesn't: the path is the constant RETURN_TO, fixed so the block reads the same everywhere. In your app, read the requested path on the server when you decide to show this page, carry it through your sign-in flow (a next or callbackUrl parameter) and check that it is a path on your own site before redirecting back, so the parameter can't be used to send people elsewhere.

Because the page is centred in the screen, and anything that grew would move the heading. Pressing either row swaps its button for a field and a Continue button of the same height, moves focus into the field and says so in the status line. Escape puts the row back with focus on it, and choosing another row ends the edit; the address you typed stays for the next try.

No: a component can't. Send the real HTTP status from your server or framework, so monitors and API clients see a 401 and not a 200 with an error drawn on it. For pages in a browser it is common to redirect to your sign-in page instead; this screen is for products that show the gate in place.

No. Each row has two typed letters in a neutral square, with the provider's name in text beside them, and a code comment marks the slot where you can put the provider's own logo under its brand rules. The block never draws a brand mark of its own.

Both are plain links to #: point them at your sign-in and sign-up routes. Sign in is a Shine Button with render set to an a element and nativeButton={false}. The code 401 is decoration and hidden from assistive technology; the sentence under the heading says "Error 401" in words.