> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Crear proveedor de SSO

> Asistente paso a paso para crear proveedores de SSO con selección de proveedor, configuración de detalles y configuración de autenticación

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="Cargando" 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>;

El componente `SsoProviderCreate` ofrece una interfaz unificada para añadir nuevos proveedores de [inicio de sesión único](/es/docs/authenticate/enterprise-connections/self-service-enterprise-configuration).

<ComponentLoader componentSelector="sso-provider-create" componentPreviewText="Vista previa del componente de creación de proveedores de SSO" />

<Tabs>
  <Tab title="React">
    ## Requisitos de configuración

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Se requiere configurar Auth0** - Asegúrese de que su inquilino esté configurado para usar la
      API My Organization. [Ver guía de configuración
      →](/es/docs/get-started/universal-components/my-organization/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    ## Instalación

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

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Al ejecutar cualquiera de los dos comandos, también se instala la dependencia @auth0/universal-components-core
      para utilidades compartidas e integración con Auth0.
    </Callout>

    ## Primeros pasos

    ```tsx 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="Ejemplo completo de integración">
      ```tsx 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' // Obligatorio para gestionar desafíos de autenticación escalonada mediante la ventana emergente de Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    ## Requisitos de configuración

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuración de Auth0 obligatoria**: asegúrese de que su inquilino tenga configurada la
      API My Organization. [Ver la guía de configuración
      →](/es/docs/get-started/universal-components/my-organization/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Instalación

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

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Al ejecutar los comandos `npm` o `pnpm`, se instala la dependencia @auth0/universal-components-core
      para utilidades compartidas e integración con Auth0.
    </Callout>

    ## Primeros pasos

    ```tsx page.tsx 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="Ejemplo completo de integración">
      ```tsx 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">
    ## Requisitos de configuración

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuración de Auth0 obligatoria**: asegúrese de que su inquilino tenga configurada la
      API My Organization. [Ver la guía de configuración
      →](/es/docs/get-started/universal-components/my-organization/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Instalación

    ```bash 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">
      Al ejecutar el comando de shadcn, también se instala la dependencia @auth0/universal-components-core
      para utilidades compartidas y la integración con Auth0.
    </Callout>

    ## Primeros pasos

    ```tsx 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="Ejemplo completo de integración">
      ```tsx 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(`¿Crear "${provider.display_name}"?`),
                onAfter: handleCreateSuccess,
              }}
              backButton={{ onClick: () => navigate("/sso-providers") }}
              customMessages={{
                header: { title: "Agregar nuevo proveedor de SSO" },
              }}
              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' // Necesario para gestionar desafíos de autenticación step-up mediante la ventana emergente de Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

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

<div id="props">
  ## Props
</div>

<div id="required-props">
  ### Props obligatorias
</div>

Las props obligatorias son fundamentales para el funcionamiento del componente. En `SsoProviderCreate`, solo hay una prop principal que controla qué sucede después de crear correctamente un proveedor.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Tipo</th>
      <th>Descripción</th>
    </tr>
  </thead>

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

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

      <td>
        <strong>Obligatoria.</strong> Controla el flujo posterior a la creación.
      </td>
    </tr>
  </tbody>
</table>

**createAction**

**Tipo:** `ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider>`

La prop `createAction` es obligatoria porque controla adónde se redirige a los usuarios después de crear correctamente un proveedor. Sin ella, el componente no sabría qué hacer a continuación.

**Propiedades:**

* `disabled` - Desactiva el botón de creación (por ejemplo, mientras hay otra operación en curso)
* `onBefore(data)` - Se ejecuta antes de crear el proveedor. Devuelve `false` para impedir la creación (por ejemplo, para mostrar primero un cuadro de diálogo de confirmación).
* `onAfter(data, result)` - Se ejecuta después de crear correctamente el proveedor. Úsalo para navegar a otra página o registrar el evento.

**Ejemplo:**

```tsx theme={null}
// Navegar a la lista de proveedores después de la creación
createAction={{
  onAfter: () => navigate("/providers/list"),
}}

// Navegar para editar el proveedor recién creado
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

// Agregar diálogo de confirmación antes de la creación
createAction={{
  onBefore: (provider) => {
    return confirm(`Create SSO provider "${provider.display_name}"?`);
  },
  onAfter: () => navigate("/providers/list"),
}}
```

***

<div id="display-props">
  ### Props de visualización
</div>

Los props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento. Úsalos para ocultar secciones o activar el modo de solo lectura.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Tipo</th>
      <th>Descripción</th>
    </tr>
  </thead>

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

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

      <td>
        Deshabilita todos los campos del formulario. Valor predeterminado: <code>false</code>
      </td>
    </tr>

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

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

      <td>
        Oculta la sección del encabezado. Valor predeterminado: <code>false</code>
      </td>
    </tr>
  </tbody>
</table>

***

<div id="action-props">
  ### Props de Action
</div>

Las props de Action manejan las interacciones del usuario más allá del flujo principal de creación. Controlan la navegación y el comportamiento de los pasos del asistente.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Tipo</th>
      <th>Descripción</th>
    </tr>
  </thead>

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

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

      <td>
        Configuración del botón para volver.
      </td>
    </tr>

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

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

      <td>
        callback de navegación entre pasos.
      </td>
    </tr>

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

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

      <td>
        callback de navegación entre pasos.
      </td>
    </tr>
  </tbody>
</table>

**backButton**

**Tipo:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

Configura el botón para volver en el encabezado del componente. Úsalo para volver a tu lista de proveedores o a la página anterior.

**Propiedades:**

* `icon` - Componente de icono de Lucide personalizado (opcional; el valor predeterminado es ArrowLeft)
* `onClick` - Controlador de clic para la navegación

**Ejemplo:**

```tsx theme={null}
import { ChevronLeft } from "lucide-react";

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

***

**onNext / onPrevious**

**Tipo:** `(stepId: string, values: Partial<SsoProviderFormValues>) => boolean`

Controla la navegación entre los pasos del asistente. Estos callbacks se ejecutan cuando el usuario hace clic en Siguiente o Anterior. Devuelve `false` para impedir la navegación.

**Casos de uso:**

* Validar los datos del paso antes de continuar
* Registrar eventos analíticos al completar pasos
* Omitir pasos de forma condicional

**Parámetros:**

* `stepId` - Identificador del paso actual (`"provider-select"`, `"provider-details"`, `"provider-configure"`)
* `values` - Valores actuales del formulario

**Ejemplo:**

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

***

<div id="customization-props">
  ### Props de personalización
</div>

Los props de personalización te permiten adaptar el componente a tu marca, configuración regional y requisitos de validación sin modificar el código fuente.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Tipo</th>
      <th>Descripción</th>
    </tr>
  </thead>

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

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

      <td>
        Reglas de validación de campos.
      </td>
    </tr>

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

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

      <td>
        Sobrescrituras de texto para i18n.
      </td>
    </tr>

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

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

      <td>
        Variables CSS y sobrescrituras de clases.
      </td>
    </tr>
  </tbody>
</table>

**schema**

Configura reglas de validación personalizadas para los campos del proveedor. Las reglas se organizan por estrategia del proveedor (el protocolo de autenticación utilizado, como `oidc`, `samlp`, `waad`, `google-apps`, `adfs`, `pingfederate` u `okta`). Todos los campos admiten `regex`, `errorMessage`, `minLength`, `maxLength` y `required`.

<Accordion title="Campos de esquema disponibles">
  **Detalles del proveedor**

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

Personaliza todos los textos y las traducciones. Todos los campos son opcionales y usan los valores predeterminados si no se proporcionan.

<Accordion title="Mensajes disponibles">
  **header** - Encabezado del componente

  * `title`, `back_button_text`

  **provider\_select** - Paso 1

  * `title`, `description`

  **provider\_details** - Paso 2

  * `title`, `description`
  * `fields.name` - `label`, `placeholder`, `helper_text`, `error`
  * `fields.display_name` - `label`, `placeholder`, `helper_text`, `error`

  **provider\_configure** - Paso 3

  * `title`, `description`, `guided_setup_button_text`
  * `fields.okta` - Campos de Okta
  * `fields.adfs` - Campos de ADFS
  * `fields.google-apps` - Campos de Google Workspace
  * `fields.oidc` - Campos de OIDC
  * `fields.pingfederate` - Campos de PingFederate
  * `fields.samlp` - Campos de SAML
  * `fields.waad` - Campos de Azure AD

  **notifications** - Respuestas de la API

  * `general_error`, `provider_create_success`
</Accordion>

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

Personaliza la apariencia con variables CSS y sobrescrituras de clases. Admite estilos adaptados al tema.

<Accordion title="Opciones de estilo disponibles">
  **Variables** - propiedades personalizadas de CSS

  * `common` - Se aplica a todos los temas
  * `light` - Solo para el tema claro
  * `dark` - Solo para el tema oscuro

  **Clases** - sobrescrituras de clases del componente

  * `SsoProviderCreate-header`
  * `SsoProviderCreate-wizard`
  * `ProviderSelect-root`
  * `ProviderDetails-root`
  * `ProviderConfigure-root`
</Accordion>

```tsx 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",
    },
  }}
/>
```

***

<div id="advanced-customization">
  ## Personalización avanzada
</div>

El componente `SsoProviderCreate` se compone de subcomponentes y hooks más pequeños. Puede importarlos por separado para crear flujos personalizados de creación de proveedores de SSO si usa shadcn.

<div id="available-subcomponents">
  ### Subcomponentes disponibles
</div>

Para casos de uso avanzados, puedes importar subcomponentes individuales para crear flujos de trabajo personalizados para la creación de proveedores de SSO. Esto resulta útil cuando necesitas integrar un solo paso en una interfaz de usuario diferente o personalizar el flujo del asistente más allá de lo que permiten las props.

<table class="table">
  <thead>
    <tr>
      <th>Componente</th>
      <th>Descripción</th>
    </tr>
  </thead>

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

      <td>Paso de selección de estrategia con iconos de proveedores</td>
    </tr>

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

      <td>Paso de configuración del nombre y del nombre para mostrar</td>
    </tr>

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

      <td>Paso de configuración específico de la estrategia</td>
    </tr>

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

      <td>Campos de formulario dinámicos según la estrategia</td>
    </tr>

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

      <td>Formulario de configuración específico de Okta</td>
    </tr>

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

      <td>Formulario de configuración específico de ADFS</td>
    </tr>

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

      <td>Formulario de configuración específico de Google Workspace</td>
    </tr>

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

      <td>Formulario de configuración específico de OIDC</td>
    </tr>

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

      <td>Formulario de configuración específico de PingFederate</td>
    </tr>

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

      <td>Formulario de configuración específico de SAML</td>
    </tr>

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

      <td>Formulario de configuración específico de Azure AD</td>
    </tr>

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

      <td>Interfaz de asistente de varios pasos</td>
    </tr>
  </tbody>
</table>

<div id="available-hooks">
  ### Hooks disponibles
</div>

Estos hooks proporcionan la lógica subyacente sin interfaz de usuario. Úsalos para crear interfaces totalmente personalizadas aprovechando la integración con la API de Auth0.

<table class="table">
  <thead>
    <tr>
      <th>Hook</th>
      <th>Descripción</th>
    </tr>
  </thead>

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

      <td>Lógica de creación de proveedores e integración con la API</td>
    </tr>
  </tbody>
</table>