SsoProviderCreate Component

BETA Multi-step wizard for creating SSO providers with provider selection, details configuration, and authentication setup for Okta, ADFS, SAML, OIDC, Google Workspace, Azure AD, and PingFederate.

Component Preview

Setup Requirements

Auth0 Configuration Required Before using the SsoProviderCreate component, ensure your tenant is configured with the proper APIs, applications, and permissions. Complete setup guide: My Organization Components Introduction →

Installation

Option 1: NPM Package

Install the React package:

npm install @auth0/universal-components-react

This method installs pre-built components from npm and is the recommended approach for most applications.

Option 2: Shadcn CLI

If you’re using Shadcn, you can add the SsoProviderCreate block directly to your project. You’ll still need to install the core package separately:

Install Core Package

npm install @auth0/universal-components-core

Add Shadcn Block

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-create.json

Shadcn installs the React component source code in your src/auth0-ui-components/ directory along with all UI dependencies, but you must install the core package separately via npm.

Basic Usage

Basic implementation

// For SPA applications:
import { SsoProviderCreate } from "@auth0/universal-components-react/spa";

// For Next.js/RWA applications:
// import { SsoProviderCreate } from '@auth0/universal-components-react/rwa';

// For shadcn users:
// import { SsoProviderCreate } from '@/auth0-ui-components/blocks/my-organization/idp-management/sso-provider-create';

export function CreateProviderPage() {
  return (
    <div>
      <SsoProviderCreate
        createAction={{
          onAfter: () => {
            navigate("/providers/list");
          },
        }}
        backButton={{
          onClick: () => {
            navigate("/providers/list");
          },
        }}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`schema`	`SsoProviderSchema`	-	Validation schema for form fields including regex patterns and error messages
`customMessages`	`Partial<SsoProviderCreateMessages>`	`{}`	Custom messages object for internationalization support
`styling`	`ComponentStyling<SsoProviderCreateClasses>`	`{ variables: {}, classes: {} }`	Custom CSS variables and class names for styling
`readOnly`	`boolean`	`false`	When true, form is read-only and actions are disabled
`hideHeader`	`boolean`	`false`	Hides the component header
`createAction`	`ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider>`	required	Configuration for create action including onBefore and onAfter hooks
`backButton`	`SsoProviderCreateBackButton`	-	Back button configuration with icon and click handler
`onNext`	`(stepId: string, values: Partial<SsoProviderFormValues>) => boolean`	-	Callback when moving to next wizard step, return false to prevent navigation
`onPrevious`	`(stepId: string, values: Partial<SsoProviderFormValues>) => boolean`	-	Callback when moving to previous wizard step, return false to prevent navigation

Advanced Configuration

Actions

Handle wizard lifecycle events with callbacks. All action properties are optional except for createAction:

Available Action Properties

createAction - Provider creation action - disabled - onBefore - onAfter - backButton - Navigation action - icon - onClick - onNext - Step navigation callback - Receives stepId and form values - Return false to prevent navigation - onPrevious - Step navigation callback - Receives stepId and form values - Return false to prevent navigation

The onBefore hooks can return false to cancel the action.

Action hooks example

<SsoProviderCreate
  createAction={{
    onBefore: (provider) => {
      return confirm("Create SSO provider " + provider.display_name + "?");
    },
    onAfter: (provider, result) => {
      analytics.track("SSO Provider Created", {
        strategy: provider.strategy,
        name: provider.name,
      });
      navigate("/sso-providers");
    },
  }}
  backButton={{
    onClick: () => navigate("/sso-providers"),
  }}
/>

Custom Messages

Customize all text and translations. All fields are optional and use defaults if not provided:

Available Messages

header - Component header - title - back_button_text - provider_select - Step 1 - title - description - provider_details
Step 2 - title - description - fields.name.label, placeholder, helper_text, error - fields.display_name.label, placeholder, helper_text, error - provider_configure - Step 3 - title - description - guided_setup_button_text - fields.okta - Okta fields (domain, client_id, client_secret, icon_url, callback_url) - fields.adfs - ADFS fields (meta_data_source, meta_data_url, etc.) - fields.google-apps - Google Workspace fields - fields.oidc - OIDC fields - fields.pingfederate - PingFederate fields - fields.samlp - SAML fields - fields.waad - Azure AD fields - notifications - API responses - general_error - provider_create_success

Custom messages example

<SsoProviderCreate
  createAction={{}}
  customMessages={{
    header: {
      title: "Add New SSO Provider",
      back_button_text: "Cancel",
    },
    provider_details: {
      title: "Provider Information",
      fields: {
        name: {
          label: "Connection Name",
          helper_text: "Internal identifier for this connection",
        },
      },
    },
    provider_configure: {
      title: "Authentication Configuration",
    },
    notifications: {
      provider_create_success: "SSO provider created successfully!",
    },
  }}
/>

Custom Styling

Customize appearance with CSS variables and classes. Supports theme-aware styling:

Available Styling Options

Variables - CSS custom properties - common - Applied to all themes - light - Light theme only - dark - Dark theme only - Classes - Component class overrides - SsoProviderCreate-header - SsoProviderCreate-wizard - ProviderSelect-root - ProviderDetails-root - ProviderConfigure-root

Custom styling example

<SsoProviderCreate
  createAction={{}}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
    },
    classes: {
      "SsoProviderCreate-wizard": "shadow-xl rounded-xl",
      "ProviderSelect-root": "grid grid-cols-3 gap-6",
    },
  }}
/>

Schema Validation

Set up custom validation rules with the schema prop. All fields are optional and override defaults:

Available Schema Fields

All schema fields support: regex, errorMessage, minLength, maxLength, required - Provider Details: name, displayName - Okta: okta.domain, okta.client_id, okta.client_secret, okta.icon_url, okta.callback_url - ADFS: adfs.meta_data_source, adfs.meta_data_location_url, adfs.adfs_server, adfs.fedMetadataXml - Google Workspace: google-apps.domain, google-apps.client_id, google-apps.client_secret, google-apps.icon_url, google-apps.callback_url - OIDC: oidc.type, oidc.client_id, oidc.client_secret, oidc.discovery_url, oidc.isFrontChannel - PingFederate: pingfederate.signatureAlgorithm, pingfederate.digestAlgorithm, pingfederate.signSAMLRequest, pingfederate.metadataUrl, pingfederate.signingCert, pingfederate.idpInitiated, pingfederate.icon_url - SAML: samlp.meta_data_source, samlp.single_sign_on_login_url, samlp.signatureAlgorithm, samlp.digestAlgorithm, samlp.protocolBinding, samlp.signSAMLRequest, samlp.bindingMethod, samlp.metadataUrl, samlp.cert, samlp.idpInitiated, samlp.icon_url - Azure AD: waad.domain, waad.client_id, waad.client_secret, waad.icon_url, waad.callback_url

Schema validation example

<SsoProviderCreate
  createAction={{}}
  schema={{
    name: {
      minLength: 3,
      maxLength: 50,
      regex: /^[a-zA-Z0-9-_]+$/,
      errorMessage: "Name must be alphanumeric with hyphens/underscores",
    },
    displayName: {
      required: true,
      maxLength: 100,
    },
  }}
/>

Complete Integration Example

Complete implementation example

import React from "react";
import { SsoProviderCreate } from "@auth0/universal-components-react/spa";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function CreateSsoProviderPage() {
  const navigate = useNavigate();

  const handleCreateSuccess = (provider, result) => {
    analytics.track("SSO Provider Created", {
      strategy: provider.strategy,
      name: provider.name,
    });
    navigate("/sso-providers");
  };

  const handleBackButton = () => {
    navigate("/sso-providers");
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderCreate
        schema={{
          name: {
            required: true,
            minLength: 3,
            maxLength: 50,
            regex: /^[a-zA-Z0-9-_]+$/,
            errorMessage:
              "Name must be alphanumeric with hyphens and underscores only",
          },
          displayName: {
            required: true,
            maxLength: 100,
          },
        }}
        createAction={{
          onBefore: (provider) => {
            return confirm(`Create SSO provider "${provider.display_name}"?`);
          },
          onAfter: handleCreateSuccess,
        }}
        backButton={{
          onClick: handleBackButton,
        }}
        customMessages={{
          header: {
            title: "Add New SSO Provider",
          },
          notifications: {
            provider_create_success: "SSO provider created successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "SsoProviderCreate-wizard": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const authDetails = {
    domain: "your-domain.auth0.com",
    clientId: "your-client-id",
  };
  return (
    <Auth0Provider
      {...authDetails}
      redirectUri={window.location.origin}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Advanced Customization

The SsoProviderCreate component is composed of smaller subcomponents and hooks. You can import them individually to build custom SSO provider creation workflows if you use shadcn.

Available Subcomponents

Component	Description
`ProviderSelect`	Strategy selection step with provider icons
`ProviderDetails`	Name and display name configuration step
`ProviderConfigure`	Strategy-specific configuration step
`ProviderConfigureFields`	Dynamic form fields based on strategy
`OktaProviderForm`	Okta-specific configuration form
`AdfsProviderForm`	ADFS-specific configuration form
`GoogleAppsProviderForm`	Google Workspace-specific configuration form
`OidcProviderForm`	OIDC-specific configuration form
`PingFederateProviderForm`	PingFederate-specific configuration form
`SamlpProviderForm`	SAML-specific configuration form
`WaadProviderForm`	Azure AD-specific configuration form
`Wizard`	Multi-step wizard UI

Available Hooks

Hook	Description
`useSsoProviderCreate`	Provider creation logic and API integration

My Organization

​SsoProviderCreate Component

​Component Preview

​Setup Requirements

​Installation

​Option 1: NPM Package

​Option 2: Shadcn CLI

​Basic Usage

​Props

​Advanced Configuration

​Actions

​Custom Messages

​Custom Styling

​Schema Validation

​Complete Integration Example

​Advanced Customization

​Available Subcomponents

​Available Hooks

SsoProviderCreate Component

Component Preview

Setup Requirements

Installation

Option 1: NPM Package

Option 2: Shadcn CLI

Basic Usage

Props

Advanced Configuration

Actions

Custom Messages

Custom Styling

Schema Validation

Complete Integration Example

Advanced Customization

Available Subcomponents

Available Hooks