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

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

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

    ## Installation

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

    ## Démarrage

    ```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 complet d’intégration">
      ```tsx wrap 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 traiter les challenges d'authentification renforcée au moyen du popup Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Props requis

    Les props obligatoires sont essentiels au fonctionnement du composant. `SsoProviderTable` exige les deux actions de navigation afin de prendre en charge le workflow habituel de gestion des Providers.

    <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 redirigés lorsqu'ils cliquent sur « Add Provider ». Sans elle, la table ne saurait pas comment amorcer le flow de création du Provider.

    **Propriétés :**

    * `disabled`—Désactive le bouton « Add Provider »
    * `onBefore()`—S’exécute avant la navigation. Retournez `false` pour empêcher la navigation (par exemple, si l’utilisateur n’a pas les autorisations nécessaires).
    * `onAfter()`—S’exécute une fois que `onBefore` a réussi. Utilisez cette fonction pour accéder à votre page de création ou effectuer le suivi analytique.

    **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 détermine vers où les utilisateurs sont dirigés lorsqu'ils cliquent sur la row d'un Provider. Le callback reçoit les données du Provider, ce qui vous permet de rediriger vers la bonne page de modification.

    **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 naviguer vers 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 Provider
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Suivre les données analytiques à la sélection du Provider
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### 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>Prop</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 de la table. Valeur 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. Valeur par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### Props de l'Action

    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 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 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 une fois le fournisseur activé ou désactivé avec succès.

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

    ***

    ### 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>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 des textes d’internationalisation.
          </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` et `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 l'ensemble des textes et des 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.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_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

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </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.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **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ées à tous les thèmes
      * `light`—Thème clair uniquement
      * `dark`—Thème sombre uniquement

      **Classes**—surcharges de classes de composants

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

    Le composant `SsoProviderTable` se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de gestion des fournisseurs 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 des interfaces personnalisées de gestion des fournisseurs. C'est utile lorsque vous devez intégrer la table dans une autre mise en page ou personnaliser le rendu des rangées.

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

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Ligne d’un fournisseur avec actions</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

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

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Fenêtre modale de confirmation du retrait de l’organisation</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Composant de bascule d’activation/désactivation</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Composant d’affichage de l’icône de stratégie (Okta, SAML, etc.)</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 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>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>État de l’interface et gestionnaires d’interaction (modales, actions)</td>
        </tr>
      </tbody>
    </table>
  </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>

    ## Installation

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

    ## Pour commencer

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

    ## Props

    ### Props principales

    Les props de base sont essentielles au fonctionnement du composant. `SsoProviderTable` exige les deux actions de navigation afin de prendre en charge le workflow habituel de gestion des Providers.

    <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 vers quelle page les utilisateurs sont dirigés lorsqu'ils cliquent sur "Add Provider". Sans elle, la table ne saurait pas comment amorcer le flow de création du Provider.

    **Propriétés :**

    * `disabled`—Désactive le bouton "Ajouter un Provider"
    * `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 effectuer un suivi analytique.

    **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 détermine vers quelle page les utilisateurs sont dirigés lorsqu'ils cliquent sur la ligne d'un fournisseur. Le callback reçoit les données du fournisseur, ce qui vous permet de rediriger vers la bonne page de modification.

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

    // Suivre les données analytiques à 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}`);
      },
    }}
    ```

    ***

    ### Props d'affichage

    Les props d'affichage déterminent la façon dont le composant est rendu, sans influer sur 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>
      </tbody>
    </table>

    ***

    ### Props de l'Action

    Les props d'action gèrent les interactions de l'utilisateur au-delà de la navigation de base. Ce sont elles qui 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 Delete
    * `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 Provider. 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 pourra ê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 bien été supprimé 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/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,
            },
          );
        },
      }}
    />
    ```

    ***

    ### 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>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 textes i18n.
          </td>
        </tr>

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

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

          <td>
            Variables CSS et substitutions 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 Provider pour confirmer la suppression).

    <Accordion title="Champs disponibles du schéma">
      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; 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.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_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

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </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.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **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 offertes">
      **Variables**—propriétés CSS personnalisées

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

      **Classes**—surcharges de classes de composants

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

    Le composant `SsoProviderTable` se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement afin de créer des workflows personnalisés de gestion des fournisseurs.

    ### Sous-composants disponibles

    Pour les cas d'utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces de gestion des fournisseurs personnalisées. C'est utile lorsque vous devez intégrer la table dans une autre mise en page ou personnaliser le rendu des lignes.

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

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Ligne individuelle de fournisseur avec actions</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

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

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Fenêtre modale de confirmation du retrait d’une organisation</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Composant de bascule d’activation et de désactivation</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Composant d’affichage d’icônes de stratégie (Okta, SAML, etc.)</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 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 Provider</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>État des interactions de l’interface utilisateur et handlers (modales, actions)</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>

    ## Installation

    ```bash wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-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
      qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

    ## Commencer

    ```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 wrap 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 traiter les challenges d'authentification renforcée par le popup Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Props principaux

    Les props principales sont essentielles au fonctionnement du composant. `SsoProviderTable` exige les deux actions de navigation afin de prendre en charge le workflow habituel de gestion des Providers.

    <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 Provider.
          </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 Provider.
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

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

    La propriété `createAction` est requise, car elle détermine vers où les utilisateurs sont dirigés lorsqu'ils cliquent sur "Add Provider". Sans elle, la table ne saurait pas comment amorcer le flow de création du Provider.

    **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 les données analytiques à l'intention de création
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

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

    La propriété `editAction` est obligatoire, car elle détermine vers quelle page les utilisateurs sont dirigés lorsqu'ils cliquent sur la row d'un Provider. Le callback reçoit les données du Provider, ce qui vous permet de rediriger vers la bonne page de modification.

    **Propriétés :**

    * `disabled`—Désactive la navigation lorsqu’on clique 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 après l’exécution réussie de `onBefore`. 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 Provider
    editAction={{
      onAfter: (provider) => navigate(`/providers/${provider.id}`),
    }}

    // Suivre les données analytiques à la sélection du Provider
    editAction={{
      onAfter: (provider) => {
        analytics.track("Provider Selected", {
          id: provider.id,
          name: provider.name,
          strategy: provider.strategy,
        });
        navigate(`/providers/${provider.id}`);
      },
    }}
    ```

    ***

    ### Props d'affichage

    Les props d'affichage déterminent la façon dont le composant est rendu, sans en modifier le 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 de la table. 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 de l'utilisateur au-delà de la navigation de base. Elles régissent les opérations de suppression, de retrait ainsi que d'activation et de 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 Supprimer
    * `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 Provider de l'organization sans le supprimer du tenant. Le Provider 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, pour afficher une demande de confirmation).
    * `onAfter(provider)`—S’exécute après la suppression réussie du fournisseur 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 entremise.

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

    ***

    ### 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>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 Provider pour confirmer la suppression).

    <Accordion title="Champs disponibles du schéma">
      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.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_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 de retrait de l’organisation

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

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

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </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.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **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-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

    Le composant `SsoProviderTable` se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de gestion des fournisseurs si vous utilisez shadcn.

    ### Sous-composants disponibles

    Pour les cas d'utilisation avancés, vous pouvez importer les sous-composants individuellement afin de créer des interfaces de gestion des fournisseurs sur mesure. C'est utile lorsque vous devez intégrer la table dans un autre layout ou personnaliser le rendu des rows.

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

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>Ligne d’un fournisseur avec actions</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>Fenêtre de confirmation de la suppression définitive</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>Fenêtre de confirmation du retrait de l’organisation</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>Composant de bascule d’activation et de désactivation</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>Composant d’affichage des icônes de stratégie (Okta, SAML, etc.)</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>useSsoProviderTable</code>
          </td>

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

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>État des interactions de l’interface utilisateur et handlers (boîtes de dialogue, actions)</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>