SSO Test and Enforce Success Block for React

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.

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.

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 open and onOpenChange.

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.

Done is a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.

The connection details come first, with each address wrapping inside its box, and the test sits under them. The two steps keep their numbers, the test result has a reserved line so the switch below it never moves, and Test sign-in is a full-width button.