Modification du fournisseur SSO

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

Le composant SsoProviderEdit offre une interface unifiée pour modifier les fournisseurs d’authentification unique (SSO).

React

​

Exigences de configuration

Configuration Auth0 requise - Assurez-vous que votre locataire est configuré pour utiliser l’API My Organization. Voir le guide de configuration →

​

Installation

pnpm

pnpm add @auth0/universal-components-react

L’exécution de l’une ou l’autre de ces commandes installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration avec Auth0.

​

Démarrage

import { SsoProviderEdit } from "@auth0/universal-components-react/spa";
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/spa";
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 défis d'authentification par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props obligatoires

Les props obligatoires sont fondamentales au fonctionnement du composant. SsoProviderEdit requiert l’ID du fournisseur pour charger et modifier le fournisseur approprié.

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

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent 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. Valeur par défaut : false

---

​

Propriétés d’Action

Les interactions des utilisateurs dans les trois onglets sont gérées par plusieurs props d’action organisées sous le nom de l’onglet correspondant (sso, provisioning et domains).

Propriété	Type	Description
backButton	Object	Configuration du bouton Retour.
sso	SsoProviderTabEditProps	Actions de l’onglet SSO. Détails
provisioning	SsoProvisioningTabEditProps	Actions de l’onglet de provisionnement. Détails
domains	SsoDomainsTabEditProps	Actions de l’onglet des 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, valeur par défaut : ArrowLeft)
• onClick - Gestionnaire de clics 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 pour l’onglet des 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 d’identité.
deleteAction	ComponentAction<IdentityProvider>	Supprimer définitivement le fournisseur d’identité.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Retirer le fournisseur 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. Renvoyez false pour empêcher la sauvegarde (p. ex., pour 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 assurer le suivi de 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 locataire 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>

Contrôle la suppression du fournisseur de l’organisation sans le supprimer définitivement. Le fournisseur reste disponible pour être rajouté ultérieurement.

Exemple :

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

---

​

Actions de l’onglet Provisionnement

La prop provisioning configure les actions pour l’onglet de provisionnement SCIM. Cet onglet gère le provisionnement automatisé des utilisateurs via le 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 le 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 pour 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 bearer SCIM permettant à 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>

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 pour l’onglet des domaines. Cet onglet gère les domaines associés au fournisseur pour le routage automatique des utilisateurs.

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

domains.createAction

Type: ComponentAction<Domain>

Contrôle 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 via 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 pour le routage automatique des 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 props de personnalisation vous permettent d’adapter le composant à votre 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 pour l’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 du schéma disponibles

Tous les champs du schéma acceptent : regex, errorMessage, minLength, maxLength, required

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

• Champs communs : name, displayName
• Champs propres à la 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 traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

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 de 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 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 substitutions de classes. Prend en charge le style adapté aux thèmes.

Options de style disponibles

Variables - Propriétés CSS personnalisées

• common - Appliqué à tous les thèmes
• light - Thème clair uniquement
• dark - Thème sombre uniquement

Classes - Remplacements des classes du composant

• 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 composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de modification de fournisseur personnalisés si vous utilisez shadcn.

​

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 spécifiques dans différents contextes.

Composant	Description
SsoProviderSsoTab	Formulaire de configuration du SSO
SsoProviderProvisioningTab	Gestion du provisionnement SCIM
SsoProviderDomainsTab	Gestion des associations de domaine
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 à l’API Auth0.

Hook	Description
useSsoProviderEdit	Chargement et mise à jour du fournisseur
useSsoProviderProvisioning	Gestion du provisionnement SCIM
useSsoProviderDomains	Gestion de l’association de domaines

Next.js

​

Exigences de configuration

Configuration d’Auth0 requise - Assurez-vous que votre locataire est configuré pour utiliser l’API My Organization. Voir 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 pour les utilitaires partagés et l’intégration avec Auth0.

​

Mise en route

page.tsx

import { SsoProviderEdit } from "@auth0/universal-components-react/rwa";
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/rwa";
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

​

Propriétés principales

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

Prop	Type	Description
providerId	string	Obligatoire. ID du fournisseur SSO à modifier.

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent 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. Valeur par défaut : false

---

​

Propriétés d’Action

Les interactions des utilisateurs dans les trois onglets sont gérées par plusieurs props d’action organisées sous le nom de l’onglet correspondant (sso, provisioning et domains).

Propriété	Type	Description
backButton	Object	Configuration du bouton de retour.
sso	SsoProviderTabEditProps	Actions de l’onglet SSO. Détails
provisioning	SsoProvisioningTabEditProps	Actions de l’onglet de provisionnement. Détails
domains	SsoDomainsTabEditProps	Actions de l’onglet des 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é (optionnel, valeur par défaut : ArrowLeft)
• onClick - Gestionnaire de clics 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 pour l’onglet des paramètres SSO. Cet onglet gère la configuration d’authentification du fournisseur.

Action	Type	Description
updateAction	ComponentAction<IdentityProvider, IdentityProvider>	Met à jour les paramètres du fournisseur.
deleteAction	ComponentAction<IdentityProvider>	Supprime définitivement le fournisseur.
removeFromOrganizationAction	ComponentAction<IdentityProvider>	Retire le fournisseur 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 la sauvegarde (p. ex., pour afficher une boîte de dialogue de confirmation).
• onAfter(provider, result) - S’exécute une fois que le fournisseur a été mis à jour avec succès. Utilisez-le pour afficher une notification ou faire le suivi de 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 locataire 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>

Contrôle la suppression du fournisseur de l’organisation sans le supprimer définitivement. Le fournisseur reste disponible pour être rajouté ultérieurement.

Exemple :

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

---

​

Actions de l’onglet Provisionnement

La prop provisioning configure les actions pour l’onglet de provisionnement SCIM. Cet onglet gère le provisionnement automatisé des utilisateurs via le 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 pour 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 bearer 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>

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 pour l’onglet des domaines. Cet onglet gère les domaines associés au fournisseur pour le routage automatique des 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 d’identité.
deleteFromProviderAction	ComponentAction<Domain, IdentityProvider | null>	Dissocier le domaine du fournisseur d’identité.

domains.createAction

Type: ComponentAction<Domain>

Contrôle 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 via 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 pour le routage automatique des 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 props de personnalisation vous permettent d’adapter le composant à votre 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

• Champs communs : name, displayName
• Champs propres à la 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 traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

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 de 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!",
    },
  }}
