{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sso-identity-provider-config", "title": "Sso Identity Provider Config", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sso-identity-provider-config/sso-identity-provider-config.component.ts", "content": "// Enterprise Single Sign-On (SAML 2.0 / OIDC) identity provider configuration wizard\n// with IdP preset picker, SP credentials, XML metadata dropzone, X.509 cert PEM\n// validator, domain enforcement switch, and interactive SAML test runner.\n// Port of the Vue block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n Copy,\n Download,\n ExternalLink,\n FileCode,\n Globe,\n KeyRound,\n Lock,\n LucideAngularModule,\n Play,\n RotateCw,\n Save,\n ShieldAlert,\n ShieldCheck,\n UploadCloud,\n UserCheck,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type IdpPresetId = 'okta' | 'entra' | 'google' | 'custom'\n\ninterface 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\ninterface ClaimAttribute {\n samlAttribute: string\n mappedField: string\n sampleValue: 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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sso-identity-provider-config, [ui-sso-identity-provider-config]',\n standalone: true,\n // Vue renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n

Single Sign-On (SSO) & SAML 2.0 Configuration

\n @if (ssoEnabled()) {\n \n \n SSO Active\n \n } @else {\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 \n @if (saveSuccessNotice()) {\n \n
\n \n \n SSO configuration saved successfully. All assertions will validate against {{ currentPreset().name }}.\n \n
\n \n \n \n
\n }\n\n \n
\n
\n
\n

Identity Provider Presets

\n

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

\n
\n SAML 2.0 / Web SSO\n
\n\n
\n @for (preset of presets; track preset.id) {\n \n }\n
\n
\n\n \n
\n \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 Our Endpoints\n
\n
\n\n
\n
\n
\n \n \n @if (copiedKey() === 'acs') {\n \n } @else {\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
\n
\n \n \n @if (copiedKey() === 'entity-id') {\n \n } @else {\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
\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
\n
\n \n
\n \n @if (copiedKey() === 'sp-cert') {\n \n } @else {\n \n }\n {{ copiedKey() === 'sp-cert' ? 'Copied' : 'Copy PEM' }}\n \n \n \n Download .crt\n \n
\n
\n\n {{ spCertificatePemValue }}\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 \n {{ copiedKey() === 'meta-url' ? 'Copied URL' : 'Copy metadata.xml URL' }}\n \n \n
\n
\n
\n\n \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 {{ currentPreset().name }}\n
\n
\n\n
\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 @if (xmlUploadedNotice()) {\n \n \n Parsed SSO URL, Entity ID, and X.509 Certificate from metadata XML.\n
\n }\n\n
\n \n \n

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

\n
\n\n
\n \n \n

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

\n
\n\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
\n
\n
\n \n

Enforce SSO for all domain emails

\n
\n

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

\n
\n \n
\n
\n\n
\n \n Reset to Defaults\n \n \n @if (isSaving()) {\n \n } @else {\n \n }\n {{ isSaving() ? 'Saving...' : 'Save SSO Configuration' }}\n \n
\n
\n \n \n\n \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 \n
\n \n
\n

HTTP 200 OK — SAML Handshake Validated

\n

All signature envelopes matched X.509 certificate

\n
\n
\n Success\n
\n\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 {{ spEntityIdValue }}\n \n
\n
\n \n 4. Assertion timestamp valid within 300s clock-skew tolerance window\n
\n
\n
\n\n
\n

Asserted Identity Claims & Attributes

\n
\n \n \n \n \n \n \n \n \n @for (claim of claims; track claim.mappedField) {\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})\nexport class UiSsoIdentityProviderConfigComponent {\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly ExternalLink = ExternalLink\n protected readonly FileCode = FileCode\n protected readonly Globe = Globe\n protected readonly KeyRound = KeyRound\n protected readonly Lock = Lock\n protected readonly Play = Play\n protected readonly RotateCw = RotateCw\n protected readonly Save = Save\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly UploadCloud = UploadCloud\n protected readonly UserCheck = UserCheck\n protected readonly X = X\n protected readonly presets = idpPresets\n protected readonly claims = simulatedClaims\n protected readonly spAcsUrlValue = spAcsUrl\n protected readonly spEntityIdValue = spEntityId\n protected readonly spMetadataXmlUrlValue = spMetadataXmlUrl\n protected readonly spCertificatePemValue = spCertificatePem\n\n @Input() set initialSsoEnabled(v: boolean) {\n this.ssoEnabled.set(v ?? true)\n }\n @Input() set initialPreset(v: IdpPresetId) {\n if (v) this.handleSelectPreset(v)\n }\n @Input() set initialEnforceDomain(v: boolean) {\n this.enforceDomain.set(v ?? true)\n }\n @Input('class') className?: string\n\n readonly ssoEnabled = signal(true)\n readonly selectedPresetId = signal('okta')\n readonly enforceDomain = signal(true)\n\n readonly currentPreset = computed(() => idpPresets.find((p) => p.id === this.selectedPresetId()) ?? idpPresets[0]!)\n\n readonly idpSsoUrl = signal(idpPresets[0]!.defaultSsoUrl)\n readonly idpEntityId = signal(idpPresets[0]!.defaultEntityId)\n readonly idpCertPem = signal(idpPresets[0]!.defaultCert)\n\n readonly copiedKey = signal(null)\n private copyTimer: ReturnType | undefined\n\n readonly isDraggingXml = signal(false)\n readonly xmlUploadedNotice = signal(false)\n\n readonly isSaving = signal(false)\n readonly saveSuccessNotice = signal(false)\n\n readonly testModalOpen = signal(false)\n readonly isTesting = signal(false)\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n get dropzoneClass(): string {\n return cn(\n 'border-border relative flex cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed p-4 text-center transition-colors',\n this.isDraggingXml() ? 'border-primary bg-primary/10' : 'bg-muted/20 hover:border-primary/50 hover:bg-muted/40',\n )\n }\n\n presetCardClass(id: IdpPresetId): string {\n return cn(\n 'group relative flex flex-col justify-between rounded-xl border p-4 text-left transition-colors duration-150',\n 'focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',\n this.selectedPresetId() === id\n ? 'border-primary bg-primary/5 ring-primary shadow-xs ring-1'\n : 'border-border bg-card hover:border-primary/40 hover:bg-accent/40',\n )\n }\n\n presetIconClass(id: IdpPresetId): string {\n return cn(\n 'flex size-8 items-center justify-center rounded-lg text-xs font-bold transition-colors',\n this.selectedPresetId() === id\n ? 'bg-primary text-primary-foreground'\n : 'bg-muted text-foreground group-hover:bg-primary/10 group-hover:text-primary',\n )\n }\n\n async copyText(text: string, key: string): Promise {\n try {\n await navigator.clipboard.writeText(text)\n this.copiedKey.set(key)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => {\n if (this.copiedKey() === key) this.copiedKey.set(null)\n }, 2000)\n } catch {\n // Clipboard unavailable\n }\n }\n\n handleSelectPreset(presetId: IdpPresetId): void {\n this.selectedPresetId.set(presetId)\n const preset = idpPresets.find((p) => p.id === presetId)\n if (preset) {\n this.idpSsoUrl.set(preset.defaultSsoUrl)\n this.idpEntityId.set(preset.defaultEntityId)\n this.idpCertPem.set(preset.defaultCert)\n this.xmlUploadedNotice.set(false)\n }\n }\n\n downloadSpCertificate(): void {\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 handleXmlDrop(e: DragEvent): void {\n e.preventDefault()\n this.isDraggingXml.set(false)\n this.simulateXmlUpload()\n }\n\n handleXmlDragOver(e: DragEvent): void {\n e.preventDefault()\n this.isDraggingXml.set(true)\n }\n\n handleXmlDragLeave(): void {\n this.isDraggingXml.set(false)\n }\n\n simulateXmlUpload(): void {\n const preset = this.currentPreset()\n this.idpSsoUrl.set(preset.defaultSsoUrl)\n this.idpEntityId.set(preset.defaultEntityId)\n this.idpCertPem.set(preset.defaultCert)\n this.xmlUploadedNotice.set(true)\n setTimeout(() => this.xmlUploadedNotice.set(false), 4000)\n }\n\n handleSaveConfig(): void {\n if (this.isSaving()) return\n this.isSaving.set(true)\n setTimeout(() => {\n this.isSaving.set(false)\n this.saveSuccessNotice.set(true)\n setTimeout(() => this.saveSuccessNotice.set(false), 3500)\n }, 600)\n }\n\n openTestModal(): void {\n this.testModalOpen.set(true)\n this.isTesting.set(true)\n setTimeout(() => this.isTesting.set(false), 500)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sso-identity-provider-config/sso-identity-provider-config.component.ts" }, { "path": "packages/registry-angular/blocks/sso-identity-provider-config/index.ts", "content": "export { UiSsoIdentityProviderConfigComponent, type IdpPresetId } from './sso-identity-provider-config.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sso-identity-provider-config/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/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" ] }