> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.auth0-mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="Chargement" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

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)](/docs/fr-ca/authenticate/enterprise-connections/self-service-enterprise-configuration/manage-self-service-enterprise-config#email-domain-verification-and-pre-verified-domains), 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`).

<ComponentLoader componentSelector="domain-table-view" componentPreviewText="Aperçu du composant Domain Table" />

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      Exigences de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise** — Assurez-vous que votre tenant est configuré avec l’API My Organization. [Consultez le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    <h2 id="install-the-component">
      Installer le composant
    </h2>

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    <h2 id="get-started">
      Pour commencer
    </h2>

    ```tsx React SPA wrap lines theme={null}
    import { DomainTable } from "@auth0/universal-components-react";

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

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      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>
        );
      }

      ```
    </Accordion>

    <h2 id="props">
      Props
    </h2>

    <h3 id="display-props">
      Props d'affichage
    </h3>

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

    ***

    <h3 id="action-props">
      Props de l’Action
    </h3>

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

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

    ```tsx wrap lines theme={null}
    <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 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 :**

    ```tsx wrap lines theme={null}
    <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 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 :**

    ```tsx wrap lines theme={null}
    <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 :**

    ```tsx wrap lines theme={null}
    <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 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`

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

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

    ***

    <h3 id="customization-props">
      Props de personnalisation
    </h3>

    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.

    <Accordion title="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é
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domainUrl: {
            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.

    <Accordion title="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`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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.

    <Accordion title="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`
    </Accordion>

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

    ***

    <h2 id="advanced-customization">
      Personnalisation avancée
    </h2>

    <h3 id="available-hooks">
      Hooks disponibles
    </h3>

    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) |
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      Exigences de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consultez le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="install-component">
      Installer le composant
    </h2>

    <CodeGroup>
      ```bash npm  wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    <h2 id="get-started-2">
      Pour commencer
    </h2>

    ```tsx page.tsx wrap lines theme={null}
    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");
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      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;
      ```
    </Accordion>

    <h2 id="props-2">
      Props
    </h2>

    <h3 id="display-props-2">
      Props d'affichage
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive toutes les opérations liées au domaine. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-2">
      Props de l’action
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Action de création du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Action de vérification du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Action de suppression du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            Associe le domaine au fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            Retire le domaine du fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            Accède au fournisseur depuis la fenêtre modale de configuration.
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            Accède au flux de création d’un fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

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

    ```tsx wrap lines theme={null}
    <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 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 :**

    ```tsx wrap lines theme={null}
    <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 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 :**

    ```tsx wrap lines theme={null}
    <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 :**

    ```tsx wrap lines theme={null}
    <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 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`

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

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

    ***

    <h3 id="customization-props-2">
      Props de personnalisation
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>DomainTableSchema</code>
          </td>

          <td>
            Règles de validation de l’URL du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

          <td>
            Remplacements de texte pour l’i18n.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling</code>
          </td>

          <td>
            Variables CSS et remplacements de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

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

    <Accordion title="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é
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domainUrl: {
            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.

    <Accordion title="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`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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.

    <Accordion title="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`
    </Accordion>

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

    ***

    <h2 id="advanced-customization-2">
      Personnalisation avancée
    </h2>

    <h3 id="available-hooks-2">
      Hooks disponibles
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>Couche de données et API (récupération, création, vérification, suppression, association)</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      Exigences de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consultez le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="install-the-component-2">
      Installer le composant
    </h2>

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

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/domain-table
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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+**.
    </Callout>

    <details>
      <summary>Registre Vercel Legacy (deprecated)</summary>

      Les utilisateurs existants peuvent continuer d'utiliser le chemin hébergé sur Vercel jusqu'au **17 septembre 2026** :

      ```bash wrap lines theme={null}
      npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/domain-table.json
      ```

      Les nouveaux projets doivent utiliser le chemin du registre GitHub ci-dessus.
    </details>

    <h2 id="get-started-3">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    import { DomainTable } from "@/components/auth0/my-organization/domain-table";

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

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      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>
        );
      }

      ```
    </Accordion>

    <h2 id="props-3">
      Props
    </h2>

    <h3 id="display-props-3">
      Props d'affichage
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive toutes les opérations liées au domaine. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-3">
      Props de l'action
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Action de création du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Action de vérification du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            Action de suppression du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            Associe le domaine au fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            Retire le domaine du fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            Accède au fournisseur depuis la fenêtre modale de configuration.
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            Accède au flux de création d’un fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

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

    ```tsx wrap lines theme={null}
    <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 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 :**

    ```tsx wrap lines theme={null}
    <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 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 :**

    ```tsx wrap lines theme={null}
    <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 :**

    ```tsx wrap lines theme={null}
    <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 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`

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

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

    ***

    <h3 id="customization-props-3">
      Props de personnalisation
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>DomainTableSchema</code>
          </td>

          <td>
            Règles de validation de l’URL du domaine.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

          <td>
            Remplacements de texte pour l’i18n.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling</code>
          </td>

          <td>
            Variables CSS et remplacements de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

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

    <Accordion title="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é
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domainUrl: {
            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.

    <Accordion title="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`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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.

    <Accordion title="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`
    </Accordion>

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

    ***

    <h2 id="advanced-customization-3">
      Personnalisation avancée
    </h2>

    <h3 id="available-hooks-3">
      Hooks disponibles
    </h3>

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>Couche de données et API (récupération, création, vérification, suppression, association)</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>