Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

SSO Test and Enforce Success Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make the last step of an SSO setup safe with this confirmation panel for Vue with Ark UI. 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 open and onOpenChange.

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.

How does it look on a phone?

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.

All 100 success blocks