{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sso-identity-provider-config", "title": "Sso Identity Provider Config", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/sso-identity-provider-config/SsoIdentityProviderConfig.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Check,\n CheckCircle2,\n Copy,\n Download,\n ExternalLink,\n FileCode,\n Globe,\n KeyRound,\n Lock,\n Play,\n RotateCw,\n Save,\n ShieldAlert,\n ShieldCheck,\n UploadCloud,\n UserCheck,\n X,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Textarea } from '@/components/ui/textarea'\nimport { cn } from '@/lib/utils'\n\nexport type IdpPresetId = 'okta' | 'entra' | 'google' | 'custom'\n\nexport interface IdpPreset {\n id: IdpPresetId\n name: string\n subtitle: string\n badge: string\n defaultSsoUrl: string\n defaultEntityId: string\n domain: string\n defaultCert: string\n}\n\nexport interface ClaimAttribute {\n samlAttribute: string\n mappedField: string\n sampleValue: string\n}\n\nexport interface SsoIdentityProviderConfigProps {\n initialSsoEnabled?: boolean\n initialPreset?: IdpPresetId\n initialEnforceDomain?: boolean\n className?: string\n}\n\nconst idpPresets: IdpPreset[] = [\n {\n id: 'okta',\n name: 'Okta',\n subtitle: 'SAML 2.0 & OIDC Enterprise',\n badge: 'Popular',\n defaultSsoUrl: 'https://company.okta.com/app/sso/saml',\n defaultEntityId: 'http://www.okta.com/exk849201',\n domain: 'company.okta.com',\n defaultCert: `-----BEGIN CERTIFICATE-----\nMIIDpDCCAoygAwIBAgIGAX2v5L3oMA0GCSqGSIb3DQEBCwUAMIGSMQswCQYDVQQGEwJV\nUzETMBEGA1UECAwKQ2FsaWZvcm5pYTEWMBQGA1UEBwwNU2FuIEZyYW5jaXNjbzENMAsG\nA1UECgwET2t0YTEUMBIGA1UECwwLU1NPIFNlcnZpY2UxGDAWBgNVBAMMD2NvbXBhbnkub2t0\nYS5jb20xIDAeBgkqhkiG9w0BCQEWEWFkbWluQG9rdGEuY29tMB4XDTI2MDgyMTE0MzAwMFoX\nDTI4MTAyMTE0MzAwMFowgZIxCzAJBgNVBAYTAlVTMRMwEQYDVQQIDApDYWxpZm9ybmlh\n-----END CERTIFICATE-----`,\n },\n {\n id: 'entra',\n name: 'Microsoft Entra ID',\n subtitle: 'Azure AD & Microsoft 365',\n badge: 'Enterprise',\n defaultSsoUrl: 'https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47/saml2',\n defaultEntityId: 'https://sts.windows.net/72f988bf-86f1-41af-91ab-2d7cd011db47/',\n domain: 'login.microsoftonline.com',\n defaultCert: `-----BEGIN CERTIFICATE-----\nMIIDBTCCAe2gAwIBAgIQJn0zJk1vVbtJpZ0R4k0D1DANBgkqhkiG9w0BAQsFADAtMSsw\nKQYDVQQDEyJhY2NvdW50cy5hY2Nlc3Njb250cm9sLndpbmRvd3MubmV0MB4XDTI2MDgy\nMTE0MzAwMFoXDTI4MTAyMTE0MzAwMFowLTErMCkGA1UEAxMiYWNjb3VudHMuYWNjZXNz\nY29udHJvbC53aW5kb3dzLm5ldDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB\n-----END CERTIFICATE-----`,\n },\n {\n id: 'google',\n name: 'Google Workspace',\n subtitle: 'Google Cloud Identity SAML',\n badge: 'SAML 2.0',\n defaultSsoUrl: 'https://accounts.google.com/o/saml2/idp?idpid=C0123abcd',\n defaultEntityId: 'https://accounts.google.com/o/saml2?idpid=C0123abcd',\n domain: 'accounts.google.com',\n defaultCert: `-----BEGIN CERTIFICATE-----\nMIIDdDCCAlygAwIBAgIGAY7GZpBqMA0GCSqGSIb3DQEBCwUAMHQxCzAJBgNVBAYTAlVT\nMRMwEQYDVQQIEwpDYWxpZm9ybmlhMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MR8wHQYD\nVQQKExZHb29nbGUgV29ya3NwYWNlIElBTSExMB8GA1UEAxMYR29vZ2xlIElkUCBTYW1s\nIFNpZ25lcjAeFw0yNjA4MjExNDMwMDBaFw0yODEwMjExNDMwMDBaMHQxCzAJBgNVBAYT\n-----END CERTIFICATE-----`,\n },\n {\n id: 'custom',\n name: 'Custom SAML 2.0',\n subtitle: 'PingFederate, OneLogin, Keycloak',\n badge: 'Universal',\n defaultSsoUrl: 'https://sso.company.com/idp/profile/SAML2/POST/SSO',\n defaultEntityId: 'https://sso.company.com/idp/shibboleth',\n domain: 'sso.company.com',\n defaultCert: `-----BEGIN CERTIFICATE-----\nMIIDcDCCAligAwIBAgIJAN8FpW1mG+hBMA0GCSqGSIb3DQEBCwUAMFgxCzAJBgNVBAYT\nAlVTMRMwEQYDVQQIDApDYWxpZm9ybmlhMQ8wDQYDVQQKDAZDdXN0b20xIDAeBgNVBAMM\nF2N1c3RvbS5pZHAucHJvdmlkZXIubGFiMB4XDTI2MDgyMTE0MzAwMFoXDTI4MTAyMTE0\nMzAwMFowWDELMAkGA1UEBhMCVVMxEzARBgNVBAgMCkNhbGlmb3JuaWExDzANBgNVBAoM\n-----END CERTIFICATE-----`,\n },\n]\n\nconst spAcsUrl = 'https://auth.uipkge.dev/sso/saml/callback'\nconst spEntityId = 'https://auth.uipkge.dev/sso/saml/metadata'\nconst spMetadataXmlUrl = 'https://auth.uipkge.dev/sso/saml/metadata.xml'\nconst spCertificatePem = `-----BEGIN CERTIFICATE-----\nMIIDODCCAiCgAwIBAgIUW0Qz0K7VzN8XlP4wQ6k9J1vYgLAwDQYJKoZIhvcNAQEL\nBQAwMzEXMBUGA1UEAwwNYXV0aC51aXBrZ2UuZGV2MRgwFgYDVQQKDA9VSVBLR0Ug\nQXV0aCBTU08wHhcNMjYwODIxMTQzMDAwWhcNMzEwODIxMTQzMDAwWjAzMRcwFQYD\nVQQDDA5hdXRoLnVpcGtnZS5kZXYxGDAWBgNVBAoMD1VJUEtHRSBBdXRoIFNTTzCC\nASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAL1K9sU3FvX+7nQ6m2W4j1k9\n-----END CERTIFICATE-----`\n\nconst simulatedClaims: ClaimAttribute[] = [\n { samlAttribute: 'urn:oid:0.9.2342.19200300.100.1.1', mappedField: 'nameID', sampleValue: 'alex.morgan@company.com' },\n {\n samlAttribute: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress',\n mappedField: 'email',\n sampleValue: 'alex.morgan@company.com',\n },\n {\n samlAttribute: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname',\n mappedField: 'firstName',\n sampleValue: 'Alex',\n },\n {\n samlAttribute: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname',\n mappedField: 'lastName',\n sampleValue: 'Morgan',\n },\n {\n samlAttribute: 'http://schemas.xmlsoap.org/claims/Group',\n mappedField: 'groups',\n sampleValue: '[\"Engineering\", \"IAM-Admins\", \"SSO-Users\"]',\n },\n {\n samlAttribute: 'urn:oasis:names:tc:SAML:2.0:assertion:SessionIndex',\n mappedField: 'sessionIndex',\n sampleValue: '_sess_8f29ab0192e47',\n },\n]\n\nexport function SsoIdentityProviderConfig({\n initialSsoEnabled = true,\n initialPreset = 'okta',\n initialEnforceDomain = true,\n className,\n}: SsoIdentityProviderConfigProps) {\n const [ssoEnabled, setSsoEnabled] = React.useState(initialSsoEnabled)\n const [selectedPresetId, setSelectedPresetId] = React.useState(initialPreset)\n const [enforceDomain, setEnforceDomain] = React.useState(initialEnforceDomain)\n\n const currentPreset = React.useMemo(() => {\n return idpPresets.find((p) => p.id === selectedPresetId) ?? idpPresets[0]\n }, [selectedPresetId])\n\n const [idpSsoUrl, setIdpSsoUrl] = React.useState(currentPreset.defaultSsoUrl)\n const [idpEntityId, setIdpEntityId] = React.useState(currentPreset.defaultEntityId)\n const [idpCertPem, setIdpCertPem] = React.useState(currentPreset.defaultCert)\n\n const [copiedKey, setCopiedKey] = React.useState(null)\n const [isDraggingXml, setIsDraggingXml] = React.useState(false)\n const [xmlUploadedNotice, setXmlUploadedNotice] = React.useState(false)\n const [isSaving, setIsSaving] = React.useState(false)\n const [saveSuccessNotice, setSaveSuccessNotice] = React.useState(false)\n const [testModalOpen, setTestModalOpen] = React.useState(false)\n\n const copyTimerRef = React.useRef | null>(null)\n\n const copyText = React.useCallback((text: string, key: string) => {\n navigator.clipboard?.writeText(text)\n setCopiedKey(key)\n if (copyTimerRef.current) clearTimeout(copyTimerRef.current)\n copyTimerRef.current = setTimeout(() => {\n setCopiedKey((prev) => (prev === key ? null : prev))\n }, 2000)\n }, [])\n\n const handleSelectPreset = React.useCallback((presetId: IdpPresetId) => {\n setSelectedPresetId(presetId)\n const preset = idpPresets.find((p) => p.id === presetId)\n if (preset) {\n setIdpSsoUrl(preset.defaultSsoUrl)\n setIdpEntityId(preset.defaultEntityId)\n setIdpCertPem(preset.defaultCert)\n setXmlUploadedNotice(false)\n }\n }, [])\n\n const downloadSpCertificate = React.useCallback(() => {\n if (typeof window === 'undefined') return\n const blob = new Blob([spCertificatePem], { type: 'application/x-pem-file' })\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement('a')\n anchor.href = url\n anchor.download = 'uipkge-sp-certificate.crt'\n document.body.appendChild(anchor)\n anchor.click()\n document.body.removeChild(anchor)\n URL.revokeObjectURL(url)\n }, [])\n\n const simulateXmlUpload = React.useCallback(() => {\n const preset = currentPreset\n setIdpSsoUrl(preset.defaultSsoUrl)\n setIdpEntityId(preset.defaultEntityId)\n setIdpCertPem(preset.defaultCert)\n setXmlUploadedNotice(true)\n setTimeout(() => {\n setXmlUploadedNotice(false)\n }, 4000)\n }, [currentPreset])\n\n const handleSaveConfig = React.useCallback(() => {\n if (isSaving) return\n setIsSaving(true)\n setTimeout(() => {\n setIsSaving(false)\n setSaveSuccessNotice(true)\n setTimeout(() => {\n setSaveSuccessNotice(false)\n }, 3500)\n }, 600)\n }, [isSaving])\n\n const openTestModal = React.useCallback(() => {\n setTestModalOpen(true)\n }, [])\n\n return (\n
\n {/* Header Banner & Top Controls */}\n \n \n
\n
\n
\n
\n \n
\n Single Sign-On (SSO) & SAML 2.0 Configuration\n {ssoEnabled ? (\n \n \n SSO Active\n \n ) : (\n \n Disabled\n \n )}\n
\n \n Connect your enterprise IdP (Okta, Azure AD / Entra, Google Workspace, OneLogin) for federated SAML\n authentication.\n \n
\n\n
\n
\n
\n

SSO Status

\n

\n {ssoEnabled ? 'Enabled for @company.com' : 'Disabled'}\n

\n
\n \n
\n\n \n \n Test SAML Login\n \n
\n
\n \n \n\n {/* Save Success Banner */}\n {saveSuccessNotice && (\n \n
\n \n \n SSO configuration saved successfully. All assertions will validate against {currentPreset.name}.\n \n
\n setSaveSuccessNotice(false)}\n >\n \n \n
\n )}\n\n {/* IdP Preset Picker Grid */}\n
\n
\n
\n

