62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T8df9,'use client' import * as React from 'react' import { Check, CheckCircle2, Copy, Download, ExternalLink, FileCode, Globe, KeyRound, Lock, Play, RotateCw, Save, ShieldAlert, ShieldCheck, UploadCloud, UserCheck, X, } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' import { Switch } from '@/components/ui/switch' import { Textarea } from '@/components/ui/textarea' import { cn } from '@/lib/utils' export type IdpPresetId = 'okta' | 'entra' | 'google' | 'custom' export interface IdpPreset { id: IdpPresetId name: string subtitle: string badge: string defaultSsoUrl: string defaultEntityId: string domain: string defaultCert: string } export interface ClaimAttribute { samlAttribute: string mappedField: string sampleValue: string } export interface SsoIdentityProviderConfigProps { initialSsoEnabled?: boolean initialPreset?: IdpPresetId initialEnforceDomain?: boolean className?: string } const idpPresets: IdpPreset[] = [ { id: 'okta', name: 'Okta', subtitle: 'SAML 2.0 & OIDC Enterprise', badge: 'Popular', defaultSsoUrl: 'https://company.okta.com/app/sso/saml', defaultEntityId: 'http://www.okta.com/exk849201', domain: 'company.okta.com', defaultCert: `-----BEGIN CERTIFICATE----- MIIDpDCCAoygAwIBAgIGAX2v5L3oMA0GCSqGSIb3DQEBCwUAMIGSMQswCQYDVQQGEwJV UzETMBEGA1UECAwKQ2FsaWZvcm5pYTEWMBQGA1UEBwwNU2FuIEZyYW5jaXNjbzENMAsG A1UECgwET2t0YTEUMBIGA1UECwwLU1NPIFNlcnZpY2UxGDAWBgNVBAMMD2NvbXBhbnkub2t0 YS5jb20xIDAeBgkqhkiG9w0BCQEWEWFkbWluQG9rdGEuY29tMB4XDTI2MDgyMTE0MzAwMFoX DTI4MTAyMTE0MzAwMFowgZIxCzAJBgNVBAYTAlVTMRMwEQYDVQQIDApDYWxpZm9ybmlh -----END CERTIFICATE-----`, }, { id: 'entra', name: 'Microsoft Entra ID', subtitle: 'Azure AD & Microsoft 365', badge: 'Enterprise', defaultSsoUrl: 'https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47/saml2', defaultEntityId: 'https://sts.windows.net/72f988bf-86f1-41af-91ab-2d7cd011db47/', domain: 'login.microsoftonline.com', defaultCert: `-----BEGIN CERTIFICATE----- MIIDBTCCAe2gAwIBAgIQJn0zJk1vVbtJpZ0R4k0D1DANBgkqhkiG9w0BAQsFADAtMSsw KQYDVQQDEyJhY2NvdW50cy5hY2Nlc3Njb250cm9sLndpbmRvd3MubmV0MB4XDTI2MDgy MTE0MzAwMFoXDTI4MTAyMTE0MzAwMFowLTErMCkGA1UEAxMiYWNjb3VudHMuYWNjZXNz Y29udHJvbC53aW5kb3dzLm5ldDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB -----END CERTIFICATE-----`, }, { id: 'google', name: 'Google Workspace', subtitle: 'Google Cloud Identity SAML', badge: 'SAML 2.0', defaultSsoUrl: 'https://accounts.google.com/o/saml2/idp?idpid=C0123abcd', defaultEntityId: 'https://accounts.google.com/o/saml2?idpid=C0123abcd', domain: 'accounts.google.com', defaultCert: `-----BEGIN CERTIFICATE----- MIIDdDCCAlygAwIBAgIGAY7GZpBqMA0GCSqGSIb3DQEBCwUAMHQxCzAJBgNVBAYTAlVT MRMwEQYDVQQIEwpDYWxpZm9ybmlhMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MR8wHQYD VQQKExZHb29nbGUgV29ya3NwYWNlIElBTSExMB8GA1UEAxMYR29vZ2xlIElkUCBTYW1s IFNpZ25lcjAeFw0yNjA4MjExNDMwMDBaFw0yODEwMjExNDMwMDBaMHQxCzAJBgNVBAYT -----END CERTIFICATE-----`, }, { id: 'custom', name: 'Custom SAML 2.0', subtitle: 'PingFederate, OneLogin, Keycloak', badge: 'Universal', defaultSsoUrl: 'https://sso.company.com/idp/profile/SAML2/POST/SSO', defaultEntityId: 'https://sso.company.com/idp/shibboleth', domain: 'sso.company.com', defaultCert: `-----BEGIN CERTIFICATE----- MIIDcDCCAligAwIBAgIJAN8FpW1mG+hBMA0GCSqGSIb3DQEBCwUAMFgxCzAJBgNVBAYT AlVTMRMwEQYDVQQIDApDYWxpZm9ybmlhMQ8wDQYDVQQKDAZDdXN0b20xIDAeBgNVBAMM F2N1c3RvbS5pZHAucHJvdmlkZXIubGFiMB4XDTI2MDgyMTE0MzAwMFoXDTI4MTAyMTE0 MzAwMFowWDELMAkGA1UEBhMCVVMxEzARBgNVBAgMCkNhbGlmb3JuaWExDzANBgNVBAoM -----END CERTIFICATE-----`, }, ] const spAcsUrl = 'https://auth.uipkge.dev/sso/saml/callback' const spEntityId = 'https://auth.uipkge.dev/sso/saml/metadata' const spMetadataXmlUrl = 'https://auth.uipkge.dev/sso/saml/metadata.xml' const spCertificatePem = `-----BEGIN CERTIFICATE----- MIIDODCCAiCgAwIBAgIUW0Qz0K7VzN8XlP4wQ6k9J1vYgLAwDQYJKoZIhvcNAQEL BQAwMzEXMBUGA1UEAwwNYXV0aC51aXBrZ2UuZGV2MRgwFgYDVQQKDA9VSVBLR0Ug QXV0aCBTU08wHhcNMjYwODIxMTQzMDAwWhcNMzEwODIxMTQzMDAwWjAzMRcwFQYD VQQDDA5hdXRoLnVpcGtnZS5kZXYxGDAWBgNVBAoMD1VJUEtHRSBBdXRoIFNTTzCC ASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAL1K9sU3FvX+7nQ6m2W4j1k9 -----END CERTIFICATE-----` const simulatedClaims: ClaimAttribute[] = [ { samlAttribute: 'urn:oid:0.9.2342.19200300.100.1.1', mappedField: 'nameID', sampleValue: 'alex.morgan@company.com' }, { samlAttribute: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress', mappedField: 'email', sampleValue: 'alex.morgan@company.com', }, { samlAttribute: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname', mappedField: 'firstName', sampleValue: 'Alex', }, { samlAttribute: 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname', mappedField: 'lastName', sampleValue: 'Morgan', }, { samlAttribute: 'http://schemas.xmlsoap.org/claims/Group', mappedField: 'groups', sampleValue: '["Engineering", "IAM-Admins", "SSO-Users"]', }, { samlAttribute: 'urn:oasis:names:tc:SAML:2.0:assertion:SessionIndex', mappedField: 'sessionIndex', sampleValue: '_sess_8f29ab0192e47', }, ] export function SsoIdentityProviderConfig({ initialSsoEnabled = true, initialPreset = 'okta', initialEnforceDomain = true, className, }: SsoIdentityProviderConfigProps) { const [ssoEnabled, setSsoEnabled] = React.useState(initialSsoEnabled) const [selectedPresetId, setSelectedPresetId] = React.useState(initialPreset) const [enforceDomain, setEnforceDomain] = React.useState(initialEnforceDomain) const currentPreset = React.useMemo(() => { return idpPresets.find((p) => p.id === selectedPresetId) ?? idpPresets[0] }, [selectedPresetId]) const [idpSsoUrl, setIdpSsoUrl] = React.useState(currentPreset.defaultSsoUrl) const [idpEntityId, setIdpEntityId] = React.useState(currentPreset.defaultEntityId) const [idpCertPem, setIdpCertPem] = React.useState(currentPreset.defaultCert) const [copiedKey, setCopiedKey] = React.useState(null) const [isDraggingXml, setIsDraggingXml] = React.useState(false) const [xmlUploadedNotice, setXmlUploadedNotice] = React.useState(false) const [isSaving, setIsSaving] = React.useState(false) const [saveSuccessNotice, setSaveSuccessNotice] = React.useState(false) const [testModalOpen, setTestModalOpen] = React.useState(false) const copyTimerRef = React.useRef | null>(null) const copyText = React.useCallback((text: string, key: string) => { navigator.clipboard?.writeText(text) setCopiedKey(key) if (copyTimerRef.current) clearTimeout(copyTimerRef.current) copyTimerRef.current = setTimeout(() => { setCopiedKey((prev) => (prev === key ? null : prev)) }, 2000) }, []) const handleSelectPreset = React.useCallback((presetId: IdpPresetId) => { setSelectedPresetId(presetId) const preset = idpPresets.find((p) => p.id === presetId) if (preset) { setIdpSsoUrl(preset.defaultSsoUrl) setIdpEntityId(preset.defaultEntityId) setIdpCertPem(preset.defaultCert) setXmlUploadedNotice(false) } }, []) const downloadSpCertificate = React.useCallback(() => { if (typeof window === 'undefined') return const blob = new Blob([spCertificatePem], { type: 'application/x-pem-file' }) const url = URL.createObjectURL(blob) const anchor = document.createElement('a') anchor.href = url anchor.download = 'uipkge-sp-certificate.crt' document.body.appendChild(anchor) anchor.click() document.body.removeChild(anchor) URL.revokeObjectURL(url) }, []) const simulateXmlUpload = React.useCallback(() => { const preset = currentPreset setIdpSsoUrl(preset.defaultSsoUrl) setIdpEntityId(preset.defaultEntityId) setIdpCertPem(preset.defaultCert) setXmlUploadedNotice(true) setTimeout(() => { setXmlUploadedNotice(false) }, 4000) }, [currentPreset]) const handleSaveConfig = React.useCallback(() => { if (isSaving) return setIsSaving(true) setTimeout(() => { setIsSaving(false) setSaveSuccessNotice(true) setTimeout(() => { setSaveSuccessNotice(false) }, 3500) }, 600) }, [isSaving]) const openTestModal = React.useCallback(() => { setTestModalOpen(true) }, []) return (

{/* Header Banner & Top Controls */}

Single Sign-On (SSO) & SAML 2.0 Configuration {ssoEnabled ? ( SSO Active ) : ( Disabled )}

Connect your enterprise IdP (Okta, Azure AD / Entra, Google Workspace, OneLogin) for federated SAML authentication.

SSO Status

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

{/* Save Success Banner */} {saveSuccessNotice && (

SSO configuration saved successfully. All assertions will validate against {currentPreset.name}.

)} {/* IdP Preset Picker Grid */}

Identity Provider Presets

Choose your identity platform to load SAML endpoints and formatting defaults

SAML 2.0 / Web SSO

{idpPresets.map((preset) => { const isSelected = selectedPresetId === preset.id return ( ) })}

{/* 2-Column Configuration Form */}

{/* Left Column: Service Provider (SP) Credentials */}

Service Provider (SP) Credentials Copy these values into your Identity Provider's SAML setup

Our Endpoints

{/* ACS URL */}

Assertion Consumer Service (ACS) URL

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

{/* Entity ID / Audience */}

SP Entity ID / Audience URI

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

{/* Protocol Specifications Summary */}

Protocol & Binding Requirements

NameID Format EmailAddress (urn:oasis:...)

SAML Binding HTTP-POST

Signing Algorithm RSA-SHA256

