> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/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)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </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>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="Chargement" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} 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>;

<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-configuration#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">
    ## Exigences de configuration

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

    ## Installer le composant

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

    ## Pour commencer

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

      export default function App() {
        const domain = "your-domain.auth0.com";

        return (
          <Auth0Provider
            domain={domain}
            clientId="your-client-id"
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Requis pour traiter les challenges d'authentification renforcée au moyen du popup Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Props d'affichage

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

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

    ***

    ### Props de l'Action

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

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

    **createAction**

    **Type :** `ComponentAction<Domain>`

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

    **Propriétés :**

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

    **Exemple :**

    ```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 flow de domain verification. La domain verification atteste la propriété au moyen d'un record TXT DNS.

    **Propriétés :**

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

    **Exemple :**

    ```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 Supprimer
    * `onBefore(domain)`—S’exécute avant la suppression. Retournez `false` pour empêcher la suppression (recommandé pour les boîtes de dialogue de confirmation).
    * `onAfter(domain)`—S’exécute une fois le domaine supprimé. Utilisez cette fonction pour suivre l’événement ou afficher une notification.

    **Exemple :**

    ```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 entre un domain et un provider SSO.

    **Propriétés :**

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

    ***

    **onOpenProvider / onCreateProvider**

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

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

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

    **Exemple :**

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

    ***

    ### Props de personnalisation

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

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

    **schema**

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

    <Accordion title="Champs de schéma disponibles">
      **create.domainUrl**—Validation de l’URL du domaine—`regex`—Expression régulière personnalisée

      * `errorMessage`—Message d’erreur personnalisé
    </Accordion>

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

    ***

    **customMessages**

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

    <Accordion title="Messages disponibles">
      **header**—En-tête du composant

      * `title`, `description`, `create_button_text`

      **table**—Affichage de la table

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

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

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

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

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—Confirmation de suppression

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—Configuration du fournisseur

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—Réponses de l’API

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </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 offertes">
      **Variables**—propriétés CSS personnalisées

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

      **Classes**—surcharges des classes du composant

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

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

    ### Sous-composants disponibles

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

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

    ### Hooks disponibles

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

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

  <Tab title="Next.js">
    ## Exigences de configuration

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

    ## Installer le composant

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

    ## Pour commencer

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

      export default DomainsManagementPage;
      ```
    </Accordion>

    ## Props

    ### Props d'affichage

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

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

    ***

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

    <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 suivre l'ajout de nouveaux domaines.

    **Propriétés :**

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

    **Exemple :**

    ```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 flow de domain verification. La domain verification atteste la propriété au moyen d'un record TXT DNS.

    **Propriétés :**

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

    **Exemple :**

    ```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 demander une confirmation, car il s'agit d'une opération destructrice.

    **Propriétés :**

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

    **Exemple :**

    ```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 domain au provider.

    **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 entre un domaine et un provider SSO.

    **Propriétés :**

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

    ***

    **onOpenProvider / onCreateProvider**

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

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

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

    **Exemple :**

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

    <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.domain**—Validation de l’URL du domaine—`regex`—Expression régulière personnalisée -
      `errorMessage`—Message d’erreur personnalisé
    </Accordion>

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

    ***

    **customMessages**

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

    <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.verify_button_text`, `actions.delete_button_text`

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

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

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

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—Confirmation de suppression

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—Configuration du fournisseur

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—Réponses de l’API

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </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 offertes">
      **Variables**—propriétés CSS personnalisées

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

      **Classes**—surcharges de classes de composants

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

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

    ### Sous-composants disponibles

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

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

      <tbody>
        <tr>
          <td>
            <code>DomainCreateModal</code>
          </td>

          <td>Fenêtre modale permettant de créer un domaine</td>
        </tr>

        <tr>
          <td>
            <code>DomainVerifyModal</code>
          </td>

          <td>Fenêtre modale pour le flux de vérification</td>
        </tr>

        <tr>
          <td>
            <code>DomainDeleteModal</code>
          </td>

          <td>Fenêtre modale de confirmation de suppression</td>
        </tr>

        <tr>
          <td>
            <code>DomainConfigureProvidersModal</code>
          </td>

          <td>Gérer les associations de fournisseurs</td>
        </tr>

        <tr>
          <td>
            <code>DomainTableActionsColumn</code>
          </td>

          <td>Boutons d’action pour chaque ligne de domaine</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

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

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

        <tr>
          <td>
            <code>useDomainTableLogic</code>
          </td>

          <td>État des interactions de l’interface utilisateur et gestionnaires (fenêtres modales, notifications)</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    ## Exigences de configuration

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

    ## Installer le composant

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      L’exécution de la commande shadcn installe également la dépendance @auth0/universal-components-core
      pour les utilitaires partagés et l’intégration à Auth0.
    </Callout>

    ## Pour commencer

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

      export default function App() {
        const domain = "your-domain.auth0.com";

        return (
          <Auth0Provider
            domain={domain}
            clientId="your-client-id"
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Requis pour traiter les challenges d'authentification renforcée au moyen du popup Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

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

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

    ***

    ### Props de l'action

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

    <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 d’un domaine.
          </td>
        </tr>

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

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

          <td>
            Action de vérification d’un domaine.
          </td>
        </tr>

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

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

          <td>
            Action de suppression d’un domaine.
          </td>
        </tr>

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

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

          <td>
            Associer un domaine à un fournisseur.
          </td>
        </tr>

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

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

          <td>
            Retirer un domaine d’un fournisseur.
          </td>
        </tr>

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

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

          <td>
            Accéder au fournisseur depuis la fenêtre modale Configurer.
          </td>
        </tr>

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

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

          <td>
            Accéder au flow 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 flow de domain verification. La domain verification atteste la propriété au moyen d'un record TXT DNS.

    **Propriétés :**

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

    **Exemple :**

    ```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 domain. Il est recommandé d'utiliser `onBefore` pour demander une confirmation, puisqu'il s'agit d'une opération destructrice.

    **Propriétés :**

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

    **Exemple :**

    ```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 une fois le domain associé au provider.

    **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 entre un domaine et un Provider SSO.

    **Propriétés :**

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

    ***

    **onOpenProvider / onCreateProvider**

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

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

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

    **Exemple :**

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

    ***

    ### Props de personnalisation

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

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

    ***

    **customMessages**

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

    <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.verify_button_text`, `actions.delete_button_text`

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

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

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

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—Confirmation de suppression

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—Configuration du fournisseur

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—Réponses de l’API

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </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 substitutions 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-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

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

    ### Sous-composants disponibles

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

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

      <tbody>
        <tr>
          <td>
            <code>DomainCreateModal</code>
          </td>

          <td>Fenêtre modale de création d’un domaine</td>
        </tr>

        <tr>
          <td>
            <code>DomainVerifyModal</code>
          </td>

          <td>Fenêtre modale du flux de vérification</td>
        </tr>

        <tr>
          <td>
            <code>DomainDeleteModal</code>
          </td>

          <td>Fenêtre modale de confirmation de suppression</td>
        </tr>

        <tr>
          <td>
            <code>DomainConfigureProvidersModal</code>
          </td>

          <td>Gestion des associations de fournisseurs</td>
        </tr>

        <tr>
          <td>
            <code>DomainTableActionsColumn</code>
          </td>

          <td>Boutons d’action pour chaque ligne de domaine</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

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

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

        <tr>
          <td>
            <code>useDomainTableLogic</code>
          </td>

          <td>État des interactions de l’interface utilisateur et gestionnaires (fenêtres modales, notifications)</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>