shadcn.io is not affiliated with official shadcn/ui
401 Unauthorized Error Block for Solid
A full-screen 401 page for a reporting workspace: the heading, where the visitor was going, Sign in, and a framed list of other ways in where Single sign-on and Email me a link turn their own row into an email field in place.
Installation
Overview
Send signed-out visitors to the right door, with this 401 error page for Solid with Ark UI. It's the error screen of Briefroom, a reporting workspace: a whole screen with the page's rails and one band across it, split in two. At the start sit the status code as display text, the heading "Sign in to continue", one sentence that says the workspace doesn't know who you are yet, a chip with the path the visitor was heading for ("After signing in you'll return to /reports/q3/revenue-by-region") and the way forward: a Shine Button Sign in beside a quiet link to create an account. At the end a framed panel, ruled by Guides, lists four other ways in as equal Buttons: Continue with Google and Continue with GitHub, each with a two-letter tile, and Single sign-on and Email me a link, which turn their own row into an email Input with a Continue or Send button. The row keeps its height, so nothing on the page moves. It's built from Shine Button, Button, Input and Guides, with a CSS entrance only. For any app with signed-in areas.
FAQ
What do the other ways in do, and what stays in the page?
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.
How does the page remember where the visitor was going?
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.
Why do Single sign-on and Email me a link turn into fields instead of opening a section?
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.
Does this return a 401 status to browsers and clients?
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.