Configurer les domaines vérifiés sur le Web

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, user@acme.com).

React
Next.js
shadcn

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 add @auth0/universal-components-react

npm install @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: {
            domainUrl: {
              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 renforcée au moyen d’une fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider>
        <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 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.

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

verifyActionType : ComponentAction<Domain>Contrôle le flux de vérification de domaine. La vérification de domaine prouve la propriété au moyen d’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 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!`);
    },
  }}
/>

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

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

deleteFromProviderActionType : 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 celle-ci.
onAfter(domain, provider)—S’exécute une fois que le domaine a été retiré du fournisseur.

onOpenProvider / onCreateProviderType : (provider: IdentityProvider) => void / () => voidGestionnaires de navigation de la fenêtre modale de configuration du domaine. Lorsque les utilisateurs configurent les associations de fournisseurs d’un domaine :

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

schemaDé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: {
      domainUrl: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

customMessagesPersonnalisez 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.view_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.delete_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

fetch_providers_error, fetch_domains_error
domain_create_success, domain_create_error
domain_verify_success, domain_verify_error, domain_verify_verification_failed
domain_delete_success, domain_delete_error
domain_associate_provider_success, domain_associate_provider_error
domain_delete_provider_success, domain_delete_provider_error

shared—Messages partagés

domain_statuses.pending, domain_statuses.verified, domain_statuses.failed

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

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements 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-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

<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

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 API (récupération, création, vérification, suppression, association)

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 install @auth0/universal-components-react

pnpm add @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: {
            domainUrl: {
              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. 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

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.

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

verifyActionType : ComponentAction<Domain>Contrôle le flux de vérification de domaine. La vérification de domaine prouve la propriété au moyen d’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 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!`);
    },
  }}
/>

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

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

deleteFromProviderActionType : 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 celle-ci.
onAfter(domain, provider)—S’exécute une fois que le domaine a été retiré du fournisseur.

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

schemaDé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: {
      domainUrl: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

customMessagesPersonnalisez 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.view_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.delete_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

fetch_providers_error, fetch_domains_error
domain_create_success, domain_create_error
domain_verify_success, domain_verify_error, domain_verify_verification_failed
domain_delete_success, domain_delete_error
domain_associate_provider_success, domain_associate_provider_error
domain_delete_provider_success, domain_delete_provider_error

shared—Messages partagés

domain_statuses.pending, domain_statuses.verified, domain_statuses.failed

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

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements 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-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

<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

Hooks disponibles

Hook	Description
`useDomainTable`	Couche de données et API (récupération, création, vérification, suppression, association)

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

Installez le composant à l’aide de la CLI shadcn en utilisant le registre GitHub :

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/domain-table

La CLI shadcn installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration à Auth0. Nécessite shadcn CLI v2.5.0+.

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: {
            domainUrl: {
              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 challenges d’authentification renforcée au moyen de la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider>
        <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

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.

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

verifyActionType : ComponentAction<Domain>Contrôle le flux de vérification de domaine. La vérification de domaine prouve la propriété au moyen d’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 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!`);
    },
  }}
/>

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

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

deleteFromProviderActionType : 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 celle-ci.
onAfter(domain, provider)—S’exécute une fois que le domaine a été retiré du fournisseur.

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

schemaDé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: {
      domainUrl: {
        regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
        errorMessage: "Enter a valid domain (example.com)",
      },
    },
  }}
/>

customMessagesPersonnalisez 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.view_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.delete_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

fetch_providers_error, fetch_domains_error
domain_create_success, domain_create_error
domain_verify_success, domain_verify_error, domain_verify_verification_failed
domain_delete_success, domain_delete_error
domain_associate_provider_success, domain_associate_provider_error
domain_delete_provider_success, domain_delete_provider_error

shared—Messages partagés

domain_statuses.pending, domain_statuses.verified, domain_statuses.failed

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

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements 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-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

<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

Hooks disponibles

Hook	Description
`useDomainTable`	Couche de données et API (récupération, création, vérification, suppression, association)

Web Components

iOS Components

Android Components

Configurer les domaines vérifiés sur le Web

Exigences de configuration

Installer le composant

Pour commencer

Props

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installer le composant

Pour commencer

Props

Props d’affichage

Props de l’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installer le composant

Pour commencer

Props

Props d’affichage

Props de l’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

​Exigences de configuration

​Installer le composant

​Pour commencer

​Props

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installer le composant

​Pour commencer

​Props

​Props d’affichage

​Props de l’action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installer le composant

​Pour commencer

​Props

​Props d’affichage

​Props de l’action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

Exigences de configuration

Installer le composant

Pour commencer

Props

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installer le composant

Pour commencer

Props

Props d’affichage

Props de l’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installer le composant

Pour commencer

Props

Props d’affichage

Props de l’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles