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.

El componente SsoProviderTable proporciona una interfaz unificada para listar y configurar proveedores de inicio de sesión único para su organización.

React

​

Requisitos de configuración

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 →

​

Instalación

pnpm

pnpm add @auth0/universal-components-react

Ejecutar cualquiera de los comandos también instala la dependencia @auth0/universal-components-core para utilidades compartidas y la integración con Auth0.

​

Primeros pasos

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}`),
      }}
    />
  );
}

Ejemplo de integración completo

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

​

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.

Prop	Tipo	Descripción
createAction	ComponentAction<void>	Obligatorio. Navega para crear el proveedor.
editAction	ComponentAction<IdentityProvider>	Obligatorio. Navega para editar el proveedor.

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:

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

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

Propiedad	Tipo	Descripción
readOnly	boolean	Desactiva todas las acciones de la tabla. Valor predeterminado: false
hideHeader	boolean	Oculta la sección de encabezado. Valor predeterminado: false

---

​

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.

Prop	Tipo	Descripción
deleteAction	ComponentAction<IdentityProvider>	Elimina permanentemente el proveedor.
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	Quita el proveedor de la organización.
enableProviderAction	ComponentAction<IdentityProvider>	Interruptor para habilitar o deshabilitar el proveedor.

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:

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

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

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

Propiedad	Tipo	Descripción
schema	SsoProviderTableSchema	Validación del campo de confirmación.
customMessages	Partial<SsoProviderTableMessages>	Sobrescrituras de texto para i18n.
styling	ComponentStyling<SsoProviderTableClasses>	Variables CSS y sobrescrituras de clases.

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

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

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

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

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

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

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

Componente	Descripción
ProviderRow	Fila individual del proveedor con acciones
ProviderDeleteModal	Modal de confirmación para la eliminación permanente
ProviderRemoveModal	Modal de confirmación para quitar de la organización
ProviderStatusToggle	Componente interruptor para habilitar o deshabilitar
ProviderStrategyIcon	Renderizador del icono de estrategia (Okta, SAML, etc.)

​

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.

Hook	Descripción
useSsoProviderTable	Carga y gestión de la lista de proveedores
useSsoProviderTableLogic	Estado de interacción de la interfaz de usuario + manejadores (modales, acciones)

Next.js

​

Requisitos de configuración

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 →

​

Instalación

npm (Recommended)

npm install @auth0/universal-components-react

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.

​

Primeros pasos

page.tsx

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}`),
      }}
    />
  );
}

Ejemplo de integración completo

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;

​

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.

Propiedad	Tipo	Descripción
createAction	ComponentAction<void>	Obligatorio. Navega para crear el proveedor.
editAction	ComponentAction<IdentityProvider>	Obligatorio. Navega para editar el proveedor.

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:

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

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

Propiedad	Tipo	Descripción
readOnly	boolean	Deshabilita todas las acciones de la tabla. Valor predeterminado: false
hideHeader	boolean	Oculta la sección de encabezado. Valor predeterminado: false

---

​

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.

Prop	Tipo	Descripción
deleteAction	ComponentAction<IdentityProvider>	Elimina permanentemente el proveedor.
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	Quita el proveedor de la organización.
enableProviderAction	ComponentAction<IdentityProvider>	Interruptor para habilitar o deshabilitar el proveedor.

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:

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

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

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

Propiedad	Tipo	Descripción
schema	SsoProviderTableSchema	Validación del campo de confirmación.
customMessages	Partial<SsoProviderTableMessages>	Sobrescrituras de texto para i18n.
styling	ComponentStyling<SsoProviderTableClasses>	Variables CSS y sobrescrituras de clases.

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

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

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

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

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

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

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

Componente	Descripción
ProviderRow	Fila individual del proveedor con acciones
ProviderDeleteModal	Modal de confirmación para la eliminación permanente
ProviderRemoveModal	Modal de confirmación para quitar de la organización
ProviderStatusToggle	Componente interruptor para habilitar o deshabilitar
ProviderStrategyIcon	Renderizador del icono de estrategia (Okta, SAML, etc.)

​

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.

Hook	Descripción
useSsoProviderTable	Obtención y gestión de la lista de proveedores
useSsoProviderTableLogic	Estado de interacción de la interfaz de usuario + manejadores (modales, acciones)

shadcn

​

Requisitos de configuración

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 →

​

Instalación

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-table.json

Ejecutar el comando shadcn también instala la dependencia @auth0/universal-components-core para utilidades compartidas y la integración con Auth0.

​

Primeros pasos

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}`),
      }}
    />
  );
}

Ejemplo completo de integración

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

​

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.

Propiedad	Tipo	Descripción
createAction	ComponentAction<void>	Obligatorio. Navega a la pantalla para crear un proveedor.
editAction	ComponentAction<IdentityProvider>	Obligatorio. Navega a la pantalla para editar un proveedor.

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:

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

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

Propiedad	Tipo	Descripción
readOnly	boolean	Deshabilita todas las acciones de la tabla. Valor predeterminado: false
hideHeader	boolean	Oculta la sección de encabezado. Valor predeterminado: false

---

​

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.

Prop	Tipo	Descripción
deleteAction	ComponentAction<IdentityProvider>	Elimina permanentemente el proveedor.
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	Quita el proveedor de la organización.
enableProviderAction	ComponentAction<IdentityProvider>	Interruptor para habilitar o deshabilitar el proveedor.

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:

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

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

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

Propiedad	Tipo	Descripción
schema	SsoProviderTableSchema	Validación del campo de confirmación.
customMessages	Partial<SsoProviderTableMessages>	Sobrescrituras de texto para i18n.
styling	ComponentStyling<SsoProviderTableClasses>	Variables CSS y sobrescrituras de clases.

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

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

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

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

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

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

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

Componente	Descripción
ProviderRow	Fila individual del proveedor con acciones
ProviderDeleteModal	Modal de confirmación para la eliminación permanente
ProviderRemoveModal	Modal de confirmación para quitar de la organización
ProviderStatusToggle	Componente interruptor para habilitar o deshabilitar
ProviderStrategyIcon	Renderizador del icono de estrategia (Okta, SAML, etc.)

​

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.

Hook	Descripción
useSsoProviderTable	Obtención y gestión de la lista de proveedores
useSsoProviderTableLogic	Estado de interacción de la interfaz de usuario + controladores (modales, acciones)