/>

---

styling

Personnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge le style adapté aux thèmes.

Options de style 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 des classes du composant

• 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 composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de travail de modification de fournisseur personnalisés.

​

Sous-composants disponibles

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

Composant	Description
SsoProviderSsoTab	Formulaire de configuration du SSO
SsoProviderProvisioningTab	Gestion du provisionnement 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 à 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

​

Exigences de configuration

Configuration Auth0 requise - Assurez-vous que votre locataire est configuré pour utiliser l’API My Organization. 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 pour les utilitaires partagés et l’intégration à Auth0.

​

Démarrage

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 défis d'authentification par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Propriétés de base

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

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

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche sans en modifier le comportement.

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

---

​

Propriétés d’Action

Les interactions des utilisateurs dans les trois onglets sont gérées par plusieurs props d’action organisées sous le nom de l’onglet correspondant (sso, provisioning et domains).

Propriété	Type	Description
backButton	Object	Configuration du bouton de retour.
sso	SsoProviderTabEditProps	Actions de l’onglet SSO. Détails
provisioning	SsoProvisioningTabEditProps	Actions de l’onglet de provisionnement. Détails
domains	SsoDomainsTabEditProps	Actions de l’onglet des 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, valeur par défaut : ArrowLeft)
• 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 pour l’onglet des 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 le fournisseur 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. Renvoyez false pour empêcher l’enregistrement (par exemple, pour afficher une boîte de dialogue de confirmation).
• onAfter(provider, result) - S’exécute après la mise à jour réussie du fournisseur. Utilisez-le pour afficher une notification ou effectuer le suivi de 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 locataire 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>

Contrôle la suppression du fournisseur de l’organisation sans le supprimer définitivement. Le fournisseur reste disponible pour être rajouté ultérieurement.

Exemple :

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

---

​

Actions de l’onglet Provisionnement

La prop provisioning configure les actions pour l’onglet de provisionnement SCIM. Cet onglet gère le provisionnement automatisé des utilisateurs via le 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 pour 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 bearer SCIM permettant à 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>

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 pour l’onglet des domaines. Cet onglet gère les domaines associés au fournisseur pour le routage automatique des utilisateurs.

Action	Type	Description
createAction	ComponentAction<Domain>	Ajouter un domaine.
verifyAction	ComponentAction<Domain>	Valider 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>	Dissocier le domaine du fournisseur.

domains.createAction

Type: ComponentAction<Domain>

Contrôle 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 via 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 pour le routage automatique des 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 props de personnalisation vous permettent d’adapter le composant à votre 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 acceptent : regex, errorMessage, minLength, maxLength, required

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

• Communs : name, displayName
• Champs propres à la 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 traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si aucune n’est fournie.

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

---

styling

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

Options de style 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 - Remplacement des classes du composant

• 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 composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de travail de gestion de fournisseurs SSO personnalisés si vous utilisez shadcn.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des composants d’onglet individuels afin de créer des interfaces d’édition de fournisseur personnalisées.

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

​

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 à l’API Auth0.

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