\n Identity Provider Presets\n

\n

\n Choose your identity platform to load SAML endpoints and formatting defaults\n

\n
\n \n SAML 2.0 / Web SSO\n \n
\n\n
\n {idpPresets.map((preset) => {\n const isSelected = selectedPresetId === preset.id\n return (\n handleSelectPreset(preset.id)}\n >\n
\n
\n \n {preset.id === 'okta' && O}\n {preset.id === 'entra' && ⊞}\n {preset.id === 'google' && G}\n {preset.id === 'custom' && }\n
\n \n {preset.badge}\n \n
\n\n
\n

{preset.name}

\n

{preset.subtitle}

\n
\n
\n\n
\n \n {preset.domain}\n \n {isSelected ? (\n \n \n Active\n \n ) : (\n Select →\n )}\n
\n \n )\n })}\n
\n \n\n {/* 2-Column Configuration Form */}\n
\n {/* Left Column: Service Provider (SP) Credentials */}\n
\n \n \n
\n
\n
\n \n
\n
\n Service Provider (SP) Credentials\n \n Copy these values into your Identity Provider's SAML setup\n \n
\n
\n \n Our Endpoints\n \n
\n \n\n \n {/* ACS URL */}\n
\n
\n \n copyText(spAcsUrl, 'acs')}\n >\n {copiedKey === 'acs' ? (\n \n ) : (\n \n )}\n {copiedKey === 'acs' ? 'Copied' : 'Copy'}\n \n
\n \n

