shadcn.io is not affiliated with official shadcn/ui
SSO Config Onboarding Block for Solid
A single sign-on step with four provider tiles (Okta, Auth0, Azure AD, Google Workspace), each with its own four steps and the field names its console uses, a metadata URL, three typed checks and a Turn on SSO that waits for a pass.
Installation
Overview
Walk an admin through their own identity provider's console with this single sign-on step for Solid with Ark UI. It is a step of Gatehurst, an enterprise team-chat tool, as a whole screen: the page's rails and one band, a step header (“Step 5 of 6” and a hairline) and a framed panel in two halves. At the start four native radio tiles with two-letter marks (Okta, Auth0, Azure AD, Google Workspace) and, for the chosen one, four steps in the words that provider uses (“Single sign-on URL” and “Audience URI” for one, “Reply URL” and “Identifier” for another), each value beside a Copy Button. At the end a metadata address and Check, which runs three typed checks: metadata reachable, certificate valid, attributes mapped. Turn on SSO is the one Shine Button and wakes after all three pass. Nothing is contacted.
FAQ
How do I add or change a provider?
Edit PROVIDERS. Each has an id, a two-letter mark, a name and a list of steps; a step with a field and a value gets a copy row, a step without them is plain text. Use the names the provider's console really uses. All the lists sit in one grid cell with the unchosen ones hidden, so the panel is as tall as the longest and never moves when you choose.
How do the checks decide?
outcomeOf reads the end of the metadata address: /bad-cert fails the certificate check (“Expired on 12 Sep 2026”), /unmapped fails the attribute check, and anything else passes all three. The checks run after one short wait of 600 ms that is cleared if you leave the page. A failed check keeps Turn on SSO quiet and says what to fix.
Are the values to copy real?
The Copy buttons are real: they put the text on the clipboard. The two values (ACS and ENTITY) are made up for the demo; in your app they are your service provider's own assertion consumer service URL and entity id, the same for every provider.
How is the metadata address checked?
It must be an https address on a public host, and the problem is written under the field and read by a screen reader. Editing the address clears the earlier checks, so a pass always belongs to the address that is in the field.
What stays local in the demo, and how do I wire it?
No request is made and nothing is saved. In your app fetch and parse the metadata on your server where check says so, report what you really found, and save the provider and turn SSO on in submit. Keep a way back for admins in case the setup locks them out.