Assertion Encryption Optional (AES-256-GCM)

{/* SP Public Certificate */}

SP X.509 Public Certificate

                  {spCertificatePem}

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

SP Metadata XML Endpoint

{/* Right Column: Identity Provider (IdP) Metadata Form */}

Identity Provider (IdP) Metadata Configure SAML endpoints and credentials provided by {currentPreset.name}

{currentPreset.name}

{/* XML Upload Dropzone */}

{ e.preventDefault() setIsDraggingXml(true) }} onDragLeave={() => setIsDraggingXml(false)} onDrop={(e) => { e.preventDefault() setIsDraggingXml(false) simulateXmlUpload() }} onClick={simulateXmlUpload} >

Drag & drop IdP metadata.xml to auto-fill

Or click here to simulate parsing your Identity Provider metadata file

{/* XML Notice */} {xmlUploadedNotice && (

Parsed SSO URL, Entity ID, and X.509 Certificate from metadata XML.

)} {/* IdP SSO URL */}

IdP Single Sign-On (SSO) URL setIdpSsoUrl(e.target.value)} placeholder="https://company.okta.com/app/sso/saml" className="font-mono text-xs" />

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

{/* IdP Entity ID / Issuer */}

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

The unique issuer string provided in your IdP metadata document.

{/* X.509 Certificate PEM Textarea */}

IdP X.509 Signing Certificate (PEM) Valid (Expires Oct 2028)

<p className="text-muted-foreground text-xs">
                  Public X.509 certificate used by our SP to verify the cryptographic signature on SAML assertions.
                </p>
              </div>

{/* Domain Enforcement Switch */}
              <div className="border-border bg-muted/20 flex items-start justify-between gap-3 rounded-lg border p-3">
                <div className="space-y-0.5">
                  <div className="flex items-center gap-1.5">
                    <ShieldAlert className="text-primary size-4" />
                    <p className="text-foreground text-xs font-semibold">Enforce SSO for all domain emails</p>
                  </div>
                  <p className="text-muted-foreground text-xs">
                    Require all users with <span className="text-foreground font-mono font-medium">@company.com</span>{' '}
                    email addresses to log in via SSO. Password logins will be blocked.
                  </p>
                </div>
                <Switch
                  checked={enforceDomain}
                  onCheckedChange={setEnforceDomain}
                  className="mt-1"
                  aria-label="Enforce SSO for domain"
                />
              </div>
            </CardContent>

