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

# Modifier les fournisseurs SSO sur le Web

> Interface à onglets permettant de modifier les fournisseurs SSO : paramètres SSO, provisionnement (SCIM) et gestion des domaines

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 `SsoProviderEdit` offre une interface unifiée permettant de modifier les fournisseurs de [Single Sign-On](/docs/fr-ca/authenticate/enterprise-connections/self-service-enterprise-configuration).

<ComponentLoader componentSelector="sso-provider-edit" componentPreviewText="Aperçu du composant de modification de fournisseur SSO" />

<h2 id="third-party-application-access-and-cross-app-access">
  Accès des applications tierces et accès interapplications
</h2>

Ces contrôles s’affichent uniquement lorsque l’organisation dispose d’un accès complet à la connexion SSO. Pour les connexions dont l’accès est restreint, les deux champs sont masqués.

**`use_for_third_party_client_access`** permet aux applications tierces d’utiliser la connexion. Lorsque la politique `third_party_client_access` de l’organisation est définie sur `"block"`, cette case à cocher demeure visible, mais est désactivée — un message explicatif invite l’administrateur à d’abord activer l’accès des tiers au niveau de l’organisation.

**`cross_app_access_resource_app`** configure l’accès interapplications (XAA). Il est disponible directement pour les connexions OIDC et Okta, et pour les connexions SAML au moyen d’une URL de découverte OIDC qui doit d’abord être fournie. Sa disponibilité est déterminée par `GET /my-org/config/identity-providers` — lorsque la configuration `cross_app_access_resource_app` de la stratégie est absente, la section ne s’affiche pas.

XAA constitue une voie d’autorisation distincte et contourne les deux contrôles d’accès des tiers : la politique `third_party_client_access` au niveau de l’organisation et le paramètre `use_for_third_party_client_access` au niveau de la connexion.

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise** — Assurez-vous que votre tenant est configuré avec l’API My Organization. [Consulter 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 commande installe également la dépendance @auth0/universal-components-core
      qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

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

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

    export function EditProviderPage() {
      const { providerId } = useParams();
      const navigate = useNavigate();

      return (
        <SsoProviderEdit
          providerId={providerId}
          backButton={{
            onClick: () => navigate("/providers"),
          }}
          sso={{
            updateAction: {
              onAfter: () => console.log("Provider updated"),
            },
          }}
        />
      );
    }
    ```

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

      function EditProviderPage() {
        const { providerId } = useParams();
        const navigate = useNavigate();

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderEdit
              providerId={providerId}
              backButton={{
                onClick: () => navigate("/providers"),
              }}
              sso={{
                updateAction: {
                  onAfter: (provider) => {
                    analytics.track("Provider Updated", { name: provider.name });
                    toast.success("Provider configuration saved");
                  },
                },
                deleteAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Permanently delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                },
                deleteFromOrganizationAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Remove "${provider.display_name}" from this organization?`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider removed from organization");
                    navigate("/providers");
                  },
                },
              }}
              provisioning={{
                createAction: {
                  onAfter: () => toast.success("SCIM provisioning enabled"),
                },
                createScimTokenAction: {
                  onAfter: () =>
                    toast.info("Copy your SCIM token - it won't be shown again"),
                },
              }}
              domains={{
                verifyAction: {
                  onAfter: (domain) => {
                    toast.success(`${domain.domain} verified`);
                  },
                },
                deleteAction: {
                  onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
                },
              }}
              customMessages={{
                tabs: {
                  sso: "Configuration",
                  provisioning: "User Sync (SCIM)",
                  domains: "Linked Domains",
                },
              }}
              styling={{
                variables: {
                  common: { "--color-primary": "#059669" },
                },
              }}
            />
          </div>
        );
      }

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

        return (
          <Auth0Provider
            domain={domain}
            clientId="your-client-id"
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Requis pour gérer les challenges d’authentification renforcée au moyen de la fenêtre contextuelle Universal Login
          >
            <Auth0ComponentProvider>
              <EditProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

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

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

    Les props requises sont essentielles au fonctionnement du composant. `SsoProviderEdit` nécessite l’ID du fournisseur pour charger et modifier le bon fournisseur.

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

      <tbody>
        <tr>
          <td>
            <code>providerId</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>
            <strong>Obligatoire.</strong> L’ID du fournisseur SSO à modifier.
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="display-props">
      Propriétés d’affichage
    </h3>

    Les props d’affichage déterminent la façon dont le composant est rendu, sans en modifier le comportement.

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

      <tbody>
        <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>hideProvisioningTab</code>
          </td>

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

          <td>
            Masque l’onglet Fourniture (SCIM). 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 de l’organisation. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideAttributeMappings</code>
          </td>

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

          <td>
            Masque la section de mappage des attributs. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    Les interactions de l'utilisateur dans les trois onglets sont gérées par plusieurs props d'action regroupées sous le nom de l'onglet correspondant (`sso`, `provisioning` et `domains`).

    <table class="table">
      <thead>
        <tr>
          <th>Props</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>

        <tr>
          <td>
            <code>sso</code>
          </td>

          <td>
            <code>SsoProviderTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet SSO. <a href="#sso-tab-actions">Détails</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>provisioning</code>
          </td>

          <td>
            <code>SsoProvisioningTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet Provisioning.
            <a href="#provisioning-tab-actions">Détails</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>domains</code>
          </td>

          <td>
            <code>SsoDomainsTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet Domaines. <a href="#domains-tab-actions">Détails</a>
          </td>
        </tr>
      </tbody>
    </table>

    **backButton**

    **Type :** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    Configure le bouton Retour dans l’en-tête du composant. Utilisez-le pour revenir à votre liste de fournisseurs.

    **Propriétés :**

    * `icon`—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
    * `onClick`—Gestionnaire de clic pour la navigation

    **Exemple :**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/providers"),
      }}
    />;
    ```

    ***

    <h3 id="sso-tab-actions">
      Actions de l’onglet SSO
    </h3>

    La propriété `sso` configure les actions de l’onglet des paramètres SSO. Cet onglet gère la configuration d’authentification du fournisseur.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>updateAction</code>
          </td>

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

          <td>
            Mettre à jour les paramètres du fournisseur.
          </td>
        </tr>

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

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

          <td>
            Supprimer définitivement le fournisseur du tenant.
          </td>
        </tr>

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

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

          <td>
            Retirer le fournisseur de l’organisation sans le supprimer du tenant.
          </td>
        </tr>
      </tbody>
    </table>

    **sso.updateAction**

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

    Contrôle l’enregistrement des modifications apportées à la configuration du fournisseur (ID client, secrets, certificats, etc.).

    **Propriétés :**

    * `disabled`—Désactive le bouton Enregistrer
    * `onBefore(provider)`—S’exécute avant la mise à jour. Retournez `false` pour empêcher l’enregistrement (par exemple, afin d’afficher une boîte de dialogue de confirmation).
    * `onAfter(provider, result)`—S’exécute après la mise à jour réussie du fournisseur. Utilisez cette fonction pour afficher une notification ou suivre l’événement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      sso={{
        updateAction: {
          onBefore: (provider) => {
            return confirm("Save changes to provider configuration?");
          },
          onAfter: (provider) => {
            toast.success("Provider configuration saved");
            analytics.track("Provider Updated", { name: provider.name });
          },
        },
      }}
    />
    ```

    ***

    **sso.deleteAction**

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

    Contrôle la suppression définitive du fournisseur de votre tenant Auth0. Cette action est irréversible.

    **Exemple :**

    ```tsx wrap lines theme={null}
    sso={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    **sso.deleteFromOrganizationAction**

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

    Contrôle la suppression du fournisseur de l’organisation. Le fournisseur est détaché de l’organisation mais reste présent dans le locataire et peut être réajouté ultérieurement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    sso={{
      deleteFromOrganizationAction: {
        onBefore: (provider) => {
          return confirm(`Remove "${provider.display_name}" from this organization?`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    <h3 id="provisioning-tab-actions">
      Actions de l’onglet Provisioning
    </h3>

    La prop `provisioning` configure les actions de l’onglet de provisionnement SCIM. Cet onglet gère le provisionnement automatisé des utilisateurs au moyen du protocole SCIM.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

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

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

          <td>
            Activer le provisionnement SCIM.
          </td>
        </tr>

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

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

          <td>
            Désactiver le provisionnement SCIM.
          </td>
        </tr>

        <tr>
          <td>
            <code>createScimTokenAction</code>
          </td>

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

          <td>
            Générer un jeton SCIM.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteScimTokenAction</code>
          </td>

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

          <td>
            Révoquer le jeton SCIM.
          </td>
        </tr>
      </tbody>
    </table>

    **provisioning.createAction**

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

    Active le provisionnement SCIM pour le fournisseur. Une fois activé, vous pouvez générer un jeton SCIM que votre fournisseur d’identité pourra utiliser.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      createAction: {
        onBefore: (provider) => {
          return confirm("Enable SCIM provisioning for this provider?");
        },
        onAfter: (provider, config) => {
          toast.success("SCIM provisioning enabled");
          console.log("SCIM endpoint:", config.scim_endpoint);
        },
      },
    }}
    ```

    ***

    **provisioning.deleteAction**

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

    Désactive le provisionnement SCIM et supprime toute la configuration de provisionnement associée à ce fournisseur d’identité.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
        },
        onAfter: () => toast.success("SCIM provisioning disabled"),
      },
    }}
    ```

    ***

    **provisioning.createScimTokenAction**

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

    Génère un nouveau jeton porteur SCIM permettant à votre fournisseur d’identité de s’authentifier auprès d’Auth0.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      createScimTokenAction: {
        onAfter: (provider, tokenResponse) => {
          // Le jeton ne s’affiche qu’une seule fois : l’utilisateur doit le copier immédiatement
          console.log("New SCIM token generated");
        },
      },
    }}
    ```

    ***

    **provisioning.deleteScimTokenAction**

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

    Révoque le jeton SCIM. Le fournisseur d’identité ne pourra plus synchroniser les utilisateurs tant qu’un nouveau jeton n’aura pas été généré.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteScimTokenAction: {
        onBefore: () => {
          return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
        },
      },
    }}
    ```

    ***

    <h3 id="domains-tab-actions">
      Actions de l’onglet Domaines
    </h3>

    La prop `domains` configure les actions de l’onglet Domaines. Cet onglet gère les domaines associés au fournisseur afin d’acheminer automatiquement les utilisateurs.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

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

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

          <td>
            Ajouter un domaine.
          </td>
        </tr>

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

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

          <td>
            Vérifier la propriété du domaine.
          </td>
        </tr>

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

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

          <td>
            Supprimer un domaine.
          </td>
        </tr>

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

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

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

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

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

          <td>
            Retirer le domaine du fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

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

    Permet de contrôler l’ajout de nouveaux domaines à l’organisation depuis l’interface de modification du fournisseur.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      createAction: {
        onAfter: (domain) => {
          toast.success(`Domain ${domain.domain} added`);
        },
      },
    }}
    ```

    ***

    **domains.verifyAction**

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

    Contrôle la vérification du domaine au moyen d’un enregistrement TXT DNS.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      verifyAction: {
        onBefore: (domain) => {
          return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully`);
        },
      },
    }}
    ```

    ***

    **domains.deleteAction**

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

    Contrôle la suppression du domaine.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      deleteAction: {
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}?`);
        },
      },
    }}
    ```

    ***

    **domains.associateToProviderAction**

    **Type :** `ComponentAction<Domain, IdentityProvider | null>`

    Associe un domaine vérifié à ce fournisseur SSO afin d’acheminer automatiquement les utilisateurs.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      associateToProviderAction: {
        onAfter: (domain, provider) => {
          console.log(`${domain.domain} now routes to ${provider?.name}`);
        },
      },
    }}
    ```

    ***

    **domains.deleteFromProviderAction**

    **Type :** `ComponentAction<Domain, IdentityProvider | null>`

    Supprime l’association entre un domaine et ce fournisseur.

    ***

    <h3 id="customization-props">
      Propriétés de personnalisation
    </h3>

    Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à vos paramètres régionaux 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>SsoProviderEditSchema</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderEditMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling\<SsoProviderEditClasses></code>
          </td>

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

    **schema**

    Définissez des règles de validation personnalisées pour les champs fournisseur et domaine.

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

      **provider.**\*—Champs de configuration du fournisseur par stratégie

      * Communs : `name`, `displayName`
      * Champs propres à la stratégie (identiques à ceux de SsoProviderCreate)

      **domains.create.domainUrl**—Validation de l’URL du domaine
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      schema={{
        provider: {
          displayName: {
            required: true,
            maxLength: 100,
          },
        },
        domains: {
          create: {
            domainUrl: {
              regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
              errorMessage: "Enter a valid domain (example.com)",
            },
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut s’ils ne sont pas renseignés.

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

      * `title`, `back_button_text`

      **tabs**—Libellés et contenu des onglets

      * `tabs.sso.name`—Libellé de l’onglet SSO
      * `tabs.sso.content`—Messages de l’onglet SSO
        * `details.third_party_access`—`title`, `label`, `helper_text`
        * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper`
        * `title`, `description`
        * `fields.*`—Libellés des champs du formulaire selon la stratégie
        * `actions.save_button_text`, `actions.delete_button_text`
        * `delete_modal.*`, `remove_modal.*`
      * `tabs.provisioning.name`—Libellé de l’onglet Provisioning
      * `tabs.domains.name`—Libellé de l’onglet Domaines

      **provisioning\_tab**—Onglet Provisioning

      * `title`, `description`
      * `scim_endpoint.label`, `scim_token.label`
      * `actions.enable_button_text`, `actions.disable_button_text`
      * `actions.generate_token_button_text`, `actions.revoke_token_button_text`

      **domains\_tab**—Onglet des domaines

      * `title`, `description`
      * Même structure que les messages de DomainTable

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

      * `provider_update_success`, `provider_delete_success`
      * `provisioning_enable_success`, `provisioning_disable_success`
      * `scim_token_create_success`, `scim_token_delete_success`
      * Notifications liées aux domaines
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      customMessages={{
        header: {
          title: "Edit Provider",
        },
        tabs: {
          sso: {
            name: "Settings",
            content: {
              details: {
                third_party_access: {
                  title: "Third-Party Application Access",
                  label: "Allow this provider to be used by third-party applications",
                  helper_text: "External applications can authenticate users through this provider.",
                },
                cross_app_access: {
                  title: "Cross App Access",
                  label: "Allow this provider to authorize access to this Resource Application",
                  helper_text: "Accept authorizations from this provider to issue API access tokens.",
                  domain_verification_text: "The OIDC issuer domain must be verified.",
                  saml_description: "Provide the identity provider's OpenID Connect Configuration.",
                  saml_discovery_url_label: "OIDC Issuer or Discovery URL",
                  saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
                },
              },
              actions: {
                save_button_text: "Save Changes",
              },
            },
          },
          provisioning: { name: "User Sync" },
          domains: { name: "Domains" },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **mise en forme**

    Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Prend en charge le style adapté au thème.

    <Accordion title="Options de mise en forme offertes">
      **Variables**—propriétés CSS personnalisées

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

      **Classes**—surcharges de classes de composants

      * `SsoProviderEdit-header`
      * `SsoProviderEdit-tabs`
      * `ProviderConfigure-ThirdPartyAccess`
      * `ProviderConfigure-CrossAppAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "SsoProviderEdit-tabs": "border-b border-gray-200",
        },
      }}
    />
    ```

    ***

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

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

    Ces hooks fournissent la logique sous-jacente, sans interface utilisateur. 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>useSsoProviderEdit</code>
          </td>

          <td>Logique de chargement et de mise à jour du fournisseur</td>
        </tr>

        <tr>
          <td>
            <code>useSsoDomainTab</code>
          </td>

          <td>Gestion des associations de domaines</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 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>

    <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">
      Pour commencer
    </h2>

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

    export function EditProviderPage({ providerId }) {
      const router = useRouter();

      return (
        <SsoProviderEdit
          providerId={providerId}
          backButton={{
            onClick: () => router.push("/providers"),
          }}
          sso={{
            updateAction: {
              onAfter: () => console.log("Provider updated"),
            },
          }}
        />
      );
    }
    ```

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

      function EditProviderPage() {
        const router = useRouter();
        const searchParams = useSearchParams();
        const providerId = searchParams.get("id");

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderEdit
              providerId={providerId}
              backButton={{
                onClick: () => router.push("/providers"),
              }}
              sso={{
                updateAction: {
                  onAfter: (provider) => {
                    analytics.track("Provider Updated", { name: provider.name });
                    toast.success("Provider configuration saved");
                  },
                },
                deleteAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Permanently delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                },
                deleteFromOrganizationAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Remove "${provider.display_name}" from this organization?`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider removed from organization");
                    router.push("/providers");
                  },
                },
              }}
              provisioning={{
                createAction: {
                  onAfter: () => toast.success("SCIM provisioning enabled"),
                },
                createScimTokenAction: {
                  onAfter: () =>
                    toast.info("Copy your SCIM token - it won't be shown again"),
                },
              }}
              domains={{
                verifyAction: {
                  onAfter: (domain) => {
                    toast.success(`${domain.domain} verified`);
                  },
                },
                deleteAction: {
                  onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
                },
              }}
              customMessages={{
                tabs: {
                  sso: "Configuration",
                  provisioning: "User Sync (SCIM)",
                  domains: "Linked Domains",
                },
              }}
              styling={{
                variables: {
                  common: { "--color-primary": "#059669" },
                },
              }}
            />
          </div>
        );
      }

      export default EditProviderPage;
      ```
    </Accordion>

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

    <h3 id="core-props">
      Props de base
    </h3>

    Les props de base sont essentielles au fonctionnement du composant. `SsoProviderEdit` requiert l’ID du fournisseur pour charger et modifier le bon fournisseur.

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

      <tbody>
        <tr>
          <td>
            <code>providerId</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>
            <strong>Obligatoire.</strong> L’ID du fournisseur SSO à modifier.
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    Les props d’affichage déterminent la façon dont le composant est rendu, sans en modifier le comportement.

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

      <tbody>
        <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>hideProvisioningTab</code>
          </td>

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

          <td>
            Masque l’onglet Provisioning (SCIM). 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 permettant de retirer le fournisseur de l’organisation. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideAttributeMappings</code>
          </td>

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

          <td>
            Masque la section de mappage des attributs. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    Les interactions de l'utilisateur dans les trois onglets sont gérées par plusieurs props d'action regroupées sous le nom de l'onglet correspondant (`sso`, `provisioning` et `domains`).

    <table class="table">
      <thead>
        <tr>
          <th>Props</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>

        <tr>
          <td>
            <code>sso</code>
          </td>

          <td>
            <code>SsoProviderTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet SSO. <a href="#sso-tab-actions">Détails</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>provisioning</code>
          </td>

          <td>
            <code>SsoProvisioningTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet Provisioning.
            <a href="#provisioning-tab-actions">Détails</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>domains</code>
          </td>

          <td>
            <code>SsoDomainsTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet Domaines. <a href="#domains-tab-actions">Détails</a>
          </td>
        </tr>
      </tbody>
    </table>

    **backButton**

    **Type :** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    Configure le bouton Retour dans l’en-tête du composant. Utilisez-le pour revenir à votre liste de fournisseurs.

    **Propriétés :**

    * `icon`—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
    * `onClick`—Gestionnaire de clic pour la navigation

    **Exemple :**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        icon: ChevronLeft,
        onClick: () => router.push("/providers"),
      }}
    />;
    ```

    ***

    <h3 id="sso-tab-actions-2">
      Actions de l’onglet SSO
    </h3>

    La propriété `sso` configure les actions de l’onglet des paramètres SSO. Cet onglet gère la configuration d’authentification du fournisseur.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>updateAction</code>
          </td>

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

          <td>
            Mettre à jour les paramètres du fournisseur.
          </td>
        </tr>

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

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

          <td>
            Supprimer définitivement le fournisseur du tenant.
          </td>
        </tr>

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

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

          <td>
            Retirer le fournisseur de l’organisation sans le supprimer du tenant.
          </td>
        </tr>
      </tbody>
    </table>

    **sso.updateAction**

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

    Contrôle l’enregistrement des modifications apportées à la configuration du fournisseur (ID client, secrets, certificats, etc.).

    **Propriétés :**

    * `disabled`—Désactive le bouton Enregistrer
    * `onBefore(provider)`—S’exécute avant la mise à jour. Retournez `false` pour empêcher l’enregistrement (par exemple, afin d’afficher une boîte de dialogue de confirmation).
    * `onAfter(provider, result)`—S’exécute une fois le fournisseur mis à jour. Utilisez cette fonction pour afficher une notification ou suivre l’événement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      sso={{
        updateAction: {
          onBefore: (provider) => {
            return confirm("Save changes to provider configuration?");
          },
          onAfter: (provider) => {
            toast.success("Provider configuration saved");
            analytics.track("Provider Updated", { name: provider.name });
          },
        },
      }}
    />
    ```

    ***

    **sso.deleteAction**

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

    Contrôle la suppression définitive du fournisseur de votre tenant Auth0. Cette action est irréversible.

    **Exemple :**

    ```tsx wrap lines theme={null}
    sso={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
        },
        onAfter: () => router.push("/providers"),
      },
    }}
    ```

    ***

    **sso.deleteFromOrganizationAction**

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

    Permet de retirer le fournisseur de l’organisation. Le fournisseur est dissocié de l’organisation, mais demeure dans le tenant et peut être ajouté de nouveau ultérieurement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    sso={{
      deleteFromOrganizationAction: {
        onBefore: (provider) => {
          return confirm(`Remove "${provider.display_name}" from this organization?`);
        },
        onAfter: () => router.push("/providers"),
      },
    }}
    ```

    ***

    <h3 id="provisioning-tab-actions-2">
      Actions de l’onglet Provisioning
    </h3>

    La prop `provisioning` configure les actions de l’onglet de provisionnement SCIM. Cet onglet gère le provisionnement automatisé des utilisateurs au moyen du protocole SCIM.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

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

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

          <td>
            Activer le provisionnement SCIM.
          </td>
        </tr>

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

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

          <td>
            Désactiver le provisionnement SCIM.
          </td>
        </tr>

        <tr>
          <td>
            <code>createScimTokenAction</code>
          </td>

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

          <td>
            Générer un jeton SCIM.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteScimTokenAction</code>
          </td>

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

          <td>
            Révoquer le jeton SCIM.
          </td>
        </tr>
      </tbody>
    </table>

    **provisioning.createAction**

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

    Active le provisionnement SCIM pour le fournisseur. Une fois activé, vous pouvez générer un jeton SCIM que votre fournisseur d’identité pourra utiliser.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      createAction: {
        onBefore: (provider) => {
          return confirm("Enable SCIM provisioning for this provider?");
        },
        onAfter: (provider, config) => {
          toast.success("SCIM provisioning enabled");
          console.log("SCIM endpoint:", config.scim_endpoint);
        },
      },
    }}
    ```

    ***

    **provisioning.deleteAction**

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

    Désactive le provisionnement SCIM et supprime toute la configuration de provisionnement associée à ce fournisseur d’identité.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
        },
        onAfter: () => toast.success("SCIM provisioning disabled"),
      },
    }}
    ```

    ***

    **provisioning.createScimTokenAction**

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

    Génère un nouveau jeton porteur SCIM permettant à votre fournisseur d’identité de s’authentifier auprès d’Auth0.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      createScimTokenAction: {
        onAfter: (provider, tokenResponse) => {
          // Le jeton ne s’affiche qu’une seule fois : l’utilisateur doit le copier immédiatement
          console.log("New SCIM token generated");
        },
      },
    }}
    ```

    ***

    **provisioning.deleteScimTokenAction**

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

    Révoque le jeton SCIM. Le fournisseur d’identité ne pourra plus synchroniser les utilisateurs tant qu’un nouveau jeton n’aura pas été généré.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteScimTokenAction: {
        onBefore: () => {
          return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
        },
      },
    }}
    ```

    ***

    <h3 id="domains-tab-actions-2">
      Actions de l’onglet Domaines
    </h3>

    La prop `domains` configure les actions de l’onglet Domaines. Cet onglet gère les domaines associés au fournisseur afin d’acheminer automatiquement les utilisateurs.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

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

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

          <td>
            Ajouter un domaine.
          </td>
        </tr>

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

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

          <td>
            Vérifier la propriété du domaine.
          </td>
        </tr>

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

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

          <td>
            Supprimer un domaine.
          </td>
        </tr>

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

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

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

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

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

          <td>
            Retirer le domaine du fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

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

    Permet de contrôler l’ajout de nouveaux domaines à l’organisation depuis l’interface de modification du fournisseur.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      createAction: {
        onAfter: (domain) => {
          toast.success(`Domain ${domain.domain} added`);
        },
      },
    }}
    ```

    ***

    **domains.verifyAction**

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

    Contrôle la vérification du domaine au moyen d’un enregistrement TXT DNS.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      verifyAction: {
        onBefore: (domain) => {
          return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully`);
        },
      },
    }}
    ```

    ***

    **domains.deleteAction**

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

    Contrôle la suppression du domaine.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      deleteAction: {
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}?`);
        },
      },
    }}
    ```

    ***

    **domains.associateToProviderAction**

    **Type :** `ComponentAction<Domain, IdentityProvider | null>`

    Associe un domaine vérifié à ce fournisseur SSO afin d’acheminer automatiquement les utilisateurs.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains{{
      associateToProviderAction: {
        onAfter: (domain, provider) => {
          console.log(`${domain.domain} now routes to ${provider?.name}`);
        },
      },
    }}
    ```

    ***

    **domains.deleteFromProviderAction**

    **Type :** `ComponentAction<Domain, IdentityProvider | null>`

    Supprime l’association entre un domaine et ce fournisseur.

    ***

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

    Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à vos paramètres régionaux 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>SsoProviderEditSchema</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderEditMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling\<SsoProviderEditClasses></code>
          </td>

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

    **schema**

    Définissez des règles de validation personnalisées pour les champs fournisseur et domaine.

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

      **provider.**\*—Champs de configuration du fournisseur par stratégie

      * Communs : `name`, `displayName`
      * Champs propres à la stratégie (identiques à ceux de SsoProviderCreate)

      **domains.create.domainUrl**—Validation de l’URL du domaine
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      schema={{
        provider: {
          displayName: {
            required: true,
            maxLength: 100,
          },
        },
        domains: {
          create: {
            domainUrl: {
              regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
              errorMessage: "Enter a valid domain (example.com)",
            },
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut s’ils ne sont pas renseignés.

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

      * `title`, `back_button_text`

      **tabs**—Libellés et contenu des onglets

      * `tabs.sso.name`—Libellé de l’onglet SSO
      * `tabs.sso.content`—Messages de l’onglet SSO
        * `details.third_party_access`—`title`, `label`, `helper_text`
        * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper`
        * `title`, `description`
        * `fields.*`—Libellés des champs du formulaire selon la stratégie
        * `actions.save_button_text`, `actions.delete_button_text`
        * `delete_modal.*`, `remove_modal.*`
      * `tabs.provisioning.name`—Libellé de l’onglet de fourniture
      * `tabs.domains.name`—Libellé de l’onglet Domaines

      **provisioning\_tab**—Onglet Provisioning

      * `title`, `description`
      * `scim_endpoint.label`, `scim_token.label`
      * `actions.enable_button_text`, `actions.disable_button_text`
      * `actions.generate_token_button_text`, `actions.revoke_token_button_text`

      **domains\_tab**—Onglet des domaines

      * `title`, `description`
      * Même structure que les messages de DomainTable

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

      * `provider_update_success`, `provider_delete_success`
      * `provisioning_enable_success`, `provisioning_disable_success`
      * `scim_token_create_success`, `scim_token_delete_success`
      * Notifications liées aux domaines
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      customMessages={{
        header: {
          title: "Edit Provider",
        },
        tabs: {
          sso: {
            name: "Settings",
            content: {
              details: {
                third_party_access: {
                  title: "Third-Party Application Access",
                  label: "Allow this provider to be used by third-party applications",
                  helper_text: "External applications can authenticate users through this provider.",
                },
                cross_app_access: {
                  title: "Cross App Access",
                  label: "Allow this provider to authorize access to this Resource Application",
                  helper_text: "Accept authorizations from this provider to issue API access tokens.",
                  domain_verification_text: "The OIDC issuer domain must be verified.",
                  saml_description: "Provide the identity provider's OpenID Connect Configuration.",
                  saml_discovery_url_label: "OIDC Issuer or Discovery URL",
                  saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
                },
              },
              actions: {
                save_button_text: "Save Changes",
              },
            },
          },
          provisioning: { name: "User Sync" },
          domains: { name: "Domains" },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **mise en forme**

    Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Prend en charge le style adapté au thème.

    <Accordion title="Options de mise en forme offertes">
      **Variables**—propriétés CSS personnalisées

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

      **Classes**—surcharges de classes de composants

      * `SsoProviderEdit-header`
      * `SsoProviderEdit-tabs`
      * `ProviderConfigure-ThirdPartyAccess`
      * `ProviderConfigure-CrossAppAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "SsoProviderEdit-tabs": "border-b border-gray-200",
        },
      }}
    />
    ```

    ***

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

          <td>Logique de chargement et de mise à jour du fournisseur</td>
        </tr>

        <tr>
          <td>
            <code>useSsoDomainTab</code>
          </td>

          <td>Gestion des associations de domaines</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 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>

    <h2 id="installation-3">
      Installation
    </h2>

    Installez le composant à l’aide du 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-edit
    ```

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

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

      Les utilisateurs existants peuvent continuer d’utiliser le chemin hébergé 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-edit.json
      ```

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

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

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

    export function EditProviderPage({ providerId }) {
      const navigate = useNavigate();

      return (
        <SsoProviderEdit
          providerId={providerId}
          backButton={{
            onClick: () => navigate("/providers"),
          }}
          sso={{
            updateAction: {
              onAfter: () => console.log("Provider updated"),
            },
          }}
        />
      );
    }
    ```

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

      function EditProviderPage() {
        const { providerId } = useParams();
        const navigate = useNavigate();

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderEdit
              providerId={providerId}
              backButton={{
                onClick: () => navigate("/providers"),
              }}
              sso={{
                updateAction: {
                  onAfter: (provider) => {
                    analytics.track("Provider Updated", { name: provider.name });
                    toast.success("Provider configuration saved");
                  },
                },
                deleteAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Permanently delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                },
                deleteFromOrganizationAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Remove "${provider.display_name}" from this organization?`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider removed from organization");
                    navigate("/providers");
                  },
                },
              }}
              provisioning={{
                createAction: {
                  onAfter: () => toast.success("SCIM provisioning enabled"),
                },
                createScimTokenAction: {
                  onAfter: () =>
                    toast.info("Copy your SCIM token - it won't be shown again"),
                },
              }}
              domains={{
                verifyAction: {
                  onAfter: (domain) => {
                    toast.success(`${domain.domain} verified`);
                  },
                },
                deleteAction: {
                  onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
                },
              }}
              customMessages={{
                tabs: {
                  sso: "Configuration",
                  provisioning: "User Sync (SCIM)",
                  domains: "Linked Domains",
                },
              }}
              styling={{
                variables: {
                  common: { "--color-primary": "#059669" },
                },
              }}
            />
          </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 demandes d’authentification renforcée au moyen de la fenêtre contextuelle de connexion universelle
          >
            <Auth0ComponentProvider>
              <EditProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

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

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

    Les props de base sont essentielles au fonctionnement du composant. `SsoProviderEdit` requiert l’ID du fournisseur pour charger et modifier le bon fournisseur.

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

      <tbody>
        <tr>
          <td>
            <code>providerId</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>
            <strong>Obligatoire.</strong> L’ID du fournisseur SSO à modifier.
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    Les props d’affichage déterminent la façon dont le composant est rendu, sans en modifier le comportement.

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

      <tbody>
        <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>hideProvisioningTab</code>
          </td>

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

          <td>
            Masque l’onglet Fourniture (SCIM). 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 permettant de retirer le fournisseur de l’organisation. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideAttributeMappings</code>
          </td>

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

          <td>
            Masque la section des mappages d’attributs. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    Les interactions de l'utilisateur dans les trois onglets sont gérées par plusieurs props d'action regroupées sous le nom de l'onglet correspondant (`sso`, `provisioning` et `domains`).

    <table class="table">
      <thead>
        <tr>
          <th>Props</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>

        <tr>
          <td>
            <code>sso</code>
          </td>

          <td>
            <code>SsoProviderTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet SSO. <a href="#sso-tab-actions">Détails</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>provisioning</code>
          </td>

          <td>
            <code>SsoProvisioningTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet Provisioning.
            <a href="#provisioning-tab-actions">Détails</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>domains</code>
          </td>

          <td>
            <code>SsoDomainsTabEditProps</code>
          </td>

          <td>
            Actions de l’onglet Domaines. <a href="#domains-tab-actions">Détails</a>
          </td>
        </tr>
      </tbody>
    </table>

    **backButton**

    **Type :** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    Configure le bouton Retour dans l’en-tête du composant. Utilisez-le pour revenir à votre liste de fournisseurs.

    **Propriétés :**

    * `icon`—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
    * `onClick`—Gestionnaire de clic pour la navigation

    **Exemple :**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/providers"),
      }}
    />;
    ```

    ***

    <h3 id="sso-tab-actions-3">
      Actions de l’onglet SSO
    </h3>

    La propriété `sso` configure les actions de l’onglet des paramètres SSO. Cet onglet gère la configuration d’authentification du fournisseur.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>updateAction</code>
          </td>

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

          <td>
            Mettre à jour les paramètres du fournisseur.
          </td>
        </tr>

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

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

          <td>
            Supprimer définitivement le fournisseur du tenant.
          </td>
        </tr>

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

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

          <td>
            Retirer le fournisseur de l’organisation sans le supprimer du tenant.
          </td>
        </tr>
      </tbody>
    </table>

    **sso.updateAction**

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

    Contrôle l’enregistrement des modifications apportées à la configuration du fournisseur (ID client, secrets, certificats, etc.).

    **Propriétés :**

    * `disabled`—Désactive le bouton Enregistrer
    * `onBefore(provider)`—S’exécute avant la mise à jour. Retournez `false` pour empêcher l’enregistrement (par exemple, afin d’afficher une boîte de dialogue de confirmation).
    * `onAfter(provider, result)`—S’exécute après la mise à jour réussie du fournisseur. Utilisez cette fonction pour afficher une notification ou suivre l’événement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      sso={{
        updateAction: {
          onBefore: (provider) => {
            return confirm("Save changes to provider configuration?");
          },
          onAfter: (provider) => {
            toast.success("Provider configuration saved");
            analytics.track("Provider Updated", { name: provider.name });
          },
        },
      }}
    />
    ```

    ***

    **sso.deleteAction**

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

    Contrôle la suppression définitive du fournisseur de votre tenant Auth0. Cette action est irréversible.

    **Exemple :**

    ```tsx wrap lines theme={null}
    sso={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    **sso.deleteFromOrganizationAction**

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

    Contrôle le retrait du fournisseur de l’organisation. Le fournisseur est dissocié de l’organisation, mais demeure dans le tenant et peut être ajouté de nouveau ultérieurement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    sso={{
      deleteFromOrganizationAction: {
        onBefore: (provider) => {
          return confirm(`Remove "${provider.display_name}" from this organization?`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    <h3 id="provisioning-tab-actions-3">
      Actions de l’onglet Provisioning
    </h3>

    La prop `provisioning` configure les actions de l’onglet de provisionnement SCIM. Cet onglet gère le provisionnement automatisé des utilisateurs au moyen du protocole SCIM.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

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

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

          <td>
            Activer le provisionnement SCIM.
          </td>
        </tr>

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

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

          <td>
            Désactiver le provisionnement SCIM.
          </td>
        </tr>

        <tr>
          <td>
            <code>createScimTokenAction</code>
          </td>

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

          <td>
            Générer un jeton SCIM.
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteScimTokenAction</code>
          </td>

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

          <td>
            Révoquer le jeton SCIM.
          </td>
        </tr>
      </tbody>
    </table>

    **provisioning.createAction**

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

    Active le provisionnement SCIM pour le fournisseur. Une fois activé, vous pouvez générer un jeton SCIM que votre fournisseur d’identité pourra utiliser.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      createAction: {
        onBefore: (provider) => {
          return confirm("Enable SCIM provisioning for this provider?");
        },
        onAfter: (provider, config) => {
          toast.success("SCIM provisioning enabled");
          console.log("SCIM endpoint:", config.scim_endpoint);
        },
      },
    }}
    ```

    ***

    **provisioning.deleteAction**

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

    Désactive le provisionnement SCIM et supprime toute la configuration de provisionnement associée à ce fournisseur d’identité.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
        },
        onAfter: () => toast.success("SCIM provisioning disabled"),
      },
    }}
    ```

    ***

    **provisioning.createScimTokenAction**

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

    Génère un nouveau jeton porteur SCIM permettant à votre fournisseur d’identité de s’authentifier auprès d’Auth0.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      createScimTokenAction: {
        onAfter: (provider, tokenResponse) => {
          // Le jeton ne s’affiche qu’une seule fois : l’utilisateur doit le copier immédiatement
          console.log("New SCIM token generated");
        },
      },
    }}
    ```

    ***

    **provisioning.deleteScimTokenAction**

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

    Révoque le jeton SCIM. Le fournisseur d’identité ne pourra plus synchroniser les utilisateurs tant qu’un nouveau jeton n’aura pas été généré.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteScimTokenAction: {
        onBefore: () => {
          return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
        },
      },
    }}
    ```

    ***

    <h3 id="domains-tab-actions-3">
      Actions de l’onglet Domaines
    </h3>

    La prop `domains` configure les actions de l’onglet Domaines. Cet onglet gère les domaines associés au fournisseur afin d’acheminer automatiquement les utilisateurs.

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

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

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

          <td>
            Ajouter un domaine.
          </td>
        </tr>

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

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

          <td>
            Vérifier la propriété du domaine.
          </td>
        </tr>

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

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

          <td>
            Supprimer un domaine.
          </td>
        </tr>

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

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

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

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

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

          <td>
            Retirer le domaine du fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

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

    Permet de contrôler l’ajout de nouveaux domaines à l’organisation depuis l’interface de modification du fournisseur.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      createAction: {
        onAfter: (domain) => {
          toast.success(`Domain ${domain.domain} added`);
        },
      },
    }}
    ```

    ***

    **domains.verifyAction**

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

    Contrôle la vérification du domaine au moyen d’un enregistrement TXT DNS.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      verifyAction: {
        onBefore: (domain) => {
          return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully`);
        },
      },
    }}
    ```

    ***

    **domains.deleteAction**

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

    Contrôle la suppression du domaine.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      deleteAction: {
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}?`);
        },
      },
    }}
    ```

    ***

    **domains.associateToProviderAction**

    **Type :** `ComponentAction<Domain, IdentityProvider | null>`

    Associe un domaine vérifié à ce fournisseur SSO afin d’acheminer automatiquement les utilisateurs.

    **Exemple :**

    ```tsx wrap lines theme={null}
    domains={{
      associateToProviderAction: {
        onAfter: (domain, provider) => {
          console.log(`${domain.domain} now routes to ${provider?.name}`);
        },
      },
    }}
    ```

    ***

    **domains.deleteFromProviderAction**

    **Type :** `ComponentAction<Domain, IdentityProvider | null>`

    Supprime l’association entre un domaine et ce fournisseur.

    ***

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

    Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à vos paramètres régionaux 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>SsoProviderEditSchema</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

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

          <td>
            <code>Partial\<SsoProviderEditMessages></code>
          </td>

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

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

          <td>
            <code>ComponentStyling\<SsoProviderEditClasses></code>
          </td>

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

    **schema**

    Définissez des règles de validation personnalisées pour les champs fournisseur et domaine.

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

      **provider.**\*—Champs de configuration du fournisseur par stratégie

      * Communs : `name`, `displayName`
      * Champs propres à la stratégie (identiques à ceux de SsoProviderCreate)

      **domains.create.domainUrl**—Validation de l’URL du domaine
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      schema={{
        provider: {
          displayName: {
            required: true,
            maxLength: 100,
          },
        },
        domains: {
          create: {
            domainUrl: {
              regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
              errorMessage: "Enter a valid domain (example.com)",
            },
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut s’ils ne sont pas renseignés.

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

      * `title`, `back_button_text`

      **tabs**—Libellés et contenu des onglets

      * `tabs.sso.name`—Libellé de l’onglet SSO
      * `tabs.sso.content`—Messages de l’onglet SSO
        * `details.third_party_access`—`title`, `label`, `helper_text`
        * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper`
        * `title`, `description`
        * `fields.*`—Libellés des champs du formulaire par stratégie
        * `actions.save_button_text`, `actions.delete_button_text`
        * `delete_modal.*`, `remove_modal.*`
      * `tabs.provisioning.name`—Libellé de l’onglet Provisioning
      * `tabs.domains.name`—Libellé de l’onglet Domaines

      **provisioning\_tab**—Onglet de provisionnement

      * `title`, `description`
      * `scim_endpoint.label`, `scim_token.label`
      * `actions.enable_button_text`, `actions.disable_button_text`
      * `actions.generate_token_button_text`, `actions.revoke_token_button_text`

      **domains\_tab**—Onglet des domaines

      * `title`, `description`
      * Même structure que les messages de DomainTable

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

      * `provider_update_success`, `provider_delete_success`
      * `provisioning_enable_success`, `provisioning_disable_success`
      * `scim_token_create_success`, `scim_token_delete_success`
      * Notifications liées aux domaines
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      customMessages={{
        header: {
          title: "Edit Provider",
        },
        tabs: {
          sso: {
            name: "Settings",
            content: {
              details: {
                third_party_access: {
                  title: "Third-Party Application Access",
                  label: "Allow this provider to be used by third-party applications",
                  helper_text: "External applications can authenticate users through this provider.",
                },
                cross_app_access: {
                  title: "Cross App Access",
                  label: "Allow this provider to authorize access to this Resource Application",
                  helper_text: "Accept authorizations from this provider to issue API access tokens.",
                  domain_verification_text: "The OIDC issuer domain must be verified.",
                  saml_description: "Provide the identity provider's OpenID Connect Configuration.",
                  saml_discovery_url_label: "OIDC Issuer or Discovery URL",
                  saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
                },
              },
              actions: {
                save_button_text: "Save Changes",
              },
            },
          },
          provisioning: { name: "User Sync" },
          domains: { name: "Domains" },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **mise en forme**

    Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Prend en charge le style adapté au thème.

    <Accordion title="Options de mise en forme offertes">
      **Variables**—propriétés CSS personnalisées

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

      **Classes**—surcharges de classes de composants

      * `SsoProviderEdit-header`
      * `SsoProviderEdit-tabs`
      * `ProviderConfigure-ThirdPartyAccess`
      * `ProviderConfigure-CrossAppAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "SsoProviderEdit-tabs": "border-b border-gray-200",
        },
      }}
    />
    ```

    ***

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

          <td>Logique de récupération et de modification du fournisseur</td>
        </tr>

        <tr>
          <td>
            <code>useSsoDomainTab</code>
          </td>

          <td>Gestion des associations de domaines</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>