SSO Provider Create

Preview of the SSO Provider Create component

Setup Requirements

Auth0 Configuration Required - Ensure your tenant is configured with the My Organization API. View setup guide →

Installation

npm install @auth0/universal-components-react

Running the shadcn command also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Quick Start

import { SsoProviderCreate } from '@auth0/universal-components-react/spa';

export function CreateProviderPage() {
  const navigate = useNavigate();

return (

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

Full integration example

While this example uses a React SPA, the prop configurations (schema, customMessages, styling, etc.) apply equally to Next.js and shadcn setups.

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");
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderCreate
        schema={{
          name: { required: true, minLength: 3, maxLength: 50 },
        }}
        createAction={{
          onBefore: (provider) => confirm(`Create "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => navigate("/sso-providers") }}
        customMessages={{
          header: { title: "Add New SSO Provider" },
        }}
        styling={{
          variables: { common: { "--color-primary": "#059669" } },
        }}
      />
    </div>
  );
}

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

Props

Core Props

Core props are fundamental to the component’s operation. For SsoProviderCreate, the only core prop controls what happens after a provider is successfully created.

Prop	Type	Description
`createAction`	`ComponentAction<...>`	Required. Controls post-creation flow. Details

createAction

Type: ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider> The createAction prop is required because it controls where to route the user after a provider is successfully created. Without this, the component wouldn’t know what to do next. Properties:

disabled - Disable the create button (e.g., while another operation is in progress)
onBefore(data) - Called before creation. Return false to cancel. Use for confirmation dialogs or validation.
onAfter(data, result) - Called after successful creation. Use for navigation or analytics.

Common Patterns:

// Navigate to providers list after creation
createAction={{
  onAfter: () => navigate("/providers/list"),
}}

// Navigate to edit the newly created provider
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

// Add confirmation dialog before creation
createAction={{
  onBefore: (provider) => {
    return confirm(`Create SSO provider "${provider.display_name}"?`);
  },
  onAfter: () => navigate("/providers/list"),
}}

Display Props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

Prop	Type	Description
`readOnly`	`boolean`	Disable all form inputs. Default: `false`
`hideHeader`	`boolean`	Hide the header section. Default: `false`

Action Props

Action props handle user interactions beyond the core creation flow. These control navigation and wizard step behavior.

Prop	Type	Description
`backButton`	`Object`	Back button configuration. Details
`onNext`	`Function`	Step navigation callback. Details
`onPrevious`	`Function`	Step navigation callback. Details

backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void } Configures the back button in the component header. Use this to navigate back to your providers list or previous page. Properties:

icon - Custom Lucide icon component (optional, defaults to ArrowLeft)
onClick - Click handler for navigation

Example:

import { ChevronLeft } from "lucide-react";

<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/providers/list"),
  }}
/>;

onNext / onPrevious

Type: (stepId: string, values: Partial<SsoProviderFormValues>) => boolean Control wizard step navigation. These callbacks are called when the user clicks Next or Previous. Return false to prevent navigation. Use cases:

Validate step data before proceeding
Log analytics for step completion
Conditionally skip steps

Parameters:

stepId - Current step identifier ("provider-select", "provider-details", "provider-configure")
values - Current form values

Example:

<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  onNext={(stepId, values) => {
    analytics.track("SSO Wizard Step Completed", { step: stepId });
    return true;
  }}
/>

Customization Props

Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

Prop	Type	Description
`schema`	`SsoProviderSchema`	Field validation rules. Details
`customMessages`	`Partial<SsoProviderCreateMessages>`	i18n text overrides. Details
`styling`	`ComponentStyling<SsoProviderCreateClasses>`	CSS variables and class overrides. Details

schema

Set custom validation rules for provider fields. Rules are organized by provider strategy. All fields support regex, errorMessage, minLength, maxLength, and required.

Available Schema Fields

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

<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,
    },
  }}
/>

customMessages

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
fields.adfs - ADFS fields
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

<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",
        },
      },
    },
    notifications: {
      provider_create_success: "SSO provider created successfully!",
    },
  }}
/>

styling

Customize appearance with CSS variables and class overrides. 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

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

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

For advanced use cases, you can import individual subcomponents to build custom SSO provider creation workflows. This is useful when you need to embed a single step in a different UI or customize the wizard flow beyond what props allow.

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

These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.

Hook	Description
`useSsoProviderCreate`	Provider creation logic and API integration

My Organization

​Setup Requirements

​Installation

​Quick Start

​Props

​Core Props

​createAction

​Display Props

​Action Props

​backButton

​onNext / onPrevious

​Customization Props

​schema

​customMessages

​styling

​Advanced Customization

​Available Subcomponents

​Available Hooks

Setup Requirements

Installation

Quick Start

Props

Core Props

createAction

Display Props

Action Props

backButton

onNext / onPrevious

Customization Props

schema

customMessages

styling

Advanced Customization

Available Subcomponents

Available Hooks