<CardFooter className="border-border flex flex-wrap items-center justify-between gap-2 border-t pt-4">
              <Button
                variant="ghost"
                size="sm"
                className="text-muted-foreground hover:text-foreground text-xs"
                onClick={() => handleSelectPreset(selectedPresetId)}
              >
                Reset to Defaults
              </Button>
              <Button
                size="sm"
                className="gap-1.5 text-xs font-medium shadow-xs"
                disabled={isSaving || !idpSsoUrl.trim() || !idpEntityId.trim()}
                onClick={handleSaveConfig}
              >
                {isSaving ? <RotateCw className="size-3.5 animate-spin" /> : <Save className="size-3.5" />}
                <span>{isSaving ? 'Saving...' : 'Save SSO Configuration'}</span>
              </Button>
            </CardFooter>
          </Card>
        </div>
      </div>

{/* Test SAML Login Diagnostic Dialog */}
      <Dialog open={testModalOpen} onOpenChange={setTestModalOpen}>
        <DialogContent className="sm:max-w-xl">
          <DialogHeader>
            <div className="flex items-center gap-2">
              <div className="bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg">
                <UserCheck className="size-4" />
              </div>
              <div>
                <DialogTitle>SAML 2.0 Authentication Diagnostic</DialogTitle>
                <DialogDescription>Live assertion handshake simulation with {currentPreset.name}</DialogDescription>
              </div>
            </div>
          </DialogHeader>

<div className="space-y-4 py-2">
            {/* Handshake Status Banner */}
            <div className="border-success/30 bg-success/10 text-success flex items-center justify-between rounded-lg border p-3 text-xs">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="size-4 shrink-0" />
                <div>
                  <p className="font-semibold">HTTP 200 OK — SAML Handshake Validated</p>
                  <p className="text-xs opacity-90">All signature envelopes matched X.509 certificate</p>
                </div>
              </div>
              <Badge variant="success" className="font-mono text-xs">
                Success
              </Badge>
            </div>

{/* Step Verification Checklist */}
            <div className="border-border bg-muted/20 space-y-2 rounded-lg border p-3 text-xs">
              <h4 className="text-foreground font-semibold">Verification Pipeline</h4>
              <div className="space-y-1.5">
                <div className="text-foreground flex items-center gap-2">
                  <Check className="text-success size-3.5 shrink-0" />
                  <span>
                    1. AuthnRequest dispatched with SP signature to{' '}
                    <code className="font-mono text-xs">{idpSsoUrl}</code>
                  </span>
                </div>
                <div className="text-foreground flex items-center gap-2">
                  <Check className="text-success size-3.5 shrink-0" />
                  <span>2. SAMLResponse assertion received and verified with RSA-SHA256 signature</span>
                </div>
                <div className="text-foreground flex items-center gap-2">
                  <Check className="text-success size-3.5 shrink-0" />
                  <span>
                    3. AudienceRestriction matched <code className="font-mono text-xs">{spEntityId}</code>
                  </span>
                </div>
                <div className="text-foreground flex items-center gap-2">
                  <Check className="text-success size-3.5 shrink-0" />
                  <span>4. Assertion timestamp valid within 300s clock-skew tolerance window</span>
                </div>
              </div>
            </div>

{/* Asserted Claims Table */}
            <div className="space-y-1.5">
              <h4 className="text-foreground text-xs font-semibold">Asserted Identity Claims & Attributes</h4>
              <div className="border-border bg-muted/10 overflow-hidden rounded-md border text-xs">
                <table className="w-full">
                  <thead>
                    <tr className="border-border bg-muted/40 text-muted-foreground border-b text-left font-medium">
                      <th className="p-2 text-xs">Field</th>
                      <th className="p-2 text-xs">Sample Claim Value</th>
                    </tr>
                  </thead>
                  <tbody className="divide-border divide-y font-mono text-xs">
                    {simulatedClaims.map((claim) => (
                      <tr key={claim.mappedField} className="hover:bg-muted/20">
                        <td className="text-primary p-2 font-semibold">{claim.mappedField}</td>
                        <td className="text-foreground max-w-[240px] truncate p-2">{claim.sampleValue}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" size="sm" onClick={() => setTestModalOpen(false)}>
              Close
            </Button>
            <Button size="sm" className="gap-1.5" onClick={openTestModal}>
              <RotateCw className="size-3.5" />
              <span>Re-test Handshake</span>
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

export default SsoIdentityProviderConfig
61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/sso-identity-provider-config/SsoIdentityProviderConfig.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/SsoIdentityProviderConfig.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>