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

# Tabla de proveedores de SSO

> Muestra y administra los proveedores de identidad de SSO en una interfaz de tabla que permite crear, editar, eliminar, habilitar y deshabilitar.

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 `SsoProviderTable` proporciona una interfaz unificada para listar y configurar proveedores de [inicio de sesión único](/es/docs/authenticate/enterprise-connections/self-service-enterprise-configuration) para su organización.

<ComponentLoader componentSelector="sso-provider-table" componentPreviewText="Vista previa del componente de tabla de proveedores de SSO" />

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Se requiere la configuración de Auth0** - Asegúrese de que su inquilino esté configurado para usar la
      API My Organization. [Ver la 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">
      Ejecutar cualquiera de los comandos también instala la dependencia
      @auth0/universal-components-core para utilidades compartidas y la integración con Auth0.
    </Callout>

    ## Primeros pasos

    ```tsx theme={null}
    import { SsoProviderTable } from "@auth0/universal-components-react";
    import { useNavigate } from "react-router-dom";

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

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => navigate("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => navigate(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Ejemplo de integración completo">
      ```tsx theme={null}
      import React from "react";
      import { SsoProviderTable } 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 ProvidersManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  navigate("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  navigate(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </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 los desafíos de autenticación step-up mediante la ventana emergente de Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Props obligatorias

    Las props requeridas son fundamentales para el funcionamiento del componente. `SsoProviderTable` requiere ambas acciones de navegación para gestionar el flujo de trabajo típico de administración de proveedores.

    <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\<void></code>
          </td>

          <td>
            <strong>Obligatorio.</strong> Navega para crear el proveedor.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>Obligatorio.</strong> Navega para editar el proveedor.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<void>`

    La prop `createAction` es obligatoria porque controla a dónde se redirige a los usuarios cuando hacen clic en "Add Provider". Sin esta prop, la tabla no sabría cómo iniciar el flujo de creación del proveedor.

    **Propiedades:**

    * `disabled` - Desactiva el botón "Agregar proveedor"
    * `onBefore()` - Se ejecuta antes de que ocurra la navegación. Devuelve `false` para evitar la navegación (por ejemplo, si el usuario no tiene permisos).
    * `onAfter()` - Se ejecuta después de que `onBefore` se complete correctamente. Úsalo para ir a tu página de creación o registrar analíticas.

    **Ejemplo:**

    ```tsx theme={null}
    // Navegar a la página de creación
    createAction={{
      onAfter: () => navigate("/providers/create"),
    }}

    // Verificar permisos antes de permitir la creación
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => navigate("/providers/create"),
    }}

    // Registrar analíticas al intentar crear
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type:** `ComponentAction<IdentityProvider>`

    La prop `editAction` es obligatoria porque controla a dónde se redirige a los usuarios cuando hacen clic en una fila de proveedor. El callback recibe los datos del proveedor para que puedas navegar a la página de edición correcta.

    **Propiedades:**

    * `disabled` - Desactiva la navegación al hacer clic en la fila
    * `onBefore(provider)` - Se ejecuta antes de que se produzca la navegación. Devuelve `false` para evitar la navegación (por ejemplo, para realizar comprobaciones de acceso condicional).
    * `onAfter(provider)` - Se ejecuta después de que `onBefore` finaliza correctamente. Úsalo para ir a la página de edición con los datos del proveedor.

    **Ejemplo:**

    ```tsx theme={null}
    // Navegar a la página de edición con el ID del proveedor
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Registrar analíticas al seleccionar un proveedor
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### Propiedades de visualización

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

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

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

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

          <td>
            Desactiva todas las acciones de la tabla. Valor predeterminado: <code>false</code>
          </td>
        </tr>

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

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

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

    ***

    ### Props de Action

    Las props de Action gestionan las interacciones del usuario más allá de la navegación principal. Estas controlan las operaciones de eliminación, supresión y activación/desactivación.

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

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Elimina permanentemente el proveedor.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Quita el proveedor de la organización.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Interruptor para habilitar o deshabilitar el proveedor.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla la eliminación permanente de un proveedor de SSO. Esta acción es destructiva: el proveedor se elimina por completo del tenant de Auth0.

    **Propiedades:**

    * `disabled` - Deshabilita la opción de eliminación
    * `onBefore(provider)` - Se ejecuta antes de la eliminación. Devuelve `false` para evitarla (se recomienda para los cuadros de diálogo de confirmación).
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya eliminado correctamente. Úsalo para registrar el evento o mostrar una notificación.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla la eliminación de un proveedor de la organización sin eliminarlo del tenant. El proveedor sigue estando disponible para volver a agregarse más adelante.

    **Propiedades:**

    * `disabled` - Desactiva la opción de eliminar
    * `onBefore(provider)` - Se ejecuta antes de eliminarlo. Devuelve `false` para evitar la eliminación (por ejemplo, para mostrar una confirmación).
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya eliminado correctamente de la organización.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla el interruptor de activación/desactivación de los proveedores. Los proveedores desactivados permanecen configurados, pero los usuarios no pueden autenticarse a través de ellos.

    **Propiedades:**

    * `disabled` - Deshabilita el interruptor
    * `onBefore(provider)` - Se ejecuta antes de activar o desactivar. Devuelve `false` para evitar el cambio de estado.
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya habilitado o deshabilitado correctamente.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    ### Props de personalización

    Las 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>Propiedad</th>
          <th>Tipo</th>
          <th>Descripción</th>
        </tr>
      </thead>

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

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            Validación del campo de confirmación.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

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

    **schema**

    Define reglas de validación personalizadas para los diálogos de confirmación (por ejemplo, escribe el nombre del proveedor para confirmar la eliminación).

    <Accordion title="Campos del esquema disponibles">
      Todos los campos del esquema admiten: `regex`, `errorMessage`

      **delete.providerName** - Confirmación de eliminación permanente
      **remove.providerName** - Confirmación de eliminación de la organización
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

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

      * `title`, `description`, `create_button_text`

      **table** - Vista de tabla

      * `empty_message`
      * `columns.name`, `columns.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal** - Confirmación de eliminación

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal** - Confirmación para quitar de la organización

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications** - Respuestas de la API

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **styling**

    Personaliza la apariencia con variables CSS y sobrescrituras de clases. Compatible con estilos según el 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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## Personalización avanzada

    El componente `SsoProviderTable` está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo personalizados de gestión de proveedores si utilizas shadcn.

    ### Subcomponentes disponibles

    Para casos de uso avanzados, puedes importar subcomponentes individuales para crear interfaces de gestión de proveedores personalizadas. Esto resulta útil cuando necesitas incrustar la tabla en un diseño diferente o personalizar el renderizado de filas.

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

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Fila individual del proveedor con acciones</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>Modal de confirmación para la eliminación permanente</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Modal de confirmación para quitar de la organización</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Componente interruptor para habilitar o deshabilitar</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Renderizador del icono de estrategia (Okta, SAML, etc.)</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

    Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas mientras aprovechas 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>useSsoProviderTable</code>
          </td>

          <td>Carga y gestión de la lista de proveedores</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>Estado de interacción de la interfaz de usuario + manejadores (modales, acciones)</td>
        </tr>
      </tbody>
    </table>
  </Tab>

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Se requiere configuración de Auth0** - Asegúrese de que su inquilino esté configurado para usar 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 de npm o pnpm, se instala la dependencia @auth0/universal-components-core
      para las utilidades compartidas y la integración con Auth0.
    </Callout>

    ## Primeros pasos

    ```tsx page.tsx theme={null}
    import { SsoProviderTable } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

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

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => router.push("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => router.push(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Ejemplo de integración completo">
      ```tsx theme={null}
      import React from "react";
      import { SsoProviderTable } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";
      import { analytics } from "./lib/analytics";

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

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  router.push("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  router.push(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default ProvidersManagementPage;
      ```
    </Accordion>

    ## Props

    ### Props principales

    Las props principales son fundamentales para el funcionamiento del componente. `SsoProviderTable` requiere ambas acciones de navegación para gestionar el flujo de trabajo típico de administración de proveedores.

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

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

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>Obligatorio.</strong> Navega para crear el proveedor.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>Obligatorio.</strong> Navega para editar el proveedor.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<void>`

    La prop `createAction` es obligatoria porque controla a dónde se redirige a los usuarios cuando hacen clic en "Add Provider". Sin esta prop, la tabla no sabría cómo iniciar el flujo de creación del proveedor.

    **Propiedades:**

    * `disabled` - Desactiva el botón "Agregar proveedor"
    * `onBefore()` - Se ejecuta antes de que se produzca la navegación. Devuelve `false` para impedirla (por ejemplo, si el usuario no tiene permisos).
    * `onAfter()` - Se ejecuta después de que `onBefore` finaliza correctamente. Úsalo para ir a la página de creación o para hacer seguimiento analítico.

    **Ejemplo:**

    ```tsx theme={null}
    // Navegar a la página de creación
    createAction={{
      onAfter: () => router.push("/providers/create"),
    }}

    // Verificar permisos antes de permitir la creación
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => router.push("/providers/create"),
    }}

    // Registrar analíticas sobre la intención de creación
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        router.push("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type:** `ComponentAction<IdentityProvider>`

    La prop `editAction` es obligatoria porque controla a dónde se redirige a los usuarios cuando hacen clic en una fila de proveedor. El callback recibe los datos del proveedor para que puedas navegar a la página de edición correcta.

    **Propiedades:**

    * `disabled` - Desactiva la navegación al hacer clic en la fila
    * `onBefore(provider)` - Se ejecuta antes de que se produzca la navegación. Devuelve `false` para evitar la navegación (por ejemplo, para realizar comprobaciones de acceso condicional).
    * `onAfter(provider)` - Se ejecuta después de que `onBefore` finaliza correctamente. Úsalo para ir a la página de edición con los datos del proveedor.

    **Ejemplo:**

    ```tsx theme={null}
    // Navegar a la página de edición con el ID del proveedor
    editAction={{
      onAfter: (provider) => router.push(`/providers/${provider.id}`),
    }}

    // Registrar analíticas al seleccionar un proveedor
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        router.push(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### Propiedades de visualización

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

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

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

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

          <td>
            Deshabilita todas las acciones de la tabla. Valor predeterminado: <code>false</code>
          </td>
        </tr>

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

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

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

    ***

    ### Props de Action

    Las props de Action gestionan las interacciones del usuario más allá de la navegación principal. Estas controlan las operaciones de eliminación, supresión y activación/desactivación.

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

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Elimina permanentemente el proveedor.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Quita el proveedor de la organización.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Interruptor para habilitar o deshabilitar el proveedor.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla la eliminación permanente de un proveedor de SSO. Esta acción es destructiva: el proveedor se elimina por completo del tenant de Auth0.

    **Propiedades:**

    * `disabled` - Deshabilita la opción de borrar
    * `onBefore(provider)` - Se ejecuta antes de la eliminación. Devuelve `false` para impedirla (se recomienda para cuadros de diálogo de confirmación).
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya eliminado correctamente. Úselo para registrar el evento o mostrar una notificación.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla la eliminación de un proveedor de la organización sin eliminarlo del tenant. El proveedor sigue estando disponible para volver a agregarse más adelante.

    **Propiedades:**

    * `disabled` - Deshabilita la opción de eliminar
    * `onBefore(provider)` - Se ejecuta antes de que se elimine. Devuelve `false` para impedir la eliminación (por ejemplo, para mostrar una confirmación).
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya eliminado correctamente de la organización.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla el interruptor de activación/desactivación de los proveedores. Los proveedores desactivados permanecen configurados, pero los usuarios no pueden autenticarse a través de ellos.

    **Propiedades:**

    * `disabled` - Desactiva el interruptor
    * `onBefore(provider)` - Se ejecuta antes de cambiar el interruptor. Devuelve `false` para evitar el cambio de estado.
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya habilitado o deshabilitado correctamente.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`¿Habilitar "${provider.display_name}" para la autenticación?`);
          }
          return confirm(
            `¿Deshabilitar "${provider.display_name}"? Los usuarios no podrán autenticarse.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Proveedor habilitado" : "Proveedor deshabilitado",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    ### Props de personalización

    Las 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>Propiedad</th>
          <th>Tipo</th>
          <th>Descripción</th>
        </tr>
      </thead>

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

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            Validación del campo de confirmación.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

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

    **schema**

    Define reglas de validación personalizadas para los diálogos de confirmación (por ejemplo, escribe el nombre del proveedor para confirmar la eliminación).

    <Accordion title="Campos del esquema disponibles">
      Todos los campos del esquema admiten: `regex`, `errorMessage`

      **delete.providerName** - Confirmación de eliminación permanente
      **remove.providerName** - Confirmación para quitarlo de la organización
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

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

      * `title`, `description`, `create_button_text`

      **table** - Vista de tabla

      * `empty_message`
      * `columns.name`, `columns.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal** - Confirmación de eliminación

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal** - Confirmación para quitar de la organización

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications** - Respuestas de la API

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **styling**

    Personaliza la apariencia con variables CSS y sobrescrituras de clases. Compatible con estilos según el 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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## Personalización avanzada

    El componente `SsoProviderTable` está compuesto por subcomponentes más pequeños y hooks. Puedes importarlos individualmente para crear flujos de trabajo personalizados de gestión de proveedores.

    ### Subcomponentes disponibles

    Para casos de uso avanzados, puedes importar subcomponentes individuales para crear interfaces de gestión de proveedores personalizadas. Esto resulta útil cuando necesitas incrustar la tabla en un diseño diferente o personalizar el renderizado de filas.

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

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Fila individual del proveedor con acciones</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>Modal de confirmación para la eliminación permanente</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Modal de confirmación para quitar de la organización</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Componente interruptor para habilitar o deshabilitar</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Renderizador del icono de estrategia (Okta, SAML, etc.)</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

    Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas mientras aprovechas 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>useSsoProviderTable</code>
          </td>

          <td>Obtención y gestión de la lista de proveedores</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>Estado de interacción de la interfaz de usuario + manejadores (modales, acciones)</td>
        </tr>
      </tbody>
    </table>
  </Tab>

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Se requiere configuración de Auth0** - Asegúrese de que su inquilino esté configurado para usar 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-table.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Ejecutar el comando shadcn también instala la dependencia @auth0/universal-components-core
      para utilidades compartidas y la integración con Auth0.
    </Callout>

    ## Primeros pasos

    ```tsx theme={null}
    import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";

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

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => navigate("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => navigate(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Ejemplo completo de integración">
      ```tsx theme={null}
      import React from "react";
      import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";
      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 ProvidersManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  navigate("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  navigate(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </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 los desafíos de autenticación step-up mediante el popup de Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Props principales

    Las props principales son fundamentales para el funcionamiento del componente. `SsoProviderTable` requiere ambas acciones de navegación para gestionar el flujo de trabajo típico de administración de proveedores.

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

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

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>Obligatorio.</strong> Navega a la pantalla para crear un proveedor.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>Obligatorio.</strong> Navega a la pantalla para editar un proveedor.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type:** `ComponentAction<void>`

    La prop `createAction` es obligatoria porque controla a dónde se redirige a los usuarios cuando hacen clic en "Add Provider". Sin esta prop, la tabla no sabría cómo iniciar el flujo de creación del proveedor.

    **Propiedades:**

    * `disabled` - Desactiva el botón "Agregar proveedor"
    * `onBefore()` - Se ejecuta antes de que ocurra la navegación. Devuelve `false` para evitar la navegación (por ejemplo, si el usuario no tiene permisos).
    * `onAfter()` - Se ejecuta después de que `onBefore` se complete correctamente. Úsalo para ir a tu página de creación o registrar analíticas.

    **Ejemplo:**

    ```tsx theme={null}
    // Navegar a la página de creación
    createAction={{
      onAfter: () => navigate("/providers/create"),
    }}

    // Verificar permisos antes de permitir la creación
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => navigate("/providers/create"),
    }}

    // Registrar analíticas al intentar crear
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type:** `ComponentAction<IdentityProvider>`

    La prop `editAction` es obligatoria porque controla a dónde se redirige a los usuarios cuando hacen clic en una fila de proveedor. El callback recibe los datos del proveedor para que puedas navegar a la página de edición correcta.

    **Propiedades:**

    * `disabled` - Desactiva la navegación al hacer clic en la fila
    * `onBefore(provider)` - Se ejecuta antes de que se produzca la navegación. Devuelve `false` para evitar la navegación (por ejemplo, para realizar comprobaciones de acceso condicional).
    * `onAfter(provider)` - Se ejecuta después de que `onBefore` finaliza correctamente. Úsalo para ir a la página de edición con los datos del proveedor.

    **Ejemplo:**

    ```tsx theme={null}
    // Navegar a la página de edición con el ID del proveedor
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Registrar analíticas al seleccionar un proveedor
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### Propiedades de visualización

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

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

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

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

          <td>
            Deshabilita todas las acciones de la tabla. Valor predeterminado: <code>false</code>
          </td>
        </tr>

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

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

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

    ***

    ### Props de Action

    Las props de Action gestionan las interacciones del usuario más allá de la navegación principal. Estas controlan las operaciones de eliminación, supresión y activación/desactivación.

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

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Elimina permanentemente el proveedor.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Quita el proveedor de la organización.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Interruptor para habilitar o deshabilitar el proveedor.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla la eliminación permanente de un proveedor de SSO. Esta acción es destructiva: el proveedor se elimina por completo del tenant de Auth0.

    **Propiedades:**

    * `disabled` - Deshabilita la opción de eliminación
    * `onBefore(provider)` - Se ejecuta antes de la eliminación. Devuelve `false` para evitarla (se recomienda para los cuadros de diálogo de confirmación).
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya eliminado correctamente. Úsalo para registrar el evento o mostrar una notificación.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla la eliminación de un proveedor de la organización sin eliminarlo del tenant. El proveedor sigue estando disponible para volver a agregarse más adelante.

    **Propiedades:**

    * `disabled` - Deshabilita la opción de eliminar
    * `onBefore(provider)` - Se ejecuta antes de que se elimine. Devuelve `false` para impedir la eliminación (por ejemplo, para mostrar una confirmación).
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya eliminado correctamente de la organización.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type:** `ComponentAction<IdentityProvider>`

    Controla el interruptor de activación/desactivación de los proveedores. Los proveedores desactivados permanecen configurados, pero los usuarios no pueden autenticarse a través de ellos.

    **Propiedades:**

    * `disabled` - Deshabilita el interruptor
    * `onBefore(provider)` - Se ejecuta antes de activar o desactivar. Devuelve `false` para evitar el cambio de estado.
    * `onAfter(provider)` - Se ejecuta después de que el proveedor se haya habilitado o deshabilitado correctamente.

    **Ejemplo:**

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    ### Props de personalización

    Las 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>Propiedad</th>
          <th>Tipo</th>
          <th>Descripción</th>
        </tr>
      </thead>

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

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            Validación del campo de confirmación.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

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

    **schema**

    Define reglas de validación personalizadas para los diálogos de confirmación (por ejemplo, escribe el nombre del proveedor para confirmar la eliminación).

    <Accordion title="Campos del esquema disponibles">
      Todos los campos del esquema admiten: `regex`, `errorMessage`

      **delete.providerName** - Confirmación de eliminación permanente
      **remove.providerName** - Confirmación de eliminación de la organización
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

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

      * `title`, `description`, `create_button_text`

      **table** - Vista de tabla

      * `empty_message`
      * `columns.name`, `columns.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal** - Confirmación de eliminación

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal** - Confirmación para quitar de la organización

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications** - Respuestas de la API

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **styling**

    Personaliza la apariencia con variables CSS y sobrescrituras de clases. Compatible con estilos según el 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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </Accordion>

    ```tsx theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## Personalización avanzada

    El componente `SsoProviderTable` está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo personalizados de gestión de proveedores si utilizas shadcn.

    ### Subcomponentes disponibles

    Para casos de uso avanzados, puedes importar subcomponentes individuales para crear interfaces de gestión de proveedores personalizadas. Esto resulta útil cuando necesitas incrustar la tabla en un diseño diferente o personalizar el renderizado de filas.

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

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Fila individual del proveedor con acciones</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>Modal de confirmación para la eliminación permanente</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Modal de confirmación para quitar de la organización</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Componente interruptor para habilitar o deshabilitar</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Renderizador del icono de estrategia (Okta, SAML, etc.)</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

    Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas mientras aprovechas 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>useSsoProviderTable</code>
          </td>

          <td>Obtención y gestión de la lista de proveedores</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>Estado de interacción de la interfaz de usuario + controladores (modales, acciones)</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>