Configurar el dominio verificado de la organización

Aprende a gestionar los dominios verificados y pendientes de la organización en una única interfaz de tabla.

El componente DomainTable ofrece una interfaz unificada para que tus clientes gestionen el dominio de correo electrónico de su organización en Auth0. Al verificar la propiedad del dominio, los administradores de la organización habilitan funciones B2B clave, como Home Realm Discovery (HRD), y garantizan que los usuarios se redirijan automáticamente al proveedor de SSO correcto según el sufijo de su dirección de correo electrónico (por ejemplo, [e-mail]).

React

​

Requisitos de configuración

Se requiere la configuración de Auth0 - Asegúrate de que tu tenant tenga configurada la API My Organization. Ver la guía de configuración →

​

Instalar el componente

pnpm

pnpm add @auth0/universal-components-react

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

​

Comenzar

React SPA

import { DomainTable } from "@auth0/universal-components-react/spa";

export function DomainsPage() {
  return <DomainTable />;
}

Ejemplo completo de integración

import React from "react";
import { DomainTable } from "@auth0/universal-components-react/spa";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";

function DomainsManagementPage() {
  const navigate = useNavigate();

  return (
    <div className="max-w-6xl mx-auto p-6">
      <DomainTable
        schema={{
          create: {
            domain: {
              regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
              errorMessage: "Please enter a valid domain (e.g., example.com)",
            },
          },
        }}
        createAction={{
          onBefore: (domain) => {
            if (!domain.domain.includes(".")) {
              alert("Please enter a valid domain with a TLD");
              return false;
            }
            return true;
          },
          onAfter: (domain) => console.log("Domain created:", domain),
        }}
        verifyAction={{
          onAfter: (domain) => {
            console.log("Domain verified:", domain.domain);
          },
        }}
        deleteAction={{
          onBefore: (domain) => {
            return confirm(`Delete ${domain.domain}?`);
          },
        }}
        onOpenProvider={(provider) => {
          navigate(`/providers/${provider.id}`);
        }}
        onCreateProvider={() => {
          navigate("/providers/create");
        }}
        customMessages={{
          header: {
            title: "Domain Management",
            description: "Add and verify domains for your organization",
            create_button_text: "Add New Domain",
          },
        }}
        styling={{
          variables: {
            common: { "--font-size-label": "12px" },
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "DomainTable-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 escalonada mediante el popup de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

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

Prop	Tipo	Descripción
readOnly	boolean	Desactiva todas las operaciones del dominio. Valor predeterminado: false
hideHeader	boolean	Oculta la sección del encabezado. Valor predeterminado: false

---

​

Props de acción

Las props de acción gestionan las interacciones del usuario y definen qué ocurre cuando los usuarios realizan operaciones de dominio. Usa los hooks de ciclo de vida (onBefore, onAfter) para integrarlos con el enrutamiento y los análisis de tu aplicación.

Propiedad	Tipo	Descripción
createAction	ComponentAction<Domain>	Acción para crear el dominio.
verifyAction	ComponentAction<Domain>	Acción para verificar el dominio.
deleteAction	ComponentAction<Domain>	Acción para eliminar el dominio.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Acción para asociar el dominio al proveedor.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Acción para quitar el dominio del proveedor.
onOpenProvider	(provider: IdentityProvider) => void	Ir al proveedor desde la ventana modal de configuración.
onCreateProvider	() => void	Navega al flujo para crear un proveedor.

createAction

Type: ComponentAction<Domain>

Controla el flujo de creación de dominios. Usa onAfter para hacer seguimiento de cuándo se añaden nuevos dominios.

Propiedades:

• disabled - Desactiva el botón “Add Domain”
• onBefore(domain) - Se ejecuta antes de crear el dominio. Devuelve false para impedir su creación (p. ej., si el formato del dominio no es válido).
• onAfter(domain) - Se ejecuta después de que el dominio se haya creado correctamente. Úsalo para mostrar una notificación o registrar el evento.

Ejemplo:

<DomainTable
  createAction={{
    onBefore: (domain) => {
      // Validar el formato del dominio
      if (!domain.domain.includes(".")) {
        alert("Please enter a valid domain");
        return false;
      }
      return true;
    },
    onAfter: (domain) => {
      analytics.track("Domain Created", { domain: domain.domain });
    },
  }}
/>

---

verifyAction

Type: ComponentAction<Domain>

Controla el flujo de verificación de dominio. La verificación de dominio acredita la propiedad mediante un registro TXT de DNS.

Propiedades:

• disabled - Deshabilita el botón de verificación
• onBefore(domain) - Se ejecuta antes del intento de verificación. Devuelve false para evitar la verificación (p. ej., para confirmar que el DNS está configurado).
• onAfter(domain) - Se ejecuta después de verificar correctamente el dominio. Úsalo para mostrar una notificación de éxito.

Ejemplo:

<DomainTable
  verifyAction={{
    onBefore: (domain) => {
      return confirm(
        `Verify ${domain.domain}? Make sure your DNS record is configured.`,
      );
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} verified successfully!`);
    },
  }}
/>

---

deleteAction

Type: ComponentAction<Domain>

Controla la eliminación de dominios. Se recomienda usar onBefore para pedir confirmación, ya que esta acción es destructiva.

Propiedades:

• disabled - Desactiva el botón de eliminar
• onBefore(domain) - Se ejecuta antes de la eliminación. Devuelve false para impedirla (se recomienda para los cuadros de diálogo de confirmación).
• onAfter(domain) - Se ejecuta después de que el dominio se haya eliminado correctamente. Úsalo para registrar el evento o mostrar una notificación.

Ejemplo:

<DomainTable
  deleteAction={{
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}? This cannot be undone.`);
    },
    onAfter: (domain) => {
      analytics.track("Domain Deleted", { domain: domain.domain });
    },
  }}
/>

---

associateToProviderAction

Type: ComponentAction<Domain, IdentityProvider>

Controla la asociación de un dominio verificado con un proveedor de SSO. Solo los dominios verificados pueden asociarse.

Propiedades:

• disabled - Desactiva la acción de asociación
• onBefore(domain, provider) - Se ejecuta antes de la asociación. Devuelve false para evitarla.
• onAfter(domain, provider) - Se ejecuta después de que el dominio se haya asociado correctamente con el proveedor.

Ejemplo:

<DomainTable
  associateToProviderAction={{
    onAfter: (domain, provider) => {
      console.log(`Associated ${domain.domain} with ${provider.name}`);
    },
  }}
/>

---

deleteFromProviderAction

Type: ComponentAction<Domain, IdentityProvider>

Controla la desvinculación de un dominio de un proveedor de SSO.

Propiedades:

• disabled - Desactiva la acción de desvinculación
• onBefore(domain, provider) - Se ejecuta antes de eliminarlo. Devuelve false para impedir la eliminación.
• onAfter(domain, provider) - Se ejecuta después de que el dominio se haya eliminado correctamente del proveedor.

---

onOpenProvider / onCreateProvider

Type: (provider: IdentityProvider) => void / () => void

Manejadores de navegación para el modal de configuración de dominio. Cuando los usuarios configuran las asociaciones de proveedor de un dominio:

• onOpenProvider - Se llama cuando el usuario hace clic en un proveedor existente para verlo o editarlo
• onCreateProvider - Se llama cuando el usuario hace clic para crear un proveedor nuevo

Ejemplo:

<DomainTable
  onOpenProvider={(provider) => {
    navigate(`/providers/${provider.id}`);
  }}
  onCreateProvider={() => {
    navigate("/providers/create");
  }}
/>

---

​

Props de personalización

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

Propiedad	Tipo	Descripción
schema	DomainTableSchema	Reglas de validación de URLs de dominio.
customMessages	Partial<DomainTableMainMessages>	Personalizaciones de textos de i18n.
styling	ComponentStyling	Variables CSS y personalizaciones de clases.

schema

Define reglas de validación personalizadas para la entrada de URL de dominio.

Campos del esquema disponibles

create.domainUrl - Validación de la URL del dominio - regex - Patrón regex personalizado

• errorMessage - Mensaje de error personalizado

<DomainTable
  schema={{
    create: {
      domain: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

---

customMessages

Personaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se completan, se usarán los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

• title, description, create_button_text

table - Vista de tabla

• empty_message
• columns.domain, columns.status
• actions.configure_button_text, actions.verify_button_text, actions.delete_button_text

create.modal - Modal para crear un dominio

• title
• field.label, field.placeholder, field.error
• actions.cancel_button_text, actions.create_button_text

verify.modal - Modal para verificar un dominio

• title
• txt_record_name.label, txt_record_content.label, verification_status.label
• actions.verify_button_text, actions.done_button_text

delete.modal - Confirmación de eliminación

• title
• description.pending, description.verified
• actions.cancel_button_text, actions.create_button_text

configure.modal - Configuración del proveedor

• title, description
• table.empty_message, table.columns.name
• actions.close_button_text

notifications - Respuestas de la API

• domain_create_success, domain_create_error
• domain_verify_success, domain_delete_success

<DomainTable
  customMessages={{
    header: {
      title: "Manage Domains",
      description: "Configure and verify organization domains",
      create_button_text: "Add Domain",
    },
    table: {
      empty_message: "No domains yet. Add one to begin.",
    },
    notifications: {
      domain_create_success: "Domain added successfully!",
      domain_verify_success: "Domain verified!",
      domain_delete_success: "Domain removed.",
    },
  }}
/>

---

styling

Personaliza la apariencia con variables CSS y sobreescritura 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

Classes - Sobrescritura de clases del componente

• DomainTable-header
• DomainTable-table
• DomainTable-createModal
• DomainTable-configureModal
• DomainTable-deleteModal

<DomainTable
  styling={{
    variables: {
      common: { "--font-size-title": "1rem" },
      light: { "--color-primary": "#4f46e5" },
    },
    classes: {
      "DomainTable-header": "mb-6",
      "DomainTable-table": "rounded-lg shadow-sm",
    },
  }}
/>

---

​

Personalización avanzada

El componente DomainTable está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo de dominio personalizados si utilizas shadcn.

​

Subcomponentes disponibles

Para casos de uso avanzados, puedes importar subcomponentes individuales para crear interfaces de gestión de dominios personalizadas. Esto es útil cuando necesitas insertar modales específicos en distintos contextos o personalizar el diseño de la tabla más allá de lo que permiten las props.

Componente	Descripción
DomainCreateModal	Modal para crear un dominio
DomainVerifyModal	Modal para el proceso de verificación
DomainDeleteModal	Modal de confirmación para eliminar
DomainConfigureProvidersModal	Gestionar asociaciones con proveedores
DomainTableActionsColumn	Botones de acción para cada fila de dominio

​

Hooks disponibles

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

Hook	Descripción
useDomainTable	Capa de datos + API (obtener, crear, verificar, eliminar, asociar)
useDomainTableLogic	Estado de interacción de la interfaz de usuario + manejadores (modales, notificaciones)

Next.js

​

Requisitos de configuración

Se requiere configurar Auth0 - Asegúrate de que tu tenant esté configurado con la API My Organization. Ver guía de configuración →

​

Instalar componente

npm

npm install @auth0/universal-components-react

Ejecutar los comandos pnpm o npm instala la dependencia @auth0/universal-components-core para las utilidades compartidas y la integración con Auth0.

​

Comenzar

page.tsx

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

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

  return (
    <DomainTable
      onOpenProvider={(provider) => {
        router.push(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        router.push("/providers/create");
      }}
    />
  );
}

Ejemplo completo de integración

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

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

  return (
    <div className="max-w-6xl mx-auto p-6">
      <DomainTable
        schema={{
          create: {
            domain: {
              regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
              errorMessage: "Please enter a valid domain (e.g., example.com)",
            },
          },
        }}
        createAction={{
          onBefore: (domain) => {
            if (!domain.domain.includes(".")) {
              alert("Please enter a valid domain with a TLD");
              return false;
            }
            return true;
          },
          onAfter: (domain) => console.log("Domain created:", domain),
        }}
        verifyAction={{
          onAfter: (domain) => {
            console.log("Domain verified:", domain.domain);
          },
        }}
        deleteAction={{
          onBefore: (domain) => {
            return confirm(`Delete ${domain.domain}?`);
          },
        }}
        onOpenProvider={(provider) => {
          router.push(`/providers/${provider.id}`);
        }}
        onCreateProvider={() => {
          router.push("/providers/create");
        }}
        customMessages={{
          header: {
            title: "Domain Management",
            description: "Add and verify domains for your organization",
            create_button_text: "Add New Domain",
          },
        }}
        styling={{
          variables: {
            common: { "--font-size-label": "12px" },
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "DomainTable-header": "shadow-lg rounded-xl",
          },
        }}
      />
    </div>
  );
}

export default DomainsManagementPage;

​

Props

​

Props 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 operaciones del dominio. Valor predeterminado: false
hideHeader	boolean	Oculta la sección del encabezado. Valor predeterminado: false

---

​

Props de acción

Las props de acción gestionan las interacciones del usuario y definen qué ocurre cuando los usuarios realizan operaciones de dominio. Usa los hooks de ciclo de vida (onBefore, onAfter) para integrarlos con el enrutamiento y los análisis de tu aplicación.

Prop	Tipo	Descripción
createAction	ComponentAction<Domain>	Acción para crear dominios.
verifyAction	ComponentAction<Domain>	Acción para verificar dominios.
deleteAction	ComponentAction<Domain>	Acción para eliminar dominios.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Acción para asociar un dominio a un proveedor.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Acción para quitar un dominio de un proveedor.
onOpenProvider	(provider: IdentityProvider) => void	Navega al proveedor desde el modal de configuración.
onCreateProvider	() => void	Navega al flujo de creación de proveedores.

createAction

Type: ComponentAction<Domain>

Controla el flujo de creación de dominios. Usa onAfter para hacer seguimiento de cuándo se añaden nuevos dominios.

Propiedades:

• disabled - Desactivar el botón “Agregar dominio”
• onBefore(domain) - Se ejecuta antes de crear el dominio. Devuelve false para evitar su creación (p. ej., si el formato del dominio no es válido).
• onAfter(domain) - Se ejecuta después de que el dominio se haya creado correctamente. Úsalo para mostrar una notificación o hacer un seguimiento del evento.

Ejemplo:

<DomainTable
  createAction={{
    onBefore: (domain) => {
      // Validar el formato del dominio
      if (!domain.domain.includes(".")) {
        alert("Please enter a valid domain");
        return false;
      }
      return true;
    },
    onAfter: (domain) => {
      analytics.track("Domain Created", { domain: domain.domain });
    },
  }}
/>

---

verifyAction

Type: ComponentAction<Domain>

Controla el flujo de verificación de dominio. La verificación de dominio acredita la propiedad mediante un registro TXT de DNS.

Propiedades:

• disabled - Desactiva el botón Verificar
• onBefore(domain) - Se ejecuta antes del intento de verificación. Devuelve false para evitar la verificación (p. ej., para confirmar que el DNS esté configurado).
• onAfter(domain) - Se ejecuta después de verificar correctamente el dominio. Úsalo para mostrar una notificación de éxito.

Ejemplo:

<DomainTable
  verifyAction={{
    onBefore: (domain) => {
      return confirm(
        `Verify ${domain.domain}? Make sure your DNS record is configured.`,
      );
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} verified successfully!`);
    },
  }}
/>

---

deleteAction

Type: ComponentAction<Domain>

Controla la eliminación de dominios. Se recomienda usar onBefore para solicitar confirmación, ya que esta acción es destructiva.

Propiedades:

• disabled - Deshabilita el botón de eliminar
• onBefore(domain) - Se ejecuta antes de la eliminación. Devuelve false para impedirla (recomendado para los cuadros de diálogo de confirmación).
• onAfter(domain) - Se ejecuta después de que el dominio se haya eliminado correctamente. Úsalo para registrar el evento o mostrar una notificación.

Ejemplo:

<DomainTable
  deleteAction={{
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}? This cannot be undone.`);
    },
    onAfter: (domain) => {
      analytics.track("Domain Deleted", { domain: domain.domain });
    },
  }}
/>

---

associateToProviderAction

Type: ComponentAction<Domain, IdentityProvider>

Controla la asociación de un dominio verificado con un proveedor de SSO. Solo los dominios verificados pueden asociarse.

Propiedades:

• disabled - Deshabilita la acción de asociación
• onBefore(domain, provider) - Se ejecuta antes de la asociación. Devuelve false para evitarla.
• onAfter(domain, provider) - Se ejecuta después de asociar correctamente el dominio con el proveedor.

Ejemplo:

<DomainTable
  associateToProviderAction={{
    onAfter: (domain, provider) => {
      console.log(`Associated ${domain.domain} with ${provider.name}`);
    },
  }}
/>

---

deleteFromProviderAction

Type: ComponentAction<Domain, IdentityProvider>

Controla la desvinculación de un dominio de un proveedor de SSO.

Propiedades:

• disabled - Desactiva la acción de desasociación
• onBefore(domain, provider) - Se ejecuta antes de la eliminación. Devuelve false para impedir la eliminación.
• onAfter(domain, provider) - Se ejecuta después de que el dominio se haya eliminado correctamente del proveedor.

---

onOpenProvider / onCreateProvider

Type: (provider: IdentityProvider) => void / () => void

Manejadores de navegación para el modal de configuración de dominio. Cuando los usuarios configuran las asociaciones de proveedores de un dominio:

• onOpenProvider - Se llama cuando el usuario hace clic en un proveedor existente para verlo o editarlo
• onCreateProvider - Se ejecuta cuando el usuario hace clic para crear un nuevo proveedor

Ejemplo:

<DomainTable
  onOpenProvider={(provider) => {
    router.push(`/providers/${provider.id}`);
  }}
  onCreateProvider={() => {
    router.push("/providers/create");
  }}
/>

---

​

Props de personalización

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

Propiedad	Tipo	Descripción
schema	DomainTableSchema	Reglas de validación para URLs de dominio.
customMessages	Partial<DomainTableMainMessages>	Personalización de textos de i18n.
styling	ComponentStyling	Variables CSS y personalización de clases.

schema

Establece reglas de validación personalizadas para la entrada de URL de dominio.

Campos de esquema disponibles

create.domain - Validación de la URL del dominio - regex - Expresión regular personalizada - errorMessage - Mensaje de error personalizado

<DomainTable
  schema={{
    create: {
      domain: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

---

customMessages

Personaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se completan, se usarán los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

• title, description, create_button_text

table - Vista de tabla

• empty_message
• columns.domain, columns.status
• actions.configure_button_text, actions.verify_button_text, actions.delete_button_text

create.modal - Modal de creación de dominio

• title
• field.label, field.placeholder, field.error
• actions.cancel_button_text, actions.create_button_text

verify.modal - Modal de verificación de dominio

• title
• txt_record_name.label, txt_record_content.label, verification_status.label
• actions.verify_button_text, actions.done_button_text

delete.modal - Confirmación de eliminación

• title
• description.pending, description.verified
• actions.cancel_button_text, actions.create_button_text

configure.modal - Configuración del proveedor

• title, description
• table.empty_message, table.columns.name
• actions.close_button_text

notifications - Respuestas de la API

• domain_create_success, domain_create_error
• domain_verify_success, domain_delete_success

<DomainTable
  customMessages={{
    header: {
      title: "Manage Domains",
      description: "Configure and verify organization domains",
      create_button_text: "Add Domain",
    },
    table: {
      empty_message: "No domains yet. Add one to begin.",
    },
    notifications: {
      domain_create_success: "Domain added successfully!",
      domain_verify_success: "Domain verified!",
      domain_delete_success: "Domain removed.",
    },
  }}
/>

---

styling

Personaliza la apariencia con variables CSS y sobreescritura 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

Classes - Sobrescrituras de clases del componente

• DomainTable-header
• DomainTable-table
• DomainTable-createModal
• DomainTable-configureModal
• DomainTable-deleteModal

<DomainTable
  styling={{
    variables: {
      common: { "--font-size-title": "1rem" },
      light: { "--color-primary": "#4f46e5" },
    },
    classes: {
      "DomainTable-header": "mb-6",
      "DomainTable-table": "rounded-lg shadow-sm",
    },
  }}
/>

---

​

Personalización avanzada

El componente DomainTable está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos de forma individual para crear flujos de trabajo de dominio personalizados.

​

Subcomponentes disponibles

Para casos de uso avanzados, puedes importar subcomponentes individuales para crear interfaces de gestión de dominios personalizadas. Esto es útil cuando necesitas insertar modales específicos en distintos contextos o personalizar el diseño de la tabla más allá de lo que permiten las props.

Componente	Descripción
DomainCreateModal	Modal para crear un dominio
DomainVerifyModal	Modal para el proceso de verificación
DomainDeleteModal	Modal de confirmación para eliminar
DomainConfigureProvidersModal	Gestiona las asociaciones de proveedores
DomainTableActionsColumn	Botones de acción para cada fila de dominio

​

Hooks disponibles

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

Hook	Descripción
useDomainTable	Capa de datos y API (fetch, create, verify, delete, associate)
useDomainTableLogic	Estado de interacción de la UI + manejadores (modales, notificaciones)

shadcn

​

Requisitos de configuración

Se requiere la configuración de Auth0 - Asegúrate de que tu tenant esté configurado con la API de My Organization. Ver la guía de configuración →

​

Instalar el componente

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

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

​

Primeros pasos

import { DomainTable } from "@/components/auth0/my-organization/domain-table";

export function DomainsPage() {
  return <DomainTable />;
}

Ejemplo de integración completa

import React from "react";
import { DomainTable } from "@/components/auth0/my-organization/domain-table";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";

function DomainsManagementPage() {
  const navigate = useNavigate();

  return (
    <div className="max-w-6xl mx-auto p-6">
      <DomainTable
        schema={{
          create: {
            domain: {
              regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
              errorMessage: "Please enter a valid domain (e.g., example.com)",
            },
          },
        }}
        createAction={{
          onBefore: (domain) => {
            if (!domain.domain.includes(".")) {
              alert("Please enter a valid domain with a TLD");
              return false;
            }
            return true;
          },
          onAfter: (domain) => console.log("Domain created:", domain),
        }}
        verifyAction={{
          onAfter: (domain) => {
            console.log("Domain verified:", domain.domain);
          },
        }}
        deleteAction={{
          onBefore: (domain) => {
            return confirm(`Delete ${domain.domain}?`);
          },
        }}
        onOpenProvider={(provider) => {
          navigate(`/providers/${provider.id}`);
        }}
        onCreateProvider={() => {
          navigate("/providers/create");
        }}
        customMessages={{
          header: {
            title: "Domain Management",
            description: "Add and verify domains for your organization",
            create_button_text: "Add New Domain",
          },
        }}
        styling={{
          variables: {
            common: { "--font-size-label": "12px" },
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "DomainTable-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 escalonada mediante el popup de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props 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 operaciones del dominio. Valor predeterminado: false
hideHeader	boolean	Oculta la sección del encabezado. Valor predeterminado: false

---

​

Props de acción

Las props de acción gestionan las interacciones del usuario y definen qué ocurre cuando los usuarios realizan operaciones de dominio. Usa los hooks de ciclo de vida (onBefore, onAfter) para integrarlos con el enrutamiento y los análisis de tu aplicación.

Propiedad	Tipo	Descripción
createAction	ComponentAction<Domain>	Acción para crear un dominio.
verifyAction	ComponentAction<Domain>	Acción para verificar un dominio.
deleteAction	ComponentAction<Domain>	Acción para eliminar un dominio.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Acción para asociar un dominio a un proveedor.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Acción para quitar un dominio de un proveedor.
onOpenProvider	(provider: IdentityProvider) => void	Navega al proveedor desde el modal de configuración.
onCreateProvider	() => void	Navega al flujo de creación de proveedores.

createAction

Type: ComponentAction<Domain>

Controla el flujo de creación de dominios. Usa onAfter para hacer seguimiento de cuándo se añaden nuevos dominios.

Propiedades:

• disabled - Desactiva el botón “Añadir dominio”
• onBefore(domain) - Se ejecuta antes de crear el dominio. Devuelve false para evitar su creación (p. ej., si el formato del dominio no es válido).
• onAfter(domain) - Se ejecuta después de que el dominio se haya creado correctamente. Úsalo para mostrar una notificación o hacer un seguimiento del evento.

Ejemplo:

<DomainTable
  createAction={{
    onBefore: (domain) => {
      // Validar el formato del dominio
      if (!domain.domain.includes(".")) {
        alert("Please enter a valid domain");
        return false;
      }
      return true;
    },
    onAfter: (domain) => {
      analytics.track("Domain Created", { domain: domain.domain });
    },
  }}
/>

---

verifyAction

Type: ComponentAction<Domain>

Controla el flujo de verificación de dominio. La verificación de dominio acredita la propiedad mediante un registro TXT de DNS.

Propiedades:

• disabled - Desactiva el botón de verificación
• onBefore(domain) - Se ejecuta antes del intento de verificación. Devuelve false para impedir la verificación (p. ej., para confirmar que el DNS está configurado).
• onAfter(domain) - Se ejecuta después de verificar correctamente el dominio. Úsalo para mostrar una notificación de éxito.

Ejemplo:

<DomainTable
  verifyAction={{
    onBefore: (domain) => {
      return confirm(
        `Verify ${domain.domain}? Make sure your DNS record is configured.`,
      );
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} verified successfully!`);
    },
  }}
/>

---

deleteAction

Type: ComponentAction<Domain>

Controla la eliminación de dominios. Se recomienda usar onBefore para solicitar confirmación, ya que esta acción es destructiva.

Propiedades:

• disabled - Deshabilita el botón de eliminar
• onBefore(domain) - Se ejecuta antes de la eliminación. Devuelve false para impedirla (recomendado para los cuadros de diálogo de confirmación).
• onAfter(domain) - Se ejecuta después de que el dominio se haya eliminado correctamente. Úsalo para registrar el evento o mostrar una notificación.

Ejemplo:

<DomainTable
  deleteAction={{
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}? This cannot be undone.`);
    },
    onAfter: (domain) => {
      analytics.track("Domain Deleted", { domain: domain.domain });
    },
  }}
/>

---

associateToProviderAction

Type: ComponentAction<Domain, IdentityProvider>

Controla la asociación de un dominio verificado con un proveedor de SSO. Solo los dominios verificados pueden asociarse.

Propiedades:

• disabled - Desactiva la acción de asociar
• onBefore(domain, provider) - Se ejecuta antes de realizar la asociación. Devuelve false para impedir la asociación.
• onAfter(domain, provider) - Se ejecuta después de que el dominio se haya asociado correctamente con el proveedor.

Ejemplo:

<DomainTable
  associateToProviderAction={{
    onAfter: (domain, provider) => {
      console.log(`Associated ${domain.domain} with ${provider.name}`);
    },
  }}
/>

---

deleteFromProviderAction

Type: ComponentAction<Domain, IdentityProvider>

Controla la desvinculación de un dominio de un proveedor de SSO.

Propiedades:

• disabled - Deshabilita la acción de desasociar
• onBefore(domain, provider) - Se ejecuta antes de eliminarlo. Devuelve false para impedir la eliminación.
• onAfter(domain, provider) - Se ejecuta después de que el dominio se haya eliminado correctamente del proveedor.

---

onOpenProvider / onCreateProvider

Type: (provider: IdentityProvider) => void / () => void

Manejadores de navegación para el modal de configuración de dominio. Cuando los usuarios configuran las asociaciones de proveedor de un dominio:

• onOpenProvider - Se llama cuando el usuario hace clic en un proveedor existente para verlo o editarlo
• onCreateProvider - Se llama cuando el usuario hace clic para crear un proveedor nuevo

Ejemplo:

<DomainTable
  onOpenProvider={(provider) => {
    navigate(`/providers/${provider.id}`);
  }}
  onCreateProvider={() => {
    navigate("/providers/create");
  }}
/>

---

​

Props de personalización

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

Propiedad	Tipo	Descripción
schema	DomainTableSchema	Reglas de validación para URLs de dominio.
customMessages	Partial<DomainTableMainMessages>	Reemplazos de texto para i18n.
styling	ComponentStyling	Variables CSS y reemplazos de clases.

schema

Define reglas de validación personalizadas para la entrada de URL de dominio.

Campos de esquema disponibles

create.domainUrl - Validación de la URL del dominio - regex - Patrón de regex personalizado

• errorMessage - Mensaje de error personalizado

<DomainTable
  schema={{
    create: {
      domain: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

---

customMessages

Personaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se completan, se usarán los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

• title, description, create_button_text

table - Vista de tabla

• empty_message
• columns.domain, columns.status
• actions.configure_button_text, actions.verify_button_text, actions.delete_button_text

create.modal - Modal de creación de dominio

• title
• field.label, field.placeholder, field.error
• actions.cancel_button_text, actions.create_button_text

verify.modal - Modal de verificación de dominio

• title
• txt_record_name.label, txt_record_content.label, verification_status.label
• actions.verify_button_text, actions.done_button_text

delete.modal - Confirmación para eliminar

• title
• description.pending, description.verified
• actions.cancel_button_text, actions.create_button_text

configure.modal - Configuración del proveedor

• title, description
• table.empty_message, table.columns.name
• actions.close_button_text

notifications - Respuestas de la API

• domain_create_success, domain_create_error
• domain_verify_success, domain_delete_success

<DomainTable
  customMessages={{
    header: {
      title: "Manage Domains",
      description: "Configure and verify organization domains",
      create_button_text: "Add Domain",
    },
    table: {
      empty_message: "No domains yet. Add one to begin.",
    },
    notifications: {
      domain_create_success: "Domain added successfully!",
      domain_verify_success: "Domain verified!",
      domain_delete_success: "Domain removed.",
    },
  }}
/>

---

styling

Personaliza la apariencia con variables CSS y sobreescritura 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

Classes - Sobrescrituras de clases del componente

• DomainTable-header
• DomainTable-table
• DomainTable-createModal
• DomainTable-configureModal
• DomainTable-deleteModal

<DomainTable
  styling={{
    variables: {
      common: { "--font-size-title": "1rem" },
      light: { "--color-primary": "#4f46e5" },
    },
    classes: {
      "DomainTable-header": "mb-6",
      "DomainTable-table": "rounded-lg shadow-sm",
    },
  }}
/>

---

​

Personalización avanzada

El componente DomainTable está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo de dominio personalizados si utilizas shadcn.

​

Subcomponentes disponibles

Para casos de uso avanzados, puedes importar subcomponentes individuales para crear interfaces de gestión de dominios personalizadas. Esto es útil cuando necesitas insertar modales específicos en distintos contextos o personalizar el diseño de la tabla más allá de lo que permiten las props.

Componente	Descripción
DomainCreateModal	Modal para crear un dominio
DomainVerifyModal	Modal para el proceso de verificación
DomainDeleteModal	Modal de confirmación para eliminar
DomainConfigureProvidersModal	Gestionar asociaciones con proveedores
DomainTableActionsColumn	Botones de acción para cada fila de dominio

​

Hooks disponibles

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

Hook	Descripción
useDomainTable	Capa de datos + API (obtener, crear, verificar, eliminar, asociar)
useDomainTableLogic	Estado de interacción de la UI + manejadores (modales, notificaciones)