> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Create SSO Providers on Web

> Multi-step wizard for creating SSO providers with provider selection, details configuration, and authentication setup

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Early Access"
  };
  const stageText = stageTextMap[stage] || "a product release stage";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. </>}
            {contact && "To participate, contact " + contact + ". "}
            {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>The {feature} feature is in {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="Loading" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>;

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

The `SsoProviderCreate` component provides a unified interface to add new [Single Sign-On](/docs/authenticate/enterprise-connections/self-service-enterprise-configuration) providers.

<ComponentLoader componentSelector="sso-provider-create" componentPreviewText="Preview of the SSO Provider Create component" />

<Tabs>
  <Tab title="React">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the
      My Organization API. [View setup guide
      →](/docs/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    ## Installation

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Running either command also installs the @auth0/universal-components-core
      dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      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.auth0.com";

        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 domain={domain}>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the
      My Organization API. [View setup guide
      →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    <CodeGroup>
      ```bash npm (Recommended) wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Running the npm or pnpm commands installs the @auth0/universal-components-core
      dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx page.tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      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;
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    ## Setup requirements

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration Required**—Ensure your tenant is configured with the
      My Organization API. [View setup guide
      →](/docs/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    ```bash wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-create.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Running the shadcn command also installs the @auth0/universal-components-core
      dependency for shared utilities and Auth0 integration.
    </Callout>

    ## Get started

    ```tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Full integration example">
      ```tsx wrap lines theme={null}
      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.auth0.com";

        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 domain={domain}>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>
  </Tab>
</Tabs>

## 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.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>createAction</code>
      </td>

      <td>
        <code>ComponentAction\<...></code>
      </td>

      <td>
        <strong>Required.</strong> Controls post-creation flow.
      </td>
    </tr>
  </tbody>
</table>

**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:**

```tsx wrap lines theme={null}
// 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.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>readOnly</code>
      </td>

      <td>
        <code>boolean</code>
      </td>

      <td>
        Disable all form inputs. Default: <code>false</code>
      </td>
    </tr>

    <tr>
      <td>
        <code>hideHeader</code>
      </td>

      <td>
        <code>boolean</code>
      </td>

      <td>
        Hide the header section. Default: <code>false</code>
      </td>
    </tr>
  </tbody>
</table>

***

### Action props

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

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>backButton</code>
      </td>

      <td>
        <code>Object</code>
      </td>

      <td>
        Back button configuration.
      </td>
    </tr>

    <tr>
      <td>
        <code>onNext</code>
      </td>

      <td>
        <code>Function</code>
      </td>

      <td>
        Step navigation callback.
      </td>
    </tr>

    <tr>
      <td>
        <code>onPrevious</code>
      </td>

      <td>
        <code>Function</code>
      </td>

      <td>
        Step navigation callback.
      </td>
    </tr>
  </tbody>
</table>

**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:**

```tsx wrap lines theme={null}
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:**

```tsx wrap lines theme={null}
<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.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>schema</code>
      </td>

      <td>
        <code>SsoProviderSchema</code>
      </td>

      <td>
        Field validation rules.
      </td>
    </tr>

    <tr>
      <td>
        <code>customMessages</code>
      </td>

      <td>
        <code>Partial\<SsoProviderCreateMessages></code>
      </td>

      <td>
        i18n text overrides.
      </td>
    </tr>

    <tr>
      <td>
        <code>styling</code>
      </td>

      <td>
        <code>ComponentStyling\<SsoProviderCreateClasses></code>
      </td>

      <td>
        CSS variables and class overrides.
      </td>
    </tr>
  </tbody>
</table>

**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`.

<Accordion title="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`
</Accordion>

```tsx wrap lines theme={null}
<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.

<Accordion title="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`
</Accordion>

```tsx wrap lines theme={null}
<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.

<Accordion title="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`
</Accordion>

```tsx wrap lines theme={null}
<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.

<table class="table">
  <thead>
    <tr>
      <th>Component</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>ProviderSelect</code>
      </td>

      <td>Strategy selection step with provider icons</td>
    </tr>

    <tr>
      <td>
        <code>ProviderDetails</code>
      </td>

      <td>Name and display name configuration step</td>
    </tr>

    <tr>
      <td>
        <code>ProviderConfigure</code>
      </td>

      <td>Strategy-specific configuration step</td>
    </tr>

    <tr>
      <td>
        <code>ProviderConfigureFields</code>
      </td>

      <td>Dynamic form fields based on strategy</td>
    </tr>

    <tr>
      <td>
        <code>OktaProviderForm</code>
      </td>

      <td>Okta-specific configuration form</td>
    </tr>

    <tr>
      <td>
        <code>AdfsProviderForm</code>
      </td>

      <td>ADFS-specific configuration form</td>
    </tr>

    <tr>
      <td>
        <code>GoogleAppsProviderForm</code>
      </td>

      <td>Google Workspace-specific configuration form</td>
    </tr>

    <tr>
      <td>
        <code>OidcProviderForm</code>
      </td>

      <td>OIDC-specific configuration form</td>
    </tr>

    <tr>
      <td>
        <code>PingFederateProviderForm</code>
      </td>

      <td>PingFederate-specific configuration form</td>
    </tr>

    <tr>
      <td>
        <code>SamlpProviderForm</code>
      </td>

      <td>SAML-specific configuration form</td>
    </tr>

    <tr>
      <td>
        <code>WaadProviderForm</code>
      </td>

      <td>Azure AD-specific configuration form</td>
    </tr>

    <tr>
      <td>
        <code>Wizard</code>
      </td>

      <td>Multi-step wizard UI</td>
    </tr>
  </tbody>
</table>

### Available hooks

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

<table class="table">
  <thead>
    <tr>
      <th>Hook</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>useSsoProviderCreate</code>
      </td>

      <td>Provider creation logic and API integration</td>
    </tr>
  </tbody>
</table>