shadcn.io is not affiliated with official shadcn/ui
SSO Test and Enforce Success Block for React Aria
A single sign-on confirmation inside an app panel: the connection's metadata with real copy buttons, a Test sign-in that passes locally and unlocks a Require SSO for everyone switch, and an alert dialog that confirms it.
Installation
Overview
Make the last step of an SSO setup safe with this confirmation panel for React with React Aria. It's the panel Gatehand, an access manager, shows after its SAML connection to Okta is set up: a header with one action, the Shine Button Done, over one framed card split in two and ruled by Guides. The first half is the connection: a Gatehand tile and an Okta tile (two letters each, never a logo) over the protocol, the entity ID and the sign-in URL in monospace, each with a Copy Button, and the certificate's end date. The second half is the order of things: Test sign-in runs a pass that unlocks a Switch, "Require SSO for everyone", and turning it on asks to confirm in an Alert Dialog. For identity setup, SAML and OIDC connections and any change that can lock people out.
FAQ
What stays in the page, and how do I wire it for real?
Nothing signs in and nothing is enforced. Test sign-in waits a moment and shows a typed result; the switch and the dialog change this page only, and a polite status message says so ("SSO is now required for everyone, in this demo. Nothing changed in Okta."). The copy buttons are real: they put the entity ID and sign-in URL on the clipboard. To wire it, run a real test sign-in through your identity provider in runTest, read the metadata from the connection, and call your API from confirm.
Why is the switch locked until the test passes?
Requiring SSO for everyone can lock people out if the connection is wrong, so the block makes you prove it works first. The switch stays off, with a line that says "Run the test first. This stays off until it passes.", and unlocks when the test passes. Turning it off again needs no question.
What does the confirmation do, and where does focus go?
Turning the switch on opens an Alert Dialog that says what changes (passwords stop working, anyone not set up in Okta is locked out) with Keep it optional and Require SSO. Escape and Keep it optional leave the switch off and put focus back on it; Require SSO turns it on, says so in the status message and keeps the page's height. The dialog is controlled with isOpen and onOpenChange, and its title is a level 2 heading.
Is Okta's logo used?
No. The provider is named in text and drawn as a neutral two-letter tile in an icon slot, with a code comment that says to drop in a logo you have the rights to use. Never redraw a brand's mark.