\n The callback URL where your IdP transmits HTTP-POST SAML assertion responses.\n

\n
\n\n {/* Entity ID / Audience */}\n
\n
\n \n copyText(spEntityId, 'entity-id')}\n >\n {copiedKey === 'entity-id' ? (\n \n ) : (\n \n )}\n {copiedKey === 'entity-id' ? 'Copied' : 'Copy'}\n \n
\n \n

\n The unique audience restriction URI identifying our service to your IdP.\n

\n
\n\n {/* Protocol Specifications Summary */}\n
\n

Protocol & Binding Requirements

\n
\n
\n NameID Format\n EmailAddress (urn:oasis:...)\n
\n
\n SAML Binding\n HTTP-POST\n
\n
\n Signing Algorithm\n RSA-SHA256\n
\n
\n Assertion Encryption\n Optional (AES-256-GCM)\n
\n
\n
\n\n \n\n {/* SP Public Certificate */}\n
\n
\n \n
\n copyText(spCertificatePem, 'sp-cert')}\n >\n {copiedKey === 'sp-cert' ? (\n \n ) : (\n \n )}\n {copiedKey === 'sp-cert' ? 'Copied' : 'Copy PEM'}\n \n \n \n Download .crt\n \n
\n
\n\n 
\n                  {spCertificatePem}\n
\n

