shadcn.io is not affiliated with official shadcn/ui
SAML Setup Settings Block for React
A SAML single sign-on setup sheet shown open over a drawn security page: copy two values, paste the provider's metadata and see what is found (including the certificate's end day read from the certificate), run a local test, then enforce.
Installation
Overview
Set up SAML single sign-on in four steps without leaving the settings page, with this SAML setup sheet for React with Base UI. A Sheet is shown open over a drawing of a security page, whose SAML row reads "not set up" until you save. A read-only Steps bar marks the four steps and Back and Next move between them. Step one gives the two values to copy into the identity provider, the ACS URL and the entity ID, each with a real Copy Button. Step two takes the provider's metadata in a Textarea, or a sample, and lists what it finds in the text: the entity ID, the sign-in URL and the day the signing certificate ends, read from the certificate itself. Step three runs a local test on exactly that text (an https sign-in URL, a certificate that hasn't ended and one that doesn't end within 30 days), and Next waits for a pass. Step four enforces it with a Switch and a Checkbox, Keep password sign-in for owners, ticked, and says what the choice means. Saving turns the drawn row to set up or enforced and the header's sentence says so. It's built from Sheet, Steps, Copy Button, Textarea, Switch, Checkbox, Button, Shine Button and Guides, with a CSS entrance only. Nothing signs in.
FAQ
Which part is the preview's, and what do I keep?
On load the sheet is drawn in place, a native non-modal dialog over the drawing, so nothing is trapped or focused. The header's Set up SAML opens the real Sheet, with its focus trap, Escape and focus back to the button, from the side the page reads from; the in-place copy then stays closed until a reload. Both share one content component and one state, so what you typed in place is there in the real one. In your app keep the Sheet and drop the in-place copy, its scrim and its Escape effect.
How does the metadata get read?
Three pieces are found by their markup: the entityID attribute, the Location of the first SingleSignOnService and the X509Certificate element. The certificate's end day is read from the certificate itself, its base64 decoded in the browser and its validity dates read from the standard encoding, no library involved. The two samples carry sample certificates, one ending in March 2027 and one ending twelve days after the page's fixed day, which the test flags as a warning. Pasted text that is missing something says so in the list and Next refuses until it is complete.
What does the test check, and what doesn't it?
It checks the pasted text only: that an entity ID and a sign-in URL are there, that the URL is https, and that the certificate was found, could be read, hasn't ended and doesn't end within 30 days of the page's fixed day. It never contacts the provider and can't tell whether your provider will accept the ACS URL. Change the text after a test and the page says the test is out of date, and Next waits for a new pass.
What stays local, and how do I make it real?
Everything. Nothing is sent, saved or enforced, and nobody signs in: Save turns a drawn row and says "Nothing signed in." In your app, post the metadata (or its URL) to your server, parse and store it there, run a real test sign-in before enforcement and keep the owners' password fallback until you have seen that the provider works.
How does it work by keyboard and on a phone?
Back and Next move the four steps, only the current one is visible and reachable, and the new step's title takes focus. A step that can't be left yet says why in a message and puts focus on the control that fixes it. Escape or Close dismisses the sheet, from the in-place copy too, with focus back on the header button. On a phone the in-place sheet docks to the bottom of the stage and its body scrolls under a pinned Back and Next.
Related
- Pro
Identity Provider Settings
Sign-in and securityAn identity provider settings panel with a protocol picker, an https-only issuer, a masked client secret, a claim mapping table that shows what each claim resolves to in a sample token tree, and a provisioning rule.
- Pro
Webhook Endpoints Settings
API and webhooksA webhook endpoint settings sheet open over the endpoint list: an https URL, an event tree with mixed-state group checkboxes, a signing secret with Roll secret, and recent deliveries where a failed one can be resent with its signature worked out in the browser.
- Pro
IP Allowlist Settings
Sign-in and securityAn IP allowlist settings panel with an enforcement switch and a lockout guard that says whether your own address is covered, a rules table, and an add form that parses IPv4 and IPv6 ranges and names the rule that already covers a new one.
- Pro
Sign-in Methods Settings
Sign-in and securityA sign-in methods settings panel with five methods you can switch and reorder, a drawn sign-in card that is redrawn from them, a last-method guard and a lockout rule that restates itself.
- Pro
SSO Config Account
Sign-in methodsMove your account to company sign-in: what changes as a list of terms, three things to tick, a Shine Button that wakes when all hold and a dialog that asks for the company domain, then a Switch back until the password stops.
- Pro
Access Token Hygiene Settings
Sign-in and securityAn access token settings panel that flags risky tokens (no end date, unused for 90 days, the admin scope, ending soon), gives a token an end date from a menu, and revokes the ticked ones after an alert dialog lists them.