Modifier les fournisseurs SSO sur le Web

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

Le composant SsoProviderEdit offre une interface unifiée permettant de modifier les fournisseurs de Single Sign-On.

React

​

Exigences de configuration

Configuration d’Auth0 requise — Assurez-vous que votre tenant est configuré avec l’API My Organization. Consulter le guide de configuration →

​

Installation

pnpm

pnpm add @auth0/universal-components-react

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.

​

Pour commencer

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

Exemple complet d’intégration

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>
  );
}

​

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.

Propriété	Type	Description
providerId	string	Obligatoire. L’ID du Provider SSO à modifier.

---

​

Props d’affichage

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

Propriété	Type	Description
hideHeader	boolean	Masque la section d’en-tête. Par défaut : false

---

​

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

Props	Type	Description
backButton	Object	Configuration du bouton Retour.
sso	SsoProviderTabEditProps	Actions de l’onglet SSO. Détails
provisioning	SsoProvisioningTabEditProps	Actions de l’onglet Provisioning. Détails
domains	SsoDomainsTabEditProps	Actions de l’onglet Domaines. Détails

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 :

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.

Action	Type	Description
updateAction	ComponentAction<IdentityProvider, IdentityProvider>	Mettre à jour les paramètres du fournisseur.
deleteAction	ComponentAction<IdentityProvider>	Supprimer définitivement le fournisseur.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Retirer de l’organisation.

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 :

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

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 :

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.

Action	Type	Description
createAction	ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>	Activer le SCIM provisioning.
deleteAction	ComponentAction<IdentityProvider>	Désactiver le SCIM provisioning.
createScimTokenAction	ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>	Générer un jeton SCIM.
deleteScimTokenAction	ComponentAction<IdentityProvider>	Révoquer le jeton SCIM.

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 :

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 :

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 :

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 :

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.

Action	Type	Description
createAction	ComponentAction<Domain>	Ajoute un domaine.
verifyAction	ComponentAction<Domain>	Vérifie la propriété du domaine.
deleteAction	ComponentAction<Domain>	Supprime un domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider | null>	Associe un domaine à un fournisseur.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider | null>	Retire un domaine d’un fournisseur.

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 :

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 :

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 :

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 :

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.

Propriété	Type	Description
schema	SsoProviderEditSchema	Règles de validation des champs.
customMessages	Partial<SsoProviderEditMessages>	Remplacements de texte i18n.
styling	ComponentStyling<SsoProviderEditClasses>	Variables CSS et remplacements de classes.

schéma

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

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

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

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

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

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

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

Composant	Description
SsoProviderSsoTab	Formulaire de configuration SSO
SsoProviderProvisioningTab	Gestion de l’approvisionnement SCIM
SsoProviderDomainsTab	Gestion des associations de domaines
ProviderConfigureFields	Champs de formulaire dynamiques selon la stratégie
ScimTokenDisplay	Affichage du token SCIM avec fonction de copie

​

Hooks disponibles

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

Hook	Description
useSsoProviderEdit	Logique de chargement et de mise à jour du fournisseur
useSsoProviderProvisioning	Gestion du SCIM provisioning
useSsoProviderDomains	Gestion des associations de domaines

Next.js

​

Exigences de configuration

Configuration Auth0 requise — Assurez-vous que votre tenant est configuré avec l’API My Organization. Consulter le guide de configuration →

​

Installation

npm (Recommended)

npm install @auth0/universal-components-react

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.

​

Pour commencer

page.tsx

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

Exemple d’intégration complet

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;

​

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.

Propriété	Type	Description
providerId	string	Obligatoire. L’ID du fournisseur SSO à modifier.

---

​

Props d’affichage

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

Propriété	Type	Description
hideHeader	boolean	Masque la section d’en-tête. Par défaut : false

---

​

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

Props	Type	Description
backButton	Object	Configuration du bouton Retour.
sso	SsoProviderTabEditProps	Actions de l’onglet SSO. Détails
provisioning	SsoProvisioningTabEditProps	Actions de l’onglet Provisioning. Détails
domains	SsoDomainsTabEditProps	Actions de l’onglet Domaines. Détails

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 :

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.

Action	Type	Description
updateAction	ComponentAction<IdentityProvider, IdentityProvider>	Mettre à jour les paramètres du fournisseur.
deleteAction	ComponentAction<IdentityProvider>	Supprimer définitivement le fournisseur.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Retirer de l’organisation.

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 :

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

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 :

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.

