Create SSO Providers on Web

The SsoProviderCreate component provides a unified interface to add new Single Sign-On providers.

React
Next.js
shadcn

Setup requirements

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

Installation

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

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

Get started

import { SsoProviderCreate } from "@auth0/universal-components-react";
import { useNavigate } from "react-router-dom";

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

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

Full integration example

import React from "react";
import { SsoProviderCreate } from "@auth0/universal-components-react";
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() {
  const domain = "your-domain.nitzsshe.shop";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler='popup' // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

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

pnpm add @auth0/universal-components-react

Running the npm or pnpm commands installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Get started

page.tsx

import { SsoProviderCreate } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";

export function CreateProviderPage() {
  const router = useRouter();

  return (
    <SsoProviderCreate
      createAction={{
        onAfter: () => router.push("/providers/list"),
      }}
      backButton={{
        onClick: () => router.push("/providers/list"),
      }}
    />
  );
}

Full integration example

import React from "react";
import { SsoProviderCreate } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";
import { analytics } from "./lib/analytics";

function CreateSsoProviderPage() {
  const router = useRouter();

  const handleCreateSuccess = (provider, result) => {
    analytics.track("SSO Provider Created", {
      strategy: provider.strategy,
      name: provider.name,
    });
    router.push("/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: () => router.push("/sso-providers") }}
        customMessages={{
          header: { title: "Add New SSO Provider" },
        }}
        styling={{
          variables: { common: { "--color-primary": "#059669" } },
        }}
      />
    </div>
  );
}

export default CreateSsoProviderPage;

Setup requirements

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

Installation

Install the component via the shadcn CLI using the GitHub Registry:

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/sso-provider-create

The shadcn CLI also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration. Requires shadcn CLI v2.5.0+.

Get started

import { SsoProviderCreate } from "@/components/auth0/my-organization/sso-provider-create";

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

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

Full integration example

import React from "react";
import { SsoProviderCreate } from "@/components/auth0/my-organization/sso-provider-create";
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() {
  const domain = "your-domain.nitzsshe.shop";

  return (
    <Auth0Provider
      domain={domain}
      clientId="your-client-id"
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler='popup' // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Required props

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

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

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

disabled—Disable the create button (for example, while another operation is in progress)
onBefore(data)—Runs before the provider is created. Return false to prevent creation (for example, to show a confirmation dialog first).
onAfter(data, result)—Runs after the provider is successfully created. Use this to navigate to another page or track the event.

Example:

// 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.
`onNext`	`Function`	Step navigation callback.
`onPrevious`	`Function`	Step navigation callback.

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 the 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.
`customMessages`	`Partial<SsoProviderCreateMessages>`	i18n text overrides.
`styling`	`ComponentStyling<SsoProviderCreateClasses>`	CSS variables and class overrides.

schema Set custom validation rules for provider fields. Rules are organized by provider strategy (the authentication protocol used, such as oidc, samlp, waad, google-apps, adfs, pingfederate, or okta). 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

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

Web Components

iOS Components

Android Components

Create SSO Providers on Web

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available hooks

​Setup requirements

​Installation

​Get started

​Setup requirements

​Installation

​Get started

​Setup requirements

​Installation

​Get started

​Props

​Required props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available hooks