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

# 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)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="Chargement" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>;

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

Le composant `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" />

<Tabs>
  <Tab title="React">
    ## Exigences de configuration

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

    ## Installation

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

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

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

    ## Pour commencer

    ```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 wrap 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(
                      `Delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider deleted");
                    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 domain={domain}>
              <EditProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Props requis

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

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

    ***

    ### Props d’affichage

    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>
      </tbody>
    </table>

    ***

    ### Propriétés de l’Action

    Les interactions des utilisateurs 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"),
      }}
    />;
    ```

    ***

    ### Actions de l'onglet SSO

    La propriété `sso` configure les actions de l’onglet 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.
          </td>
        </tr>

        <tr>
          <td>
            <code>removeFromOrganizationAction</code>
          </td>

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

          <td>
            Retirer de l’organisation.
          </td>
        </tr>
      </tbody>
    </table>

    **sso.updateAction**

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

    Contrôle l'enregistrement des modifications apportées à la configuration du fournisseur (client ID, 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>`

    Permet de contrôler la suppression définitive du fournisseur de votre tenant Auth0.

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

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

    Contrôle le retrait du provider de l'organization sans le supprimer. Le provider demeure disponible et peut être ajouté de nouveau plus tard.

    **Exemple :**

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

    ***

    ### Actions de l’onglet Provisioning

    La prop `provisioning` configure les actions de l’onglet d’approvisionnement SCIM. Cet onglet gère l’approvisionnement 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 SCIM provisioning.
          </td>
        </tr>

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

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

          <td>
            Désactiver le SCIM provisioning.
          </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 SCIM provisioning pour le Provider. Une fois l'option activée, vous pouvez générer un SCIM token que votre identity provider 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 l’approvisionnement SCIM et supprime toute la configuration d’approvisionnement 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 pour permettre à votre fournisseur d’identité de s’authentifier auprès d’Auth0.

    **Exemple :**

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

    ***

    **provisioning.deleteScimTokenAction**

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

    Révoque le SCIM token. L'identity provider ne pourra plus synchroniser les utilisateurs tant qu'un nouveau token 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.");
        },
      },
    }}
    ```

    ***

    ### Actions de l’onglet Domaines

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

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

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

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

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

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

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

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

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

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

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

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

          <td>
            Retire un domaine d’un fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

    **Type :** `ComponentAction<Domain>` `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>` `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>` `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 d’un domaine avec ce fournisseur.

    ***

    ### Propriétés de personnalisation

    Les propriétés 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>
            Remplacements de texte i18n.
          </td>
        </tr>

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

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

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

    **schéma**

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

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

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

      * Communs : `name`, `displayName`
      * Champs propres à chaque stratégie (identiques à 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 des onglets

      * `sso`, `provisioning`, `domains`

      **sso\_tab**—Onglet des paramètres SSO

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

      **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 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: "Settings",
          provisioning: "User Sync",
          domains: "Domains",
        },
        sso_tab: {
          actions: {
            save_button_text: "Save Changes",
          },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **mise en forme**

    Personnalisez l'apparence à l'aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

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

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

      **Classes**—surcharges de classes de composants

      * `SsoProviderEdit-header`
      * `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`
      * `SsoProviderEdit-provisioningTab`
      * `SsoProviderEdit-domainsTab`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

    Le composant `SsoProviderEdit` est constitué de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de modification de fournisseurs si vous utilisez shadcn.

    ### Sous-composants disponibles

    Pour des cas d'utilisation avancés, vous pouvez importer chaque sous-composant individuellement afin d'intégrer des onglets ou des sections précises dans différents contextes.

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

      <tbody>
        <tr>
          <td>
            <code>SsoProviderSsoTab</code>
          </td>

          <td>Formulaire de configuration SSO</td>
        </tr>

        <tr>
          <td>
            <code>SsoProviderProvisioningTab</code>
          </td>

          <td>Gestion de l’approvisionnement SCIM</td>
        </tr>

        <tr>
          <td>
            <code>SsoProviderDomainsTab</code>
          </td>

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

        <tr>
          <td>
            <code>ProviderConfigureFields</code>
          </td>

          <td>Champs de formulaire dynamiques selon la stratégie</td>
        </tr>

        <tr>
          <td>
            <code>ScimTokenDisplay</code>
          </td>

          <td>Affichage du token SCIM avec fonction de copie</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

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

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

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderEdit</code>
          </td>

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

        <tr>
          <td>
            <code>useSsoProviderProvisioning</code>
          </td>

          <td>Gestion du SCIM provisioning</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderDomains</code>
          </td>

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

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

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

    ## Installation

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

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      L’exécution des commandes npm ou pnpm installe la dépendance @auth0/universal-components-core
      qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

    ## Pour commencer

    ```tsx page.tsx wrap lines theme={null}
    import { 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 d’intégration complet">
      ```tsx wrap 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(
                      `Delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider deleted");
                    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>

    ## Props

    ### Props de base

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

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

    ***

    ### Props d’affichage

    Les props d’affichage déterminent la façon dont le composant s’affiche, 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>
      </tbody>
    </table>

    ***

    ### Props d’action

    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 de retour dans le header du composant. Utilisez-le pour revenir à votre liste de providers.

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

    ***

    ### Actions de l’onglet SSO

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

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

        <tr>
          <td>
            <code>removeFromOrganizationAction</code>
          </td>

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

          <td>
            Retirer de l’organisation.
          </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, pour 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 consigner 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>` `ComponentAction<IdentityProvider>`

    Contrôle la suppression définitive du fournisseur de votre tenant Auth0.

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

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

    Permet de retirer le fournisseur de l’organisation sans le supprimer. Le fournisseur demeure disponible pour être ajouté de nouveau ultérieurement.

    **Exemple :**

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

    ***

    ### Actions de l’onglet Provisioning

    La propriété `provisioning` configure les actions de l'onglet de provisioning SCIM. Cet onglet gère le provisioning 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 SCIM provisioning pour le Provider. Une fois l'option activée, vous pouvez générer un SCIM token que votre identity provider 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 SCIM provisioning et supprime toute la configuration de provisioning associée à cet identity provider.

    **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 pour que votre fournisseur d’identité puisse s’authentifier auprès d’Auth0.

    **Exemple :**

    ```tsx wrap lines theme={null}
    provisioning={{
      createScimTokenAction: {
        onAfter: (provider, tokenResponse) => {
          // Le token n'est affiché 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 SCIM token. L'identity provider ne pourra plus synchroniser les utilisateurs tant qu'un nouveau token 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.");
        },
      },
    }}
    ```

    ***

    ### Actions de l'onglet Domaines

    La propriété `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 un domaine à un fournisseur.
          </td>
        </tr>

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

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

          <td>
            Retirer un domaine d'un fournisseur.
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

    **Type :** `ComponentAction<Domain>` `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.

    ***

    ### Props de personnalisation

    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 de fournisseur et de 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 selon la 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 des onglets

      * `sso`, `provisioning`, `domains`

      **sso\_tab**—Onglet des paramètres SSO

      * `title`, `description`
      * `fields.*`—Libellés des champs du formulaire par stratégie
      * `actions.save_button_text`, `actions.delete_button_text`
      * `delete_modal.*`, `remove_modal.*`

      **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: "Settings",
          provisioning: "User Sync",
          domains: "Domains",
        },
        sso_tab: {
          actions: {
            save_button_text: "Save Changes",
          },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **style**

    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`
      * `SsoProviderEdit-ssoTab`
      * `SsoProviderEdit-provisioningTab`
      * `SsoProviderEdit-domainsTab`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

    Le composant `SsoProviderEdit` est constitué de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de modification de fournisseurs.

    ### Sous-composants disponibles

    Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels afin d’intégrer des onglets ou des sections précises dans différents contextes.

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

      <tbody>
        <tr>
          <td>
            <code>SsoProviderSsoTab</code>
          </td>

          <td>Formulaire de configuration SSO</td>
        </tr>

        <tr>
          <td>
            <code>SsoProviderProvisioningTab</code>
          </td>

          <td>Gestion de l’approvisionnement SCIM</td>
        </tr>

        <tr>
          <td>
            <code>SsoProviderDomainsTab</code>
          </td>

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

        <tr>
          <td>
            <code>ProviderConfigureFields</code>
          </td>

          <td>Champs de formulaire dynamiques selon la stratégie</td>
        </tr>

        <tr>
          <td>
            <code>ScimTokenDisplay</code>
          </td>

          <td>Affichage du jeton SCIM avec fonction de copie</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

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

          <td>Gestion du provisionnement SCIM</td>
        </tr>

        <tr>
          <td>
            <code>useSsoProviderDomains</code>
          </td>

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

  <Tab title="shadcn">
    ## Prérequis de configuration

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

    ## Installation

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

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

    ## Pour commencer

    ```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 wrap 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(
                      `Delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider deleted");
                    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 par l'entremise du popup Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <EditProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## Props

    ### Props de base

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

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

    ***

    ### Afficher les props

    Les props d’affichage déterminent la façon dont le composant s’affiche, 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>
      </tbody>
    </table>

    ***

    ### Propriétés d’action

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

    ***

    ### Actions de l’onglet SSO

    La propriété `sso` configure les Actions de l’onglet Paramètres SSO. Cet onglet permet de gérer 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.
          </td>
        </tr>

        <tr>
          <td>
            <code>removeFromOrganizationAction</code>
          </td>

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

          <td>
            Retirer de l’organisation.
          </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 consigner 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.

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

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

    Permet de retirer le fournisseur de l’organisation sans le supprimer. Le fournisseur reste disponible pour être ajouté de nouveau ultérieurement.

    **Exemple :**

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

    ***

    ### Actions de l’onglet Provisioning

    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.");
        },
      },
    }}
    ```

    ***

    ### Actions de l’onglet Domaines

    La propriété `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>`

    Contrôle l'ajout de nouveaux domaines à l'organization depuis l'interface de modification du provider.

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

    ***

    ### Props de personnalisation

    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>
            Remplacements de texte pour l’internationalisation.
          </td>
        </tr>

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

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

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

    **schema**

    Définissez des règles de validation personnalisées pour les 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 l'ensemble des textes et des traductions. Tous les champs sont facultatifs; s'ils ne sont pas fournis, les valeurs par défaut s'appliquent.

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

      * `title`, `back_button_text`

      **tabs**—Libellés des onglets

      * `sso`, `provisioning`, `domains`

      **sso\_tab**—Onglet des paramètres SSO

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

      **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: "Settings",
          provisioning: "User Sync",
          domains: "Domains",
        },
        sso_tab: {
          actions: {
            save_button_text: "Save Changes",
          },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    Mise en forme

    Personnalisez l'apparence à l'aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

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

      * `common`—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`
      * `SsoProviderEdit-ssoTab`
      * `SsoProviderEdit-provisioningTab`
      * `SsoProviderEdit-domainsTab`
    </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",
        },
      }}
    />
    ```

    ***

    ## Personnalisation avancée

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

    ### Sous-composants disponibles

    Pour les use cases avancés, vous pouvez importer individuellement les composants d'onglet afin de créer des interfaces personnalisées de modification de fournisseur.

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

      <tbody>
        <tr>
          <td>
            <code>SsoProviderEditTabs</code>
          </td>

          <td>Conteneur et navigation des onglets</td>
        </tr>

        <tr>
          <td>
            <code>SsoTab</code>
          </td>

          <td>Onglet de configuration des paramètres SSO</td>
        </tr>

        <tr>
          <td>
            <code>ProvisioningTab</code>
          </td>

          <td>Onglet de SCIM provisioning</td>
        </tr>

        <tr>
          <td>
            <code>DomainsTab</code>
          </td>

          <td>Onglet des associations de domaines</td>
        </tr>
      </tbody>
    </table>

    ### Hooks disponibles

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

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

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderEdit</code>
          </td>

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

        <tr>
          <td>
            <code>useSsoProviderEditLogic</code>
          </td>

          <td>État des onglets et gestionnaires d’actions</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>