Configurer le domaine d’Organisation vérifié

Découvrez comment gérer les domaines d’Organisation vérifiés et en attente dans un tableau unifié.

Le composant DomainTable offre une interface unifiée permettant à vos clients de gérer le domaine de courriel de leur organisation Auth0. En vérifiant la propriété du domaine, les administrateurs de l’organisation peuvent activer des fonctionnalités B2B essentielles comme la détection du domaine d’origine (HRD) et veiller à ce que les utilisateurs soient automatiquement redirigés vers le bon fournisseur SSO en fonction du suffixe de leur courriel (par exemple, [e-mail]).

React

​

Exigences de configuration

Configuration d’Auth0 requise - Assurez-vous que votre locataire est configuré pour utiliser l’API My Organization. Voir 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.

​

Premiers pas

React SPA

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

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

Exemple complet d’intégration

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" // Requis pour gérer les défis d'authentification par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Propriétés d’affichage

Les props d’affichage contrôlent le rendu du composant 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 liées au domaine. Valeur par défaut : false
hideHeader	boolean	Masque la section d’en-tête. Valeur par défaut : false

---

​

Propriétés d’Action

Les props d’Action gèrent les interactions des utilisateurs et définissent ce qui se produit lorsque les utilisateurs effectuent des opérations de domaine. Utilisez les hooks de cycle de vie (onBefore, onAfter) pour les 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>	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ède au flux de création d’un fournisseur.

createAction

Type: ComponentAction<Domain>

Contrôle le flux 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. Renvoyez false pour empêcher sa création (par ex., si le format du domaine n’est pas valide).
• onAfter(domain) - S’exécute après la création réussie du domaine. Utilisez cette fonction pour afficher une notification ou faire le suivi de 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 flux de vérification du domaine. La vérification du domaine confirme la propriété via un enregistrement 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 cette 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 confirmation.

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 confirmation, car cette opération est destructive.

Propriétés :

• disabled - Désactiver le bouton de suppression
• onBefore(domain) - S’exécute avant la suppression. Renvoyez 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é avec succès. 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é avec 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. Renvoyez false pour empêcher l’association.
• onAfter(domain, provider) - S’exécute une fois que le domaine est associé avec succès 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 d’un domaine avec un fournisseur 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 été supprimé du fournisseur avec succès.

---

onOpenProvider / onCreateProvider

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

Gestionnaires de navigation pour la fenêtre modale de configuration du domaine. Lorsque les utilisateurs configurent les associations de fournisseurs d’un domaine :

• onOpenProvider - Appelé 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 fournisseur

Exemple :

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

---

​

Propriétés de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre marque, à vos paramètres régionaux et à vos exigences de validation sans modifier le code source.

Prop	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éfinir des règles de validation personnalisées pour la saisie d’URL de 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 traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

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 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 substitutions de classes. Prend en charge le style adaptatif 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 - remplacements 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 est composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows de domaine personnalisés 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 de gestion de domaines personnalisées. C’est utile lorsque vous devez intégrer des modales spécifiques dans différents contextes ou personnaliser la mise en page du tableau au-delà de ce que les props permettent.

Composant	Description
DomainCreateModal	Fenêtre modale de création d’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 interface utilisateur. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration à l’API Auth0.

Hook	Description
useDomainTable	Couche de données et d’API (récupérer, créer, vérifier, supprimer, associer)
useDomainTableLogic	État des interactions de l’interface utilisateur + gestionnaires (fenêtres modales, notifications)

Next.js

​

Exigences de configuration

Configuration Auth0 requise - Assurez-vous que votre locataire est configuré pour l’API My Organization. Voir 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 pour les utilitaires communs et l’intégration à Auth0.

​

Démarrer

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

Exemple complet d’intégration

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

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche 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 liées au domaine. Par défaut : false
hideHeader	boolean	Masque la section d’en-tête. Par défaut : false

---

​

Propriétés d’Action

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

Propriété	Type	Description
createAction	ComponentAction<Domain>	Créer une action de domaine.
verifyAction	ComponentAction<Domain>	Vérifier une action de domaine.
deleteAction	ComponentAction<Domain>	Supprimer une action de domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Associer le domaine au fournisseur d’identité.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Retirer le domaine du fournisseur d’identité.
onOpenProvider	(provider: IdentityProvider) => void	Accéder au fournisseur depuis la fenêtre modale de configuration.
onCreateProvider	() => void	Accéder au flux de création du fournisseur.

createAction

Type: ComponentAction<Domain>

Contrôle le flux 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. Renvoyez false pour empêcher sa création (p. ex., si le format du domaine n’est pas valide).
• onAfter(domain) - S’exécute une fois le domaine créé avec succès. Utilisez-le pour afficher une notification ou effectuer le suivi de 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 flux de vérification du domaine. La vérification du domaine confirme la propriété via un enregistrement TXT DNS.

Propriétés :

• disabled - Désactive le bouton Vérifier
• onBefore(domain) - S’exécute avant la tentative de vérification. Retournez false pour empêcher la vérification (p. ex., 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 succès.

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 confirmation, car cette opération est destructive.

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. Renvoyez 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 d’un domaine avec un fournisseur SSO.

Propriétés :

• disabled - Désactive l’action de désassociation
• onBefore(domain, provider) - S’exécute avant la suppression. Renvoyez false pour empêcher la suppression.
• onAfter(domain, provider) - S’exécute une fois que le domaine a été supprimé du fournisseur avec succès.

---

onOpenProvider / onCreateProvider

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

Gestionnaires de navigation pour la fenêtre modale de configuration du domaine. Lorsque les utilisateurs configurent les associations de fournisseurs d’un domaine :

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

Exemple :

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

---

​

Propriétés de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre marque, à vos paramètres régionaux 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>	Personnalisations du texte i18n.
styling	ComponentStyling	Variables CSS et redéfinitions de classes.

schema

Définir des règles de validation personnalisées pour la saisie d’URL de 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 traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

Messages disponibles

header - En-tête du composant

• title, description, create_button_text

table - Affichage en 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 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 substitutions de classes. Prend en charge le style adaptatif 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 - remplacements 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 est composé de sous-composants plus petits et de hooks. Vous pouvez les importer individuellement pour créer des workflows de domaine personnalisés.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces de gestion de domaines personnalisées. C’est utile lorsque vous devez intégrer des modales spécifiques dans différents contextes ou personnaliser la mise en page du tableau au-delà de ce que les props permettent.

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

​

Hooks disponibles

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

Hook	Description
useDomainTable	Couche de données et API (récupérer, créer, vérifier, supprimer, associer)
useDomainTableLogic	État des interactions de l’interface utilisateur + gestionnaires (fenêtres modales, notifications)

shadcn

​

Exigences de configuration

Configuration Auth0 requise - Assurez-vous que votre locataire est configuré pour utiliser l’API My Organization. Voir 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 avec Auth0.

​

Mise en route

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

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

Exemple complet d’intégration

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 gérer les défis d'authentification par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Propriétés d’affichage

Les props d’affichage contrôlent le rendu du composant 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

---

​

Propriétés d’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 les intégrer au routage et aux analyses de votre application.

Propriété	Type	Description
createAction	ComponentAction<Domain>	Créer un domaine.
verifyAction	ComponentAction<Domain>	Vérifier un domaine.
deleteAction	ComponentAction<Domain>	Supprimer un domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider>	Associer le domaine à un fournisseur d’identité.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider>	Retirer le domaine du fournisseur d’identité.
onOpenProvider	(provider: IdentityProvider) => void	Ouvrir le fournisseur à partir de 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 flux de création de domaine. Utilisez onAfter pour suivre l’ajout de nouveaux domaines.

Propriétés :

• disabled - Désactiver 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 suivre 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 flux de vérification du domaine. La vérification du domaine confirme la propriété via un enregistrement TXT DNS.

Propriétés :

• disabled - Désactiver le bouton de vérification
• onBefore(domain) - S’exécute avant la tentative de vérification. Renvoyez false pour empêcher la vérification (p. ex., pour confirmer que le DNS est configuré).
• onAfter(domain) - S’exécute une fois le domaine vérifié avec succès. Utilisez cette fonction pour afficher une notification de succès.

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 confirmation, car cette action est irréversible.

Propriétés :

• disabled - Désactive le bouton Supprimer
• onBefore(domain) - S’exécute avant la suppression. Renvoyez 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é avec succès. Utilisez cette fonction pour suivre cet é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ésactiver l’action d’association
• onBefore(domain, provider) - Est exécutée 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 d’un domaine avec un fournisseur SSO.

Propriétés :

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

---

onOpenProvider / onCreateProvider

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

Gestionnaires de navigation pour la fenêtre modale de configuration du domaine. Lorsque les utilisateurs configurent les associations de fournisseurs d’un domaine :

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

Exemple :

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

---

​

Propriétés de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre marque, à vos paramètres régionaux 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>	Personnalisations du texte i18n.
styling	ComponentStyling	Variables CSS et surcharges de classes.

schema

Définir 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 traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

Messages disponibles

header - En-tête du composant

• title, description, create_button_text

table - Affichage en tableau

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

create.modal - Boîte de dialogue de création de domaine

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

verify.modal - Boîte de dialogue 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 substitutions de classes. Prend en charge le style adaptatif 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 - remplacements 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 est constitué de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de domaine personnalisés 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 de gestion de domaines personnalisées. Cela est utile lorsque vous devez intégrer des modales spécifiques dans différents contextes ou personnaliser la mise en page du tableau au-delà de ce que les props permettent.

Composant	Description
DomainCreateModal	Fenêtre modale de création d’un domaine
DomainVerifyModal	Fenêtre modale pour le 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 du tableau des domaines

​

Hooks disponibles

Ces hooks fournissent la logique sous-jacente sans interface utilisateur. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration à 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)