Action	Type	Description
createAction	ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>	Activer le provisionnement SCIM.
deleteAction	ComponentAction<IdentityProvider>	Désactiver le provisionnement SCIM.
createScimTokenAction	ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>	Générer un jeton SCIM.
deleteScimTokenAction	ComponentAction<IdentityProvider>	Révoquer le jeton SCIM.

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 :

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 :

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 :

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 :

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.

Action	Type	Description
createAction	ComponentAction<Domain>	Ajouter un domaine.
verifyAction	ComponentAction<Domain>	Vérifier la propriété du domaine.
deleteAction	ComponentAction<Domain>	Supprimer un domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider | null>	Associer un domaine à un fournisseur.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider | null>	Retirer un domaine d’un fournisseur.

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 :

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 :

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 :

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 :

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.

Propriété	Type	Description
schema	SsoProviderEditSchema	Règles de validation des champs.
customMessages	Partial<SsoProviderEditMessages>	Surcharges de texte i18n.
styling	ComponentStyling<SsoProviderEditClasses>	Variables CSS et surcharges de classes.

schema

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

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

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

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

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

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

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

Composant	Description
SsoProviderSsoTab	Formulaire de configuration SSO
SsoProviderProvisioningTab	Gestion de l’approvisionnement SCIM
SsoProviderDomainsTab	Gestion des associations de domaines
ProviderConfigureFields	Champs de formulaire dynamiques selon la stratégie
ScimTokenDisplay	Affichage du jeton SCIM avec fonction de copie

​

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.

Hook	Description
useSsoProviderEdit	Logique de chargement et de mise à jour du fournisseur
useSsoProviderProvisioning	Gestion du provisionnement SCIM
useSsoProviderDomains	Gestion des associations de domaines

shadcn

​

Prérequis de configuration

Configuration Auth0 requise—Assurez-vous que votre tenant est configuré pour utiliser la My Organization API. Consulter le guide de configuration →

​

Installation

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-edit.json

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.

​

Pour commencer

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

Exemple complet d’intégration

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>
  );
}

​

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.

Propriété	Type	Description
providerId	string	Obligatoire. L’ID du fournisseur SSO à modifier.

---

​

Afficher les props

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

Propriété	Type	Description
hideHeader	boolean	Masque la section d’en-tête. Par défaut : false

---

​

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

Props	Type	Description
backButton	Object	Configuration du bouton Retour.
sso	SsoProviderTabEditProps	Actions de l’onglet SSO. Détails
provisioning	SsoProvisioningTabEditProps	Actions de l’onglet Provisioning. Détails
domains	SsoDomainsTabEditProps	Actions de l’onglet Domaines. Détails

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 :

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.

Action	Type	Description
updateAction	ComponentAction<IdentityProvider, IdentityProvider>	Mettre à jour les paramètres du fournisseur.
deleteAction	ComponentAction<IdentityProvider>	Supprimer définitivement le fournisseur.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Retirer de l’organisation.

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 :

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

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 :

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.

Action	Type	Description
createAction	ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>	Activer le provisionnement SCIM.
deleteAction	ComponentAction<IdentityProvider>	Désactiver le provisionnement SCIM.
createScimTokenAction	ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>	Générer un jeton SCIM.
deleteScimTokenAction	ComponentAction<IdentityProvider>	Révoquer le jeton SCIM.

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 :

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 :

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 :

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 :

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.

Action	Type	Description
createAction	ComponentAction<Domain>	Ajouter un domaine.
verifyAction	ComponentAction<Domain>	Vérifier la propriété du domaine.
deleteAction	ComponentAction<Domain>	Supprimer un domaine.
associateToProviderAction	ComponentAction<Domain, IdentityProvider | null>	Associer le domaine au fournisseur.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider | null>	Retirer le domaine du fournisseur.

domains.createAction

Type : ComponentAction<Domain>

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

Exemple :

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 :

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 :

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 :

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.

Propriété	Type	Description
schema	SsoProviderEditSchema	Règles de validation des champs.
customMessages	Partial<SsoProviderEditMessages>	Remplacements de texte pour l’internationalisation.
styling	ComponentStyling<SsoProviderEditClasses>	Variables CSS et remplacements de classes.

schema

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

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

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

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

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

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

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

Composant	Description
SsoProviderEditTabs	Conteneur et navigation des onglets
SsoTab	Onglet de configuration des paramètres SSO
ProvisioningTab	Onglet de SCIM provisioning
DomainsTab	Onglet des associations de domaines

​

Hooks disponibles

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

Hook	Description
useSsoProviderEdit	Logique de récupération et de modification du Provider
useSsoProviderEditLogic	État des onglets et gestionnaires d’actions