\n Import this certificate into your IdP if assertion signing or encryption is required.\n

\n
\n \n\n \n \n \n SP Metadata XML Endpoint\n \n copyText(spMetadataXmlUrl, 'meta-url')}\n >\n {copiedKey === 'meta-url' ? 'Copied URL' : 'Copy metadata.xml URL'}\n \n \n \n \n
\n\n {/* Right Column: Identity Provider (IdP) Metadata Form */}\n
\n \n \n
\n
\n
\n \n
\n
\n Identity Provider (IdP) Metadata\n \n Configure SAML endpoints and credentials provided by {currentPreset.name}\n \n
\n
\n \n {currentPreset.name}\n \n
\n \n\n \n {/* XML Upload Dropzone */}\n {\n e.preventDefault()\n setIsDraggingXml(true)\n }}\n onDragLeave={() => setIsDraggingXml(false)}\n onDrop={(e) => {\n e.preventDefault()\n setIsDraggingXml(false)\n simulateXmlUpload()\n }}\n onClick={simulateXmlUpload}\n >\n
\n \n
\n

\n Drag & drop IdP metadata.xml to auto-fill\n

\n

\n Or click here to simulate parsing your Identity Provider metadata file\n

\n
\n\n {/* XML Notice */}\n {xmlUploadedNotice && (\n
\n \n Parsed SSO URL, Entity ID, and X.509 Certificate from metadata XML.\n
\n )}\n\n {/* IdP SSO URL */}\n
\n \n setIdpSsoUrl(e.target.value)}\n placeholder=\"https://company.okta.com/app/sso/saml\"\n className=\"font-mono text-xs\"\n />\n

\n The HTTP-POST endpoint at your IdP where users are redirected for authentication.\n

\n
\n\n {/* IdP Entity ID / Issuer */}\n
\n \n setIdpEntityId(e.target.value)}\n placeholder=\"http://www.okta.com/exk849201\"\n className=\"font-mono text-xs\"\n />\n

\n The unique issuer string provided in your IdP metadata document.\n

\n
\n\n {/* X.509 Certificate PEM Textarea */}\n
\n
\n \n \n Valid (Expires Oct 2028)\n \n
\n \n

\n Public X.509 certificate used by our SP to verify the cryptographic signature on SAML assertions.\n

\n
\n\n \n\n {/* Domain Enforcement Switch */}\n
\n
\n
\n \n

Enforce SSO for all domain emails

\n
\n

\n Require all users with @company.com{' '}\n email addresses to log in via SSO. Password logins will be blocked.\n

\n
\n \n
\n \n\n \n handleSelectPreset(selectedPresetId)}\n >\n Reset to Defaults\n \n \n {isSaving ? : }\n {isSaving ? 'Saving...' : 'Save SSO Configuration'}\n \n \n \n
\n \n\n {/* Test SAML Login Diagnostic Dialog */}\n \n \n \n
\n
\n \n
\n
\n SAML 2.0 Authentication Diagnostic\n Live assertion handshake simulation with {currentPreset.name}\n
\n
\n \n\n
\n {/* Handshake Status Banner */}\n
\n
\n \n
\n

HTTP 200 OK — SAML Handshake Validated

\n

All signature envelopes matched X.509 certificate

\n
\n
\n \n Success\n \n
\n\n {/* Step Verification Checklist */}\n
\n

Verification Pipeline

\n
\n
\n \n \n 1. AuthnRequest dispatched with SP signature to{' '}\n {idpSsoUrl}\n \n
\n
\n \n 2. SAMLResponse assertion received and verified with RSA-SHA256 signature\n
\n
\n \n \n 3. AudienceRestriction matched {spEntityId}\n \n
\n
\n \n 4. Assertion timestamp valid within 300s clock-skew tolerance window\n
\n
\n
\n\n {/* Asserted Claims Table */}\n
\n

Asserted Identity Claims & Attributes

\n
\n \n \n \n \n \n \n \n \n {simulatedClaims.map((claim) => (\n \n \n \n \n ))}\n \n
FieldSample Claim Value
{claim.mappedField}{claim.sampleValue}
\n
\n
\n
\n\n \n \n \n \n \n \n \n )\n}\n\nexport default SsoIdentityProviderConfig\n", "type": "registry:block", "target": "~/components/blocks/SsoIdentityProviderConfig.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/switch.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Enterprise Single Sign-On (SAML 2.0 / OIDC) identity provider configuration wizard with IdP preset picker, SP credentials, XML metadata dropzone, X.509 cert PEM validator, domain enforcement switch, and interactive SAML test runner.", "categories": [ "security", "app", "form", "dashboard" ] }