Skip to content

Pending Review

Pending Review from User Experience (UX)

SSO Config Component

Overview

The SSO Config component provides a comprehensive Single Sign-On configuration and management system for enterprise applications. This solution component combines tenant configuration, OIDC and SAML provider management, and administrative controls to deliver complete SSO setup workflows with multi-provider support and advanced authentication settings.

Core Capabilities

  • Multi-Protocol SSO Support - Complete configuration support for both OIDC (OpenID Connect) and SAML identity providers
  • Tenant Configuration Management - Administrative controls for tenant-level SSO settings including local login options and automatic registration
  • Provider Lifecycle Management - Full CRUD operations for SSO providers with enable/disable controls and configuration validation
  • Context-Driven State Management - Centralized SsoConfigContext for consistent configuration state across all management components
  • Wizard-Based Configuration - Step-by-step guided setup for complex SSO provider configurations with validation and testing
  • Security and Compliance Features - Advanced security settings including role discovery, signature validation, and authentication method configuration

When to use SSO Config:

  • Enterprise Identity Management - Applications requiring sophisticated SSO configuration with multiple identity provider support
  • Multi-Tenant SaaS Platforms - Software-as-a-Service applications needing tenant-specific SSO configuration and provider management
  • Administrative Dashboards - Management interfaces for configuring organizational SSO settings and identity provider integration
  • Identity Provider Integration - Applications that need to integrate with corporate identity systems and external authentication providers

When not to use SSO Config:

  • Simple Authentication - Use basic authentication components for applications without SSO requirements or identity provider integration
  • Single Provider Systems - Consider simpler configuration patterns for applications with fixed, single identity provider setups
  • Development Environments - Use mock authentication systems for development and testing scenarios without full SSO configuration complexity

Basic Implementation

import React, { useState } from 'react';
import { PwcSsoConfig } from '@progress-i360/pwc-react';

function SSOConfiguration() {
  const [config, setConfig] = useState({
    provider: 'oidc',
    enabled: true
  });

  const handleConfigChange = (field: string, value: any) => {
    setConfig(prev => ({ ...prev, [field]: value }));
  };

  return (
      <PwcSsoConfig
        baseApiUrl="/api/v1/sso"
        onConfigChange={handleConfigChange}
      />
  );
}

import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
import '@progress-i360/progress-web-components/sso-config';

function SSOProviderSettings() {
  const [providerSettings, setProviderSettings] = useState({
    oidcEnabled: true,
    samlEnabled: false
  });

  const deferredSettings = useDeferredValue(providerSettings);
  const { oidcEnabled, samlEnabled } = deferredSettings;
  const configRef = useRef<(HTMLElement & { oidcEnabled: boolean; samlEnabled: boolean }) | null>(null);

  const handleSettingsChange = useCallback((event: CustomEvent<{ type: string; enabled: boolean }>) => {
    const { type, enabled } = event.detail;
    setProviderSettings(prev => ({ ...prev, [type]: enabled }));
  }, []);

  useEffect(() => {
    if (configRef.current) {
      configRef.current.oidcEnabled = oidcEnabled;
      configRef.current.samlEnabled = samlEnabled;
    }
  }, [oidcEnabled, samlEnabled]);

  return (
      <pwc-sso-config
        ref={configRef}
        base-api-url="/api/v1/sso"
        onPwcProviderChange={handleSettingsChange}
      ></pwc-sso-config>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/sso-config";
import "@progress-i360/progress-web-components/action-bar";
import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'sso-config-demo',
  template: `
    <pwc-sso-config [baseApiUrl]="apiUrl"></pwc-sso-config>
    <pwc-action-bar heading="SSO Providers" [rowCount]="providerCount">
      <pwc-button slot="actions" label="Add Provider" variant="primary" (pwc-click)="addProvider()"></pwc-button>
    </pwc-action-bar>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SsoConfigDemo {
  apiUrl = "/mockssoapi";
  providerCount = 2;

  addProvider() {
    this.providerCount++;
  }
}

const ssoConfig = document.createElement('pwc-sso-config');
ssoConfig.setAttribute('base-api-url', '/api/v1/sso');

// OIDC auto-configuration from provider URL
ssoConfig.addEventListener('pwc-oidc-import', async (event) => {
  const { fromUrl } = event.detail;

  const response = await fetch('/api/v1/sso/configuration/import/broker-config-url', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ fromUrl })
  });

  if (response.ok) {
    const config = await response.json();
    console.log('OIDC configuration imported:', config.item);
  }
});

// Provider enable/disable management
ssoConfig.addEventListener('pwc-provider-toggle', async (event) => {
  const { providerName, enabled } = event.detail;
  const action = enabled ? 'enable' : 'disable';

  await fetch(`/api/v1/sso/broker/${providerName}/${action}`, {
    method: 'PATCH'
  });

  console.log(`SSO provider ${providerName} ${action}d successfully`);
});

document.body.appendChild(ssoConfig);

Usage Patterns

  • Enterprise SSO Administration - Complete administrative interface for managing organizational SSO settings and identity provider configurations
  • Multi-Provider Configuration - Setup and management of multiple OIDC and SAML providers with different authentication workflows and security settings
  • Tenant-Specific Customization - Configuration of tenant-level SSO preferences including local login options and automatic user registration settings
  • Provider Testing and Validation - Built-in testing capabilities for validating SSO provider configurations and authentication flows before deployment

Best Practices

Content Strategy Guidelines

  • Clear Provider Organization - Structure SSO providers logically with descriptive names and consistent display ordering for easy management
  • Configuration Validation Messaging - Provide clear, actionable validation messages that guide administrators through complex SSO setup processes
  • Security Setting Transparency - Present security-related configuration options with helpful explanations of their impact on authentication workflows
  • Step-by-Step Guidance - Use progressive disclosure and wizard patterns to break complex SSO configuration into manageable steps

Performance Optimization

  • Efficient Context Management - Implement proper SsoConfigContext usage to minimize unnecessary re-renders during configuration changes
  • API Call Optimization - Use debounced validation and batch operations for provider configuration updates to reduce server load
  • Lazy Loading Configuration - Load provider-specific configuration data only when needed to improve initial page load performance
  • State Persistence - Implement proper state management to preserve configuration progress during multi-step setup workflows

Integration Architecture

  • Modular Configuration Components - Structure SSO components (tenant summary, OIDC editor, SAML editor) as independent, reusable modules
  • Context-Driven Design - Leverage SsoConfigContext for consistent state management across all SSO configuration workflows
  • API Abstraction Layer - Implement clean SSO API client with proper error handling, retry logic, and configuration validation
  • Security-First Architecture - Design configuration flows that prioritize security best practices and compliance requirements

Common Use Cases

Data Table Headers

  • Provider Management Tables - Administrative tables showing SSO providers with status, type (OIDC/SAML), and configuration completeness indicators
  • Tenant Configuration Views - Management interfaces displaying tenant-level SSO settings with enable/disable controls and configuration options
  • Provider Performance Metrics - Tables showing SSO provider usage statistics, authentication success rates, and error tracking information

Search Result Sections

  • Provider Discovery - Search across configured SSO providers by name, type, status, and configuration parameters for easy administration
  • Configuration History - Search and filter SSO configuration changes with audit trails and version history for compliance tracking
  • Provider Troubleshooting - Search SSO authentication logs and error reports by provider, user, or time period for debugging support

Dashboard Widget Headers

  • SSO Health Monitoring - Dashboard widgets showing SSO provider status, authentication success rates, and system health metrics
  • Configuration Overview - Summary widgets displaying configured providers, active tenant settings, and configuration completeness status
  • Security Analytics - Overview widgets showing authentication patterns, security events, and compliance status across SSO providers

Troubleshooting

Configuration Issues

  • Provider Metadata Loading - Verify provider endpoints, certificate configurations, and metadata URLs are accessible and properly formatted
  • Authentication Flow Errors - Check redirect URIs, scope configurations, and protocol-specific settings for OIDC/SAML providers
  • Tenant Configuration Conflicts - Resolve conflicting tenant-level SSO settings and provider priority configurations

Integration Problems

  • Context State Management - Ensure SSO Config context is properly initialized and provider state updates are handled correctly
  • Component Communication - Verify proper event handling between SSO Config components and parent containers
  • Provider Discovery Issues - Check network connectivity, firewall rules, and provider endpoint accessibility

Performance Issues

  • Slow Configuration Loading - Optimize provider metadata caching, implement lazy loading for large provider lists
  • Authentication Delays - Monitor SSO handshake performance, optimize provider response handling
  • Memory Usage - Manage provider configuration state efficiently, implement proper cleanup for unused configurations

Implementation Support

Development Resources

  • TypeScript definitions for enhanced development experience
  • Integration examples for React, Angular, and Vue.js frameworks
  • Testing utilities and mock configurations for development

Advanced Configuration

  • Custom provider integration patterns
  • Multi-tenant SSO setup guidelines
  • Security best practices and compliance considerations

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.