Configurer les domaines vérifiés sur le Web

Découvrez comment gérer les domaines d’Organization vérifiés et en attente dans une même interface de table.

Le composant DomainTable offre à vos clients une interface unifiée pour gérer le domaine de courriel de leur Auth0 Organization. En vérifiant la propriété du domaine, les administrateurs de l’Organization activent des fonctionnalités B2B essentielles, comme la Home Realm Discovery (HRD), et veillent à ce que les utilisateurs soient automatiquement dirigés vers le bon fournisseur SSO selon le suffixe de leur adresse de courriel (par exemple, [e-mail]).

React

​

Exigences de configuration

Configuration d’Auth0 requise — Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez le guide de configuration →

​

Installer le composant

pnpm

pnpm add @auth0/universal-components-react

L’exécution de l’une ou l’autre de ces commandes installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration avec Auth0.

​

Pour commencer

React SPA

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

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

Exemple d’intégration complet

import React from "react";
import { DomainTable } 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";

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" // Requis pour traiter les challenges d'authentification renforcée au moyen du popup Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Servez-vous-en pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
readOnly	booléen	Désactive toutes les opérations liées au domaine. Par défaut : false
hideHeader	booléen	Masquer la section d’en-tête. Par défaut : faux

---

​

Props de l’Action

Les Props d’action gèrent les interactions des utilisateurs et définissent ce qui se passe lorsque ceux-ci effectuent des opérations sur le domaine. Utilisez les hooks de cycle de vie (onBefore, onAfter) pour vous intégrer au routage et aux analyses de votre application.

Propriété	Type	Description
createAction	ComponentAction<Domain>	Action de création d’un domaine.
verifyAction	ComponentAction<Domain>	Action de vérification d’un domaine.
deleteAction	ComponentAction<Domain>	Action de suppression d’un domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Associer le domaine au fournisseur.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Retirer le domaine du fournisseur.
onOpenProvider	(provider: IdentityProvider) => void	Accéder au fournisseur depuis la fenêtre modale de configuration.
onCreateProvider	() => void	Accéder au flux de création d’un fournisseur.

createAction

Type : ComponentAction<Domain>

Contrôle le flow de création de domaine. Utilisez onAfter pour faire le suivi de l’ajout de nouveaux domaines.

Propriétés :

• disabled—Désactive le bouton “Ajouter un domaine”
• onBefore(domain)—S’exécute avant la création du domaine. Retournez false pour empêcher sa création (par exemple, si le format du domaine n’est pas valide).
• onAfter(domain)—S’exécute une fois le domaine créé avec succès. Utilisez cette fonction pour afficher une notification ou consigner l’événement.

Exemple :

<DomainTable
  createAction={{
    onBefore: (domain) => {
      // Valider le format du domaine
      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>

Contrôle le flow de domain verification. La domain verification atteste la propriété au moyen d’un record TXT DNS.

Propriétés :

• disabled—Désactive le bouton de vérification
• onBefore(domain)—S’exécute avant la tentative de vérification. Retournez false pour empêcher la vérification (par exemple, pour confirmer que le DNS est configuré).
• onAfter(domain)—S’exécute une fois le domaine vérifié. Utilisez cette fonction pour afficher une notification de réussite.

Exemple :

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

Contrôle la suppression du domaine. Il est recommandé d’utiliser onBefore pour obtenir une confirmation, car il s’agit d’une opération destructive.

Propriétés :

• disabled—Désactive le bouton Supprimer
• onBefore(domain)—S’exécute avant la suppression. Retournez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
• onAfter(domain)—S’exécute une fois le domaine supprimé. Utilisez cette fonction pour suivre l’événement ou afficher une notification.

Exemple :

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

Contrôle l’association d’un domaine vérifié à un fournisseur SSO. Seuls les domaines vérifiés peuvent être associés.

Propriétés :

• disabled—Désactive l’action d’association
• onBefore(domain, provider)—S’exécute avant l’association. Retournez false pour empêcher l’association.
• onAfter(domain, provider)—S’exécute après l’association réussie du domaine au fournisseur.

Exemple :

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

---

deleteFromProviderAction

Type : ComponentAction<Domain, IdentityProvider>

Contrôle la suppression de l’association entre un domain et un provider SSO.

Propriétés :

• disabled—Désactive l’action de dissociation
• onBefore(domain, provider)—S’exécute avant la suppression. Retournez false pour empêcher celle-ci.
• onAfter(domain, provider)—S’exécute une fois que le domaine a été retiré du fournisseur.

---

onOpenProvider / onCreateProvider

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

Handlers de navigation de la fenêtre modale de configuration du domain. Lorsque les utilisateurs configurent les associations de Provider d’un domain :

• onOpenProvider—Appelée lorsque l’utilisateur clique sur un Provider existant pour l’afficher ou le modifier
• onCreateProvider—Appelée lorsque l’utilisateur clique pour créer un nouveau Provider

Exemple :

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

---

​

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans toucher au code source.

Propriété	Type	Description
schema	DomainTableSchema	Règles de validation de l’URL du domaine.
customMessages	Partial<DomainTableMainMessages>	Remplacements de texte i18n.
styling	ComponentStyling	Variables CSS et remplacements de classes.

schema

Définissez des règles de validation personnalisées pour la saisie de l’URL du domaine.

Champs de schéma disponibles

create.domainUrl—Validation de l’URL du domaine—regex—Expression régulière personnalisée

• errorMessage—Message d’erreur personnalisé

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

---

customMessages

Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

• title, description, create_button_text

table—Affichage de la table

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

create.modal—Fenêtre modale de création d’un domaine

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

verify.modal—Fenêtre modale de vérification d’un domaine

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

delete.modal—Confirmation de suppression

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

configure.modal—Configuration du fournisseur

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

notifications—Réponses de l’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

Personnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de style offertes

Variables—propriétés CSS personnalisées

• common—S’applique à tous les thèmes
• light—Thème clair uniquement
• dark—Thème sombre uniquement

Classes—surcharges des classes du composant

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

---

​

Personnalisation avancée

Le composant DomainTable se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows de custom domain si vous utilisez shadcn.

​

Sous-composants disponibles

Pour des cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer vos propres interfaces de gestion des domaines personnalisés. C’est utile lorsque vous devez intégrer des fenêtres modales précises dans différents contextes ou personnaliser la disposition du tableau au-delà de ce que permettent les props.

Composant	Description
DomainCreateModal	Fenêtre modale de création d’un domaine
DomainVerifyModal	Fenêtre modale du flux de vérification
DomainDeleteModal	Fenêtre modale de confirmation de suppression
DomainConfigureProvidersModal	Gérer les associations de fournisseurs
DomainTableActionsColumn	Boutons d’action pour chaque ligne de domaine

​

Hooks disponibles

Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration au niveau de l’API Auth0.

Hook	Description
useDomainTable	Couche de données et d’API (récupération, création, vérification, suppression, association)
useDomainTableLogic	État des interactions de l’interface utilisateur et gestionnaires (fenêtres modales, notifications)

Next.js

​

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez le guide de configuration →

​

Installer le composant

npm

npm install @auth0/universal-components-react

L’exécution des commandes pnpm ou npm installe la dépendance @auth0/universal-components-core qui fournit des utilitaires partagés et l’intégration à Auth0.

​

Pour commencer

page.tsx

import { DomainTable } from "@auth0/universal-components-react";
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");
      }}
    />
  );
}

Exemple d’intégration complet

import React from "react";
import { DomainTable } from "@auth0/universal-components-react";
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 d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
readOnly	boolean	Désactive toutes les opérations sur le domaine. Par défaut : false
hideHeader	boolean	Masque la section d’en-tête. Par défaut : false

---

​

Props de l’Action

Les Props d’action gèrent les interactions des utilisateurs et définissent ce qui se produit lorsque ceux-ci effectuent des opérations de domaine. Utilisez les hooks de cycle de vie (onBefore, onAfter) pour vous intégrer au routage et aux analyses de votre application.

Propriété	Type	Description
createAction	ComponentAction<Domain>	Action de création du domaine.
verifyAction	ComponentAction<Domain>	Action de vérification du domaine.
deleteAction	ComponentAction<Domain>	Action de suppression du domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Associe le domaine au fournisseur.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Retire le domaine du fournisseur.
onOpenProvider	(provider: IdentityProvider) => void	Accède au fournisseur depuis la fenêtre modale de configuration.
onCreateProvider	() => void	Accède au flux de création d’un fournisseur.

createAction

Type : ComponentAction<Domain>

Contrôle le flow de création de domaine. Utilisez onAfter pour suivre l’ajout de nouveaux domaines.

Propriétés :

• disabled—Désactive le bouton “Ajouter un domaine”
• onBefore(domain)—S’exécute avant la création du domaine. Retournez false pour empêcher sa création (par exemple, si le format du domaine n’est pas valide).
• onAfter(domain)—S’exécute une fois le domaine créé avec succès. Utilisez cette fonction pour afficher une notification ou consigner l’événement.

Exemple :

<DomainTable
  createAction={{
    onBefore: (domain) => {
      // Valider le format du domaine
      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>

Contrôle le flow de domain verification. La domain verification atteste la propriété au moyen d’un record TXT DNS.

Propriétés :

• disabled—Désactive le bouton de vérification
• onBefore(domain)—S’exécute avant la tentative de vérification. Retournez false pour empêcher la vérification (par exemple, pour confirmer que le DNS est configuré).
• onAfter(domain)—S’exécute une fois que le domaine a été vérifié avec succès. Utilisez cette fonction pour afficher une notification de réussite.

Exemple :

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

Contrôle la suppression du domaine. Il est recommandé d’utiliser onBefore pour demander une confirmation, car il s’agit d’une opération destructrice.

Propriétés :

• disabled—Désactive le bouton de suppression
• onBefore(domain)—S’exécute avant la suppression. Retournez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
• onAfter(domain)—S’exécute après la suppression réussie du domaine. Utilisez cette fonction pour consigner l’événement ou afficher une notification.

Exemple :

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

Contrôle l’association d’un domaine vérifié à un fournisseur SSO. Seuls les domaines vérifiés peuvent être associés.

Propriétés :

• disabled—Désactive l’action d’association
• onBefore(domain, provider)—S’exécute avant l’association. Retournez false pour empêcher l’association.
• onAfter(domain, provider)—S’exécute après l’association réussie du domain au provider.

Exemple :

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

---

deleteFromProviderAction

Type : ComponentAction<Domain, IdentityProvider>

Contrôle la suppression de l’association entre un domaine et un provider SSO.

Propriétés :

• disabled—Désactive l’action de dissociation
• onBefore(domain, provider)—S’exécute avant la suppression. Retournez false pour empêcher la suppression.
• onAfter(domain, provider)—S’exécute une fois que le domaine a bien été supprimé du fournisseur.

---

onOpenProvider / onCreateProvider

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

Handlers de navigation pour la fenêtre de configuration du domain. Lorsque les utilisateurs configurent les associations de Provider d’un domain :

• onOpenProvider—Appelée lorsque l’utilisateur clique sur un Provider existant pour l’afficher ou le modifier
• onCreateProvider—Appelée lorsque l’utilisateur clique pour créer un nouveau Provider

Exemple :

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

---

​

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

Propriété	Type	Description
schema	DomainTableSchema	Règles de validation de l’URL du domaine.
customMessages	Partial<DomainTableMainMessages>	Remplacements de texte pour l’i18n.
styling	ComponentStyling	Variables CSS et remplacements de classes.

schema

Définissez des règles de validation personnalisées pour la saisie de l’URL du domaine.

Champs de schéma disponibles

create.domain—Validation de l’URL du domaine—regex—Expression régulière personnalisée - errorMessage—Message d’erreur personnalisé

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

---

customMessages

Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

• title, description, create_button_text

table—Affichage du tableau

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

create.modal—Fenêtre modale de création de domaine

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

verify.modal—Fenêtre modale de vérification du domaine

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

delete.modal—Confirmation de suppression

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

configure.modal—Configuration du fournisseur

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

notifications—Réponses de l’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

Personnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de style offertes

Variables—propriétés CSS personnalisées

• common—S’applique à tous les thèmes
• light—Thème clair uniquement
• dark—Thème sombre uniquement

Classes—surcharges de classes de composants

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

---

​

Personnalisation avancée

Le composant DomainTable se compose de plus petits sous-composants et de hooks. Vous pouvez les importer individuellement pour créer des workflows de custom domain.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces personnalisées de gestion des domaines. C’est utile lorsque vous devez intégrer des fenêtres modales précises dans différents contextes ou personnaliser la disposition de la table au-delà de ce que permettent les props.

Composant	Description
DomainCreateModal	Fenêtre modale permettant de créer un domaine
DomainVerifyModal	Fenêtre modale pour le flux de vérification
DomainDeleteModal	Fenêtre modale de confirmation de suppression
DomainConfigureProvidersModal	Gérer les associations de fournisseurs
DomainTableActionsColumn	Boutons d’action pour chaque ligne de domaine

​

Hooks disponibles

Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en profitant de l’intégration au niveau de l’API Auth0.

Hook	Description
useDomainTable	Couche de données et API (récupération, création, vérification, suppression, association)
useDomainTableLogic	État des interactions de l’interface utilisateur et gestionnaires (fenêtres modales, notifications)

shadcn

​

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consulter le guide de configuration →

​

Installer le composant

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

L’exécution de la commande shadcn installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration à Auth0.

​

Pour commencer

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

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

Exemple d’intégration complet

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" // Requis pour traiter les challenges d'authentification renforcée au moyen du popup Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Servez-vous-en pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
readOnly	boolean	Désactive toutes les opérations liées au domaine. Par défaut : false
hideHeader	boolean	Masque la section d’en-tête. Par défaut : false

---

​

Props de l’action

Les props d’action gèrent les interactions des utilisateurs et définissent ce qui se produit lorsque ceux-ci effectuent des opérations de domaine. Utilisez les hooks de cycle de vie (onBefore, onAfter) pour assurer l’intégration avec le routage et les analyses de votre application.

Propriété	Type	Description
createAction	ComponentAction<Domain>	Action de création d’un domaine.
verifyAction	ComponentAction<Domain>	Action de vérification d’un domaine.
deleteAction	ComponentAction<Domain>	Action de suppression d’un domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Associer un domaine à un fournisseur.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Retirer un domaine d’un fournisseur.
onOpenProvider	(provider: IdentityProvider) => void	Accéder au fournisseur depuis la fenêtre modale Configurer.
onCreateProvider	() => void	Accéder au flow de création d’un fournisseur.

createAction

Type : ComponentAction<Domain>

Contrôle le flow de création de domaine. Utilisez onAfter pour faire le suivi de l’ajout de nouveaux domaines.

Propriétés :

• disabled—Désactive le bouton “Ajouter un domaine”
• onBefore(domain)—S’exécute avant la création du domaine. Retournez false pour empêcher sa création (par exemple, si le format du domaine n’est pas valide).
• onAfter(domain)—S’exécute une fois le domaine créé avec succès. Utilisez cette fonction pour afficher une notification ou consigner l’événement.

Exemple :

<DomainTable
  createAction={{
    onBefore: (domain) => {
      // Valider le format du domaine
      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>

Contrôle le flow de domain verification. La domain verification atteste la propriété au moyen d’un record TXT DNS.

Propriétés :

• disabled—Désactive le bouton de vérification
• onBefore(domain)—S’exécute avant la tentative de vérification. Retournez faux pour empêcher la vérification (par exemple, afin de confirmer que le DNS est configuré).
• onAfter(domain)—S’exécute une fois que le domaine a été vérifié avec succès. Utilisez-le pour afficher une notification de réussite.

Exemple :

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

Contrôle la suppression du domain. Il est recommandé d’utiliser onBefore pour demander une confirmation, puisqu’il s’agit d’une opération destructrice.

Propriétés :

• disabled—Désactive le bouton de suppression
• onBefore(domain)—S’exécute avant la suppression. Retournez false pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
• onAfter(domain)—S’exécute après la suppression réussie du domaine. Utilisez cette fonction pour suivre l’événement ou afficher une notification.

Exemple :

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

Contrôle l’association d’un domaine vérifié à un fournisseur SSO. Seuls les domaines vérifiés peuvent être associés.

Propriétés :

• disabled—Désactive l’action d’association
• onBefore(domain, provider)—S’exécute avant l’association. Retournez false pour empêcher l’association.
• onAfter(domain, provider)—S’exécute une fois le domain associé au provider.

Exemple :

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

---

deleteFromProviderAction

Type : ComponentAction<Domain, IdentityProvider>

Contrôle la suppression de l’association entre un domaine et un Provider SSO.

Propriétés :

• disabled—Désactive l’action de dissociation
• onBefore(domain, provider)—S’exécute avant la suppression. Retournez false pour empêcher la suppression.
• onAfter(domain, provider)—S’exécute une fois le domaine supprimé du fournisseur.

---

onOpenProvider / onCreateProvider

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

Handlers de navigation de la fenêtre modale de configuration du domain. Lorsque les utilisateurs configurent les associations de provider d’un domain :

• onOpenProvider—Appelée lorsque l’utilisateur clique sur un fournisseur existant pour le consulter ou le modifier
• onCreateProvider—Appelée lorsque l’utilisateur clique pour créer un nouveau fournisseur

Exemple :

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

---

​

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans avoir à modifier le code source.

Propriété	Type	Description
schema	DomainTableSchema	Règles de validation de l’URL du domaine.
customMessages	Partial<DomainTableMainMessages>	Remplacements de texte i18n.
styling	ComponentStyling	Variables CSS et remplacements de classes.

schema

Définissez des règles de validation personnalisées pour la saisie de l’URL du domaine.

Champs de schéma disponibles

create.domainUrl—Validation de l’URL du domaine—regex—Motif d’expression régulière personnalisé

• errorMessage—Message d’erreur personnalisé

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

---

customMessages

Personnalisez tous les textes et les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

• title, description, create_button_text

table—Affichage du tableau

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

create.modal—Fenêtre modale de création d’un domaine

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

verify.modal—Fenêtre modale de vérification d’un domaine

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

delete.modal—Confirmation de suppression

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

configure.modal—Configuration du fournisseur

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

notifications—Réponses de l’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

Personnalisez l’apparence à l’aide de variables CSS et de substitutions de classes. Prend en charge un style adapté au thème.

Options de style disponibles

Variables—propriétés CSS personnalisées

• common—S’applique à tous les thèmes
• light—Thème clair uniquement
• dark—Thème sombre uniquement

Classes—surcharges de classes de composants

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

---

​

Personnalisation avancée

Le composant DomainTable se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer vos propres workflows de custom domain si vous utilisez shadcn.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces personnalisées de gestion de domaines. Cela s’avère utile lorsque vous devez intégrer des fenêtres modales précises dans différents contextes ou personnaliser la disposition du tableau au-delà de ce que permettent les props.

Composant	Description
DomainCreateModal	Fenêtre modale de création d’un domaine
DomainVerifyModal	Fenêtre modale du flux de vérification
DomainDeleteModal	Fenêtre modale de confirmation de suppression
DomainConfigureProvidersModal	Gestion des associations de fournisseurs
DomainTableActionsColumn	Boutons d’action pour chaque ligne de domaine

​

Hooks disponibles

Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en profitant de l’intégration au niveau de l’API Auth0.

Hook	Description
useDomainTable	Couche de données et API (récupération, création, vérification, suppression, association)
useDomainTableLogic	État des interactions de l’interface utilisateur et gestionnaires (fenêtres modales, notifications)