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

# Lister et configurer les fournisseurs SSO sur le Web

> Affichez et gérez les fournisseurs d’identité SSO dans une interface tabulaire permettant de créer, modifier, supprimer, activer et désactiver des fournisseurs.

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 `SsoProviderTable` offre une interface unifiée pour afficher et configurer les fournisseurs d'[authentification unique](/docs/fr-ca/authenticate/enterprise-connections/self-service-enterprise-configuration) de votre organisation.

<ComponentLoader componentSelector="sso-provider-table" componentPreviewText="Aperçu du composant de table des fournisseurs SSO" />

<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 l’API
      My Organization est configurée dans votre tenant. [Voir le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    <h2 id="installation">
      Installation
    </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">
      Démarrage
    </h2>

    ```tsx wrap lines theme={null}
    import { SsoProviderTable } from "@auth0/universal-components-react";
    import { useNavigate } from "react-router-dom";

    export function ProvidersPage() {
      const navigate = useNavigate();

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => navigate("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => navigate(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderTable } 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";
      import { analytics } from "./lib/analytics";

      function ProvidersManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  navigate("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  navigate(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-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 dans la fenêtre contextuelle de connexion universelle
          >
            <Auth0ComponentProvider>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

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

    <h3 id="required-props">
      Props requis
    </h3>

    Les props requises sont fondamentales pour le fonctionnement du composant. `SsoProviderTable` nécessite les deux actions de navigation pour gérer le flux de gestion typique des fournisseurs.

    <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\<void></code>
          </td>

          <td>
            <strong>Obligatoire.</strong> Permet d’accéder à la création d’un fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

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

          <td>
            <strong>Obligatoire.</strong> Permet d’accéder à la modification d’un fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type :** `ComponentAction<void>`

    La propriété `createAction` est requise parce qu'elle contrôle où les utilisateurs sont dirigés lorsqu'ils cliquent sur « Add Provider ». Sans cela, le tableau ne saurait pas comment lancer le processus de création du fournisseur.

    **Propriétés :**

    * `disabled`—Désactive le bouton "Ajouter un fournisseur"
    * `onBefore()`—S’exécute avant la navigation. Retournez `false` pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les permissions requises).
    * `onAfter()`—S’exécute une fois que `onBefore` a réussi. Utilisez cette fonction pour accéder à votre page de création ou suivre les données analytiques.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // Naviguer vers la page de création
    createAction={{
      onAfter: () => navigate("/providers/create"),
    }}

    // Vérifier les autorisations avant d’autoriser la création
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => navigate("/providers/create"),
    }}

    // Effectuer un suivi analytique lors de l’intention de création
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type :** `ComponentAction<IdentityProvider>`

    La propriété `editAction` est requise, car elle contrôle l'endroit vers lequel les utilisateurs sont dirigés lorsqu'ils cliquent sur une ligne de fournisseur. Le rappel reçoit les données du fournisseur afin que vous puissiez naviguer vers la page de modification appropriée.

    **Propriétés :**

    * `disabled`—Désactive la navigation au clic sur une ligne
    * `onBefore(provider)`—S’exécute avant la navigation. Retournez `false` pour empêcher la navigation (par exemple, lors de vérifications d’accès conditionnel).
    * `onAfter(provider)`—S’exécute une fois que `onBefore` a réussi. Utilisez cette fonction pour accéder à la page de modification avec les données du fournisseur.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // Rediriger vers la page de modification avec l’ID du fournisseur
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Effectuer un suivi analytique lors de la sélection d’un fournisseur
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

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

    Les props d'affichage déterminent la façon dont le composant est rendu sans affecter 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 actions du tableau. 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>

        <tr>
          <td>
            <code>hideDeleteProvider</code>
          </td>

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

          <td>
            Masque l’action de suppression du fournisseur. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideRemoveFromOrganization</code>
          </td>

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

          <td>
            Masque l’action de retrait du fournisseur de l’organisation. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    Les props d’action gèrent les interactions de l’utilisateur au-delà de la navigation de base. Elles régissent les opérations de suppression, de retrait et d’activation/désactivation.

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

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

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

          <td>
            Supprime définitivement le fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

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

          <td>
            Retire le fournisseur de l’organisation.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

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

          <td>
            Bascule permettant d’activer ou de désactiver le fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle la suppression définitive d'un fournisseur SSO. Cette opération est destructrice : le fournisseur est entièrement supprimé de votre tenant Auth0.

    **Propriétés :**

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

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle le retrait d'un fournisseur de l'Organization sans le supprimer du locataire. Le fournisseur demeure disponible et peut être ajouté de nouveau plus tard.

    **Propriétés :**

    * `disabled`—Désactive l’option de suppression
    * `onBefore(provider)`—S’exécute avant le retrait. Retournez `false` pour empêcher le retrait (par exemple, afin d’afficher une confirmation).
    * `onAfter(provider)`—S’exécute une fois que le fournisseur a été retiré de l’organisation.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle la bascule d'activation ou de désactivation des fournisseurs. Les fournisseurs désactivés demeurent configurés, mais les utilisateurs ne peuvent pas s'authentifier par leur intermédiaire.

    **Propriétés :**

    * `disabled`—Désactive la bascule
    * `onBefore(provider)`—S’exécute avant la bascule. Retournez `false` pour empêcher le changement d’état.
    * `onAfter(provider)`—S’exécute après l’activation ou la désactivation réussie du Provider.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

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

    <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>SsoProviderTableSchema</code>
          </td>

          <td>
            Validation du champ de confirmation.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            Remplacements de texte i18n.
          </td>
        </tr>

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

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

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

    **schema**

    Définissez des règles de validation personnalisées pour les boîtes de dialogue de confirmation (par exemple, saisir le nom du fournisseur pour confirmer la suppression).

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`

      **delete.providerName**—Confirmation de la suppression définitive
      **remove.providerName**—Confirmation du retrait de l’organisation
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **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.name`, `columns.identity_provider`, `columns.display_name`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`, `actions.enabled_tooltip`, `actions.disabled_tooltip`

      **create\_consent\_modal**—Boîte de dialogue de consentement pour créer un fournisseur

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.process_button_text`

      **delete\_modal**—Confirmation de suppression

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove\_modal**—Confirmation du retrait de l’organisation

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

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

      * `general_error`, `fetch_providers_error`, `fetch_domains_error`
      * `domain_create.success`, `domain_create.error`, `domain_create.on_before`
      * `domain_verify.success`, `domain_verify.error`, `domain_verify.on_before`, `domain_verify.verification_failed`
      * `domain_delete.success`, `domain_delete.error`
      * `domain_associate_provider.success`, `domain_associate_provider.error`, `domain_associate_provider.on_before`
      * `domain_delete_provider.success`, `domain_delete_provider.error`, `domain_delete_provider.on_before`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
      }}
    />
    ```

    ***

    **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 mise en forme disponibles">
      **Variables**—propriétés CSS personnalisées

      * `common`—Appliqué à tous les thèmes
      * `light`—Thème clair seulement
      * `dark`—Thème sombre seulement

      **Classes**—surcharges des classes de composants

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-tableActions`
      * `SsoProviderTable-deleteProviderModal`
      * `SsoProviderTable-deleteProviderFromOrganizationModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-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.

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

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderTable</code>
          </td>

          <td>Récupération et gestion de la liste des fournisseurs</td>
        </tr>
      </tbody>
    </table>
  </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="installation-2">
      Installation
    </h2>

    <CodeGroup>
      ```bash npm (Recommended) 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 npm ou pnpm 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">
      Démarrage
    </h2>

    ```tsx page.tsx wrap lines theme={null}
    import { SsoProviderTable } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function ProvidersPage() {
      const router = useRouter();

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => router.push("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => router.push(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderTable } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";
      import { analytics } from "./lib/analytics";

      function ProvidersManagementPage() {
        const router = useRouter();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  router.push("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  router.push(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default ProvidersManagementPage;
      ```
    </Accordion>

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

    <h3 id="core-props">
      Props principales
    </h3>

    Les props principales sont essentielles au fonctionnement du composant. `SsoProviderTable` nécessite les deux actions de navigation pour gérer le flux de travail typique de gestion des fournisseurs.

    <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\<void></code>
          </td>

          <td>
            <strong>Obligatoire.</strong> Permet d’accéder à la création d’un fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

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

          <td>
            <strong>Obligatoire.</strong> Permet d’accéder à la modification d’un fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type :** `ComponentAction<void>`

    La propriété `createAction` est requise, car elle contrôle où les utilisateurs sont dirigés lorsqu'ils cliquent sur « Ajouter un fournisseur ». Sans cela, le tableau ne saurait pas comment lancer le processus de création du fournisseur.

    **Propriétés :**

    * `disabled`—Désactive le bouton "Ajouter un fournisseur"
    * `onBefore()`—S’exécute avant la navigation. Retournez `false` pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les permissions requises).
    * `onAfter()`—S’exécute une fois que `onBefore` a réussi. Utilisez cette fonction pour accéder à votre page de création ou suivre les données analytiques.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // Naviguer vers la page de création
    createAction={{
      onAfter: () => router.push("/providers/create"),
    }}

    // Vérifier les permissions avant d'autoriser la création
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => router.push("/providers/create"),
    }}

    // Suivre les données analytiques à l'intention de création
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        router.push("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type :** `ComponentAction<IdentityProvider>`

    La propriété `editAction` est requise, car elle contrôle l'endroit vers lequel les utilisateurs sont dirigés lorsqu'ils cliquent sur une ligne de fournisseur. Le rappel reçoit les données du fournisseur afin que vous puissiez naviguer vers la page de modification appropriée.

    **Propriétés :**

    * `disabled`—Désactive la navigation au clic sur une ligne
    * `onBefore(provider)`—S’exécute avant la navigation. Retournez `false` pour empêcher la navigation (par exemple, lors de vérifications d’accès conditionnel).
    * `onAfter(provider)`—S’exécute une fois que `onBefore` a réussi. Utilisez cette fonction pour accéder à la page de modification avec les données du fournisseur.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // Accéder à la page de modification avec l'ID du fournisseur
    editAction={{
      onAfter: (provider) => router.push(`/providers/${provider.id}`),
    }}

    // Effectuer un suivi analytique lors de la sélection d’un fournisseur
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        router.push(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    <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. 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 actions du tableau. 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>

        <tr>
          <td>
            <code>hideDeleteProvider</code>
          </td>

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

          <td>
            Masque l’action de suppression du fournisseur. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideRemoveFromOrganization</code>
          </td>

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

          <td>
            Masque l’action de retrait du fournisseur de l’organisation. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    Les props d’action gèrent les interactions de l’utilisateur au-delà de la navigation de base. Elles régissent les opérations de suppression, de retrait et d’activation/désactivation.

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

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

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

          <td>
            Supprime définitivement le fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

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

          <td>
            Retire le fournisseur de l’organisation.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

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

          <td>
            Bascule permettant d’activer ou de désactiver le fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle la suppression définitive d'un fournisseur SSO. Cette opération est destructive : le fournisseur est entièrement supprimé de votre tenant Auth0.

    **Propriétés :**

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

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle le retrait d'un provider de l'organization sans le supprimer du tenant. Le provider demeure disponible et peut être rajouté plus tard.

    **Propriétés :**

    * `disabled`—Désactive l’option de suppression
    * `onBefore(provider)`—S’exécute avant le retrait. Retournez `false` pour empêcher le retrait (par exemple, afin d’afficher une confirmation).
    * `onAfter(provider)`—S’exécute une fois que le fournisseur a été retiré de l’organisation.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle la bascule d’activation ou de désactivation des fournisseurs. Les fournisseurs désactivés demeurent configurés, mais les utilisateurs ne peuvent pas s’authentifier par leur intermédiaire.

    **Propriétés :**

    * `disabled`—Désactive la bascule
    * `onBefore(provider)`—S’exécute avant la bascule. Retournez `false` pour empêcher le changement d’état.
    * `onAfter(provider)`—S’exécute après l’activation ou la désactivation réussie du Provider.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    <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>SsoProviderTableSchema</code>
          </td>

          <td>
            Validation du champ de confirmation.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            Remplacements de texte i18n.
          </td>
        </tr>

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

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

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

    **schéma**

    Définissez des règles de validation personnalisées pour les boîtes de dialogue de confirmation (par exemple, saisir le nom du fournisseur pour confirmer la suppression).

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`

      **delete.providerName**—Confirmation de la suppression définitive
      **remove.providerName**—Confirmation du retrait de l’organisation
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; si aucun n'est fourni, les valeurs par défaut sont utilisées.

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

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

      **table**—Affichage du tableau

      * `empty_message`
      * `columns.name`, `columns.identity_provider`, `columns.display_name`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`, `actions.enabled_tooltip`, `actions.disabled_tooltip`

      **create\_consent\_modal**—Fenêtre modale de consentement à la création d’un fournisseur

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.process_button_text`

      **delete\_modal**—Confirmation de suppression

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove\_modal**—Confirmation du retrait de l’organisation

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

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

      * `general_error`, `fetch_providers_error`, `fetch_domains_error`
      * `domain_create.success`, `domain_create.error`, `domain_create.on_before`
      * `domain_verify.success`, `domain_verify.error`, `domain_verify.on_before`, `domain_verify.verification_failed`
      * `domain_delete.success`, `domain_delete.error`
      * `domain_associate_provider.success`, `domain_associate_provider.error`, `domain_associate_provider.on_before`
      * `domain_delete_provider.success`, `domain_delete_provider.error`, `domain_delete_provider.on_before`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
      }}
    />
    ```

    ***

    **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 mise en forme disponibles">
      **Variables**—propriétés CSS personnalisées

      * `common`—Appliqué à tous les thèmes
      * `light`—Thème clair seulement
      * `dark`—Thème sombre seulement

      **Classes**—surcharges des classes de composants

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-tableActions`
      * `SsoProviderTable-deleteProviderModal`
      * `SsoProviderTable-deleteProviderFromOrganizationModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-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>useSsoProviderTable</code>
          </td>

          <td>Récupération et gestion de la liste des fournisseurs</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="installation-3">
      Installation
    </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/sso-provider-table
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Le CLI shadcn installe également la dépendance `@auth0/universal-components-core`
      pour les utilitaires partagés et l’intégration avec Auth0.
      Nécessite **shadcn CLI v2.5.0+**.
    </Callout>

    <details>
      <summary>Registre Vercel Legacy (déconseillé)</summary>

      Les consommateurs existants peuvent continuer d’utiliser le chemin hébergé par Vercel jusqu’au **17 septembre 2026** :

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

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

    <h2 id="get-started-3">
      Démarrage
    </h2>

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

    export function ProvidersPage() {
      const navigate = useNavigate();

      return (
        <SsoProviderTable
          createAction={{
            onAfter: () => navigate("/providers/create"),
          }}
          editAction={{
            onAfter: (provider) => navigate(`/providers/${provider.id}`),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function ProvidersManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <SsoProviderTable
              createAction={{
                onAfter: () => {
                  analytics.track("Create Provider Started");
                  navigate("/providers/create");
                },
              }}
              editAction={{
                onAfter: (provider) => {
                  analytics.track("Provider Selected", { name: provider.name });
                  navigate(`/providers/${provider.id}`);
                },
              }}
              deleteAction={{
                onBefore: (provider) => {
                  return confirm(
                    `Delete "${provider.display_name}"? This is permanent.`,
                  );
                },
                onAfter: (provider) => {
                  analytics.track("Provider Deleted", { name: provider.name });
                },
              }}
              enableProviderAction={{
                onAfter: (provider) => {
                  analytics.track(
                    provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
                    {
                      name: provider.name,
                    },
                  );
                },
              }}
              customMessages={{
                header: {
                  title: "SSO Providers",
                  description: "Manage identity providers for your organization",
                  create_button_text: "Add New Provider",
                },
                table: {
                  empty_message:
                    "No providers configured yet. Add one to enable SSO.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "SsoProviderTable-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 via la fenêtre contextuelle Universal Login
          >
            <Auth0ComponentProvider>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

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

    <h3 id="core-props-2">
      Props principales
    </h3>

    Les props de base sont essentielles au fonctionnement du composant. `SsoProviderTable` nécessite les deux actions de navigation pour gérer le flux de travail habituel de gestion des fournisseurs.

    <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\<void></code>
          </td>

          <td>
            <strong>Obligatoire.</strong> Permet d’accéder à la création d’un fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

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

          <td>
            <strong>Obligatoire.</strong> Permet d’accéder à la modification d’un fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **Type :** `ComponentAction<void>`

    La propriété `createAction` est requise, car elle détermine où les utilisateurs sont dirigés lorsqu'ils cliquent sur « Ajouter un fournisseur ». Sans elle, le tableau ne saurait pas comment lancer le flux de création du fournisseur.

    **Propriétés :**

    * `disabled`—Désactive le bouton "Ajouter un fournisseur"
    * `onBefore()`—S’exécute avant la navigation. Retournez `false` pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les permissions requises).
    * `onAfter()`—S’exécute une fois que `onBefore` a réussi. Utilisez cette fonction pour accéder à votre page de création ou suivre les données analytiques.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // Naviguer vers la page de création
    createAction={{
      onAfter: () => navigate("/providers/create"),
    }}

    // Vérifier les permissions avant d'autoriser la création
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => navigate("/providers/create"),
    }}

    // Suivre l'analytique au moment de l'intention de création
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

    **Type :** `ComponentAction<IdentityProvider>`

    La propriété `editAction` est requise, car elle contrôle l'endroit vers lequel les utilisateurs sont dirigés lorsqu'ils cliquent sur une ligne de fournisseur. Le rappel reçoit les données du fournisseur afin que vous puissiez naviguer vers la page de modification appropriée.

    **Propriétés :**

    * `disabled`—Désactive la navigation au clic sur une ligne
    * `onBefore(provider)`—S’exécute avant la navigation. Retournez `false` pour empêcher la navigation (par exemple, lors de vérifications d’accès conditionnel).
    * `onAfter(provider)`—S’exécute une fois que `onBefore` a réussi. Utilisez cette fonction pour accéder à la page de modification avec les données du fournisseur.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // Rediriger vers la page de modification avec l’ID du fournisseur
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Effectuer un suivi analytique lors de la sélection d’un fournisseur
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    <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. 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 actions du tableau. 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>

        <tr>
          <td>
            <code>hideDeleteProvider</code>
          </td>

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

          <td>
            Masque l’action de suppression du fournisseur. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideRemoveFromOrganization</code>
          </td>

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

          <td>
            Masque l’action de retrait du fournisseur de l’organisation. 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 de l’utilisateur au-delà de la navigation de base. Elles régissent les opérations de suppression, de retrait et d’activation/désactivation.

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

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

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

          <td>
            Supprime définitivement le fournisseur.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

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

          <td>
            Retire le fournisseur de l’organisation.
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

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

          <td>
            Bascule permettant d’activer ou de désactiver le fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle la suppression définitive d'un fournisseur SSO. Cette opération est destructive : le fournisseur est entièrement supprimé de votre tenant Auth0.

    **Propriétés :**

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

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle le retrait d'un fournisseur de l'Organization sans le supprimer du locataire. Le fournisseur demeure disponible et peut être ajouté de nouveau plus tard.

    **Propriétés :**

    * `disabled`—Désactive l’option de suppression
    * `onBefore(provider)`—S’exécute avant la suppression. Retournez `false` pour empêcher la suppression (par exemple, afin d’afficher une confirmation).
    * `onAfter(provider)`—S’exécute une fois que le fournisseur a été supprimé de l’organisation.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      deleteFromOrganizationAction={{
        onBefore: (provider) => {
          return confirm(
            `Remove "${provider.display_name}" from this organization?`,
          );
        },
        onAfter: (provider) => {
          toast.success(`${provider.display_name} removed from organization`);
        },
      }}
    />
    ```

    ***

    **enableProviderAction**

    **Type :** `ComponentAction<IdentityProvider>`

    Contrôle la bascule d’activation ou de désactivation des fournisseurs. Les fournisseurs désactivés demeurent configurés, mais les utilisateurs ne peuvent pas s’authentifier par leur intermédiaire.

    **Propriétés :**

    * `disabled`—Désactive la bascule
    * `onBefore(provider)`—S’exécute avant la bascule. Retournez `false` pour empêcher le changement d’état.
    * `onAfter(provider)`—S’exécute après l’activation ou la désactivation réussie du Provider.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      enableProviderAction={{
        onBefore: (provider) => {
          if (!provider.is_enabled) {
            return confirm(`Enable "${provider.display_name}" for authentication?`);
          }
          return confirm(
            `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
          );
        },
        onAfter: (provider) => {
          analytics.track(
            provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
            {
              name: provider.name,
            },
          );
        },
      }}
    />
    ```

    ***

    <h3 id="customization-props-3">
      Propriétés 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>SsoProviderTableSchema</code>
          </td>

          <td>
            Validation du champ de confirmation.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            Remplacements de texte i18n.
          </td>
        </tr>

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

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

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

    **schema**

    Définissez des règles de validation personnalisées pour les boîtes de dialogue de confirmation (par exemple, saisir le nom du fournisseur pour confirmer la suppression).

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`

      **delete.providerName**—Confirmation de la suppression définitive
      **remove.providerName**—Confirmation du retrait de l’organisation
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      schema={{
        delete: {
          providerName: {
            regex: /^.+$/,
            errorMessage: "Please type the provider name to confirm",
          },
        },
      }}
    />
    ```

    ***

    **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.name`, `columns.identity_provider`, `columns.display_name`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`, `actions.enabled_tooltip`, `actions.disabled_tooltip`

      **create\_consent\_modal**—Fenêtre modale de consentement pour créer un fournisseur

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.process_button_text`

      **delete\_modal**—Confirmation de suppression

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove\_modal**—Confirmation du retrait de l’organisation

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

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

      * `general_error`, `fetch_providers_error`, `fetch_domains_error`
      * `domain_create.success`, `domain_create.error`, `domain_create.on_before`
      * `domain_verify.success`, `domain_verify.error`, `domain_verify.on_before`, `domain_verify.verification_failed`
      * `domain_delete.success`, `domain_delete.error`
      * `domain_associate_provider.success`, `domain_associate_provider.error`, `domain_associate_provider.on_before`
      * `domain_delete_provider.success`, `domain_delete_provider.error`, `domain_delete_provider.on_before`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      customMessages={{
        header: {
          title: "Identity Providers",
          description: "Manage SSO connections for your organization",
          create_button_text: "Add Provider",
        },
        table: {
          empty_message:
            "No SSO providers configured. Add one to enable single sign-on.",
        },
      }}
    />
    ```

    ***

    **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 mise en forme disponibles">
      **Variables**—propriétés CSS personnalisées

      * `common`—Appliqué à tous les thèmes
      * `light`—Thème clair seulement
      * `dark`—Thème sombre seulement

      **Classes**—surcharges des classes de composants

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-tableActions`
      * `SsoProviderTable-deleteProviderModal`
      * `SsoProviderTable-deleteProviderFromOrganizationModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderTable
      createAction={{ onAfter: () => navigate("/providers/create") }}
      editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.25rem",
          },
          light: {
            "--color-primary": "#4f46e5",
          },
        },
        classes: {
          "SsoProviderTable-header": "mb-6",
          "SsoProviderTable-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>useSsoProviderTable</code>
          </td>

          <td>Récupération et gestion de la liste des fournisseurs</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>