Modification des fournisseurs SSO

Configuration requise

Configuration Auth0 requise – Assurez-vous que votre locataire est configuré avec l’ API My Organization. Afficher le guide de configuration →

Installation

pnpm add @auth0/universal-components-react

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 rapide

import { SsoProviderEdit } from '@auth0/universal-components-react/spa';

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

return (

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

Exemple d’intégration complète

Bien que cet exemple utilise une application à page unique React, les configurations des propriétés (schéma, customMessages, style, etc.) s’appliquent également aux configurations Next.js et shadcn.

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("Configuration du fournisseur enregistrée");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Supprimer "${provider.display_name}"? Cette action est irréversible.`,
              );
            },
            onAfter: () => {
              toast.success("Fournisseur supprimé");
              navigate("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("Fourniture SCIM activée"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("Copiez votre jeton SCIM - il n'est affiché qu'une seule fois"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain} vérifié`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`Supprimer ${domain.domain}?`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "Configuration",
            provisioning: "Synchronisation utilisateur (SCIM)",
            domains: "Domaines liés",
          },
        }}
        styling={{
          variables: {
            common: { "--color-primary": "#059669" },
          },
        }}
      />
    </div>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Propriétés

Propriétés essentielles

Les propriétés essentielles sont fondamentales pour le fonctionnement du composant. SsoProviderEdit nécessite l’identifiant du fournisseur pour charger et modifier le bon fournisseur.

Propriété	Type	Description
`providerId`	`string`	Obligatoire. Identifiant du fournisseur SSO à modifier.

Propriétés d’affichage

Les propriétés d’affichage contrôlent la manière dont le composant s’affiche sans altérer son comportement.

Propriété	Type	Description
`hideHeader`	`boolean`	Masquer la section d’en-tête. Valeur par défaut : `false`

Propriétés d’action

Les interactions utilisateur entre les trois onglets sont gérées par plusieurs propriétés 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. Détails
`sso`	`SsoProviderTabEditProps`	Actions de l’onglet SSO. Détails
`provisioning`	`SsoProvisioningTabEditProps`	Actions de l’onglet Fourniture. 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 l’en-tête du composant. À utiliser pour revenir à la liste de vos fournisseurs. Propriétés :

icon – Composant 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 de l’onglet Paramètres SSO. Cet onglet gère la configuration de l’authentification du fournisseur.

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

sso.updateAction

Type : ComponentAction<IdentityProvider, IdentityProvider> Contrôle l’enregistrement des modifications apportées à la configuration du fournisseur (identifiant client, secrets, certificats, etc.). Propriétés :

disabled – Désactiver le bouton d’enregistrement
onBefore(provider) – S’exécute avant la mise à jour. Renvoie false pour empêcher l’enregistrement (p. ex., pour afficher une fenêtre de confirmation).
onAfter(provider, result) – S’exécute après la réussite de la mise à jour du fournisseur. À utiliser pour afficher une notification ou suivre l’événement.

Exemple :

<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        return confirm(« Enregistrer les modifications apportées à la configuration du fournisseur? »);
      },
      onAfter: (provider) => {
        toast.success(« Configuration du fournisseur enregistrée »);
        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(`Supprimer de manière permanente  "${provider.display_name}"? Cette action est irréversible.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

sso.removeFromOrganizationAction

Type : ComponentAction<IdentityProvider> Contrôle la suppression d’un fournisseur de l’organization sans le supprimer définitivement. Le fournisseur reste utilisable et peut être réajouté ultérieurement. Exemple :

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

Actions de l’onglet Fourniture

La propriété provisioning configure les actions de l’onglet Fourniture SCIM. Cet onglet gère la fourniture automatisée des utilisateurs via le protocole SCIM.

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

provisioning.createAction

Type : ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent> Active la fourniture SCIM pour le fournisseur. Après l’activation, vous pouvez générer un jeton SCIM à utiliser par votre fournisseur d’identité. Exemple :

provisioning={{
  createAction: {
    onBefore: (provider) => {
      return confirm(« Activer la fourniture SCIM pour ce fournisseur? »);
    },
    onAfter: (provider, config) => {
      toast.success(« Fourniture SCIM activée »);
      console.log("SCIM endpoint:", config.scim_endpoint);
    },
  },
}}

provisioning.deleteAction

Type : ComponentAction<IdentityProvider> Désactive la fourniture SCIM et supprime toute configuration de fourniture pour ce fournisseur d’identité. Exemple :

provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(« Désactiver la fourniture SCIM? Cela mettra fin à la synchronisation automatique des utilisateurs. »);
    },
    onAfter: () => toast.success(« Fourniture SCIM désactivée »),
  },
}}

provisioning.createScimTokenAction

Type : ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent> Génère un nouveau jeton SCIM pour votre fournisseur d’identité afin de vous authentifier avec Auth0. Exemple :

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // Token is shown once - user should copy it immediately
      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(« Révoquer le jeton SCIM? Votre fournisseur d'identité perdra immédiatement l'accès. »);
    },
  },
}}

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 pour le routage automatique des utilisateurs.

Action	Type	Description
`createAction`	`ComponentAction<Domain>`	Ajouter un domaine. Détails
`verifyAction`	`ComponentAction<Domain>`	Vérifier le propriétaire du domaine. Détails
`deleteAction`	`ComponentAction<Domain>`	Supprimer un domaine. Détails
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Associer un domaine à un fournisseur. Détails
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Supprimer le domaine du fournisseur. Détails

domains.createAction

Type : ComponentAction<Domain> Contrôle l’ajout de nouveaux domaines à l’organization à partir de l’interface d’édition du fournisseur. Exemple :

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domaine ${domain.domain} ajouté`);
    },
  },
}}

domains.verifyAction

Type : ComponentAction<Domain> Contrôle la vérification du domaine via l’enregistrement DNS TXT. Exemple :

domains={{
  verifyAction: {
    onBefore: (domain) => {
      return confirm(`Vérifier ${domain.domain}? Assurez-vous que vos enregistrements DNS sont configurés.`);
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} vérifié avec succès`);
    },
  },
}}

domains.deleteAction

Type : ComponentAction<Domain> Contrôle la suppression de domaines. Exemple :

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Supprimer ${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 propriétés de personnalisation vous permettent d’adapter le composant à votre marque, à votre région et à vos exigences de validation sans modifier le code source.

Propriété	Type	Description
`schema`	`SsoProviderEditSchema`	Règles de validation des champs. Détails
`customMessages`	`Partial<SsoProviderEditMessages>`	Remplacement du texte i18n. Détails
`styling`	`ComponentStyling<SsoProviderEditClasses>`	Variables CSS et remplacements de classe. Détails

schéma

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, requiredfournisseur.* – Champs de configuration du fournisseur par stratégie– Common: name, displayName – Champs propres à la stratégie (comme 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: « Saisir un domaine valide (exemple.com) »,
        },
      },
    },
  }}
/>

customMessages

Personaliser 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

en-tête – En-tête de composant

title, back_button_text

onglets – Étiquettes d’onglets

sso, provisioning, domains

sso_tab – Onglet Paramètres SSO

title, description
fields.* - Form field labels by strategy
actions.save_button_text, actions.delete_button_text
delete_modal.*, remove_modal.*

provisioning_tab – Onglet Fourniture

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 DomainTablenotifications – Réponses API– provider_update_success, provider_delete_success – provisioning_enable_success, provisioning_disable_success – scim_token_create_success, scim_token_delete_success – Notifications liées au domaine

<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: « Modifier le fournisseur »,
    },
    tabs: {
      sso: « Paramètres »,
      provisioning: « Synchronisation des utilisateurs »,
      domains: « Domaines »,
    },
    sso_tab: {
      actions: {
        save_button_text: « Enregistrer les modifications »,
      },
    },
    notifications: {
      provider_update_success: « Fournisseur enregistré avec succès! »,
    },
  }}
/>

style

Personnaliser l’apparence à l’aide de variables CSS et de remplacements de classe. Prend en charge les styles adaptés aux thèmes.

Options de styles disponibles

Variables – Propriétés personnalisées CSS – common – Appliqué à tous les thèmes – light – Thème clair uniquement – dark – Thème sombre uniquementClasses – Remplacements de classes des 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 SsoProviderTableest constitué de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de production d’édition de fournisseurs 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 sections ou des onglets particuliers dans différents contextes.

Composant	Description
`SsoProviderSsoTab`	Formulaire de configuration SSO
`SsoProviderProvisioningTab`	Gestion de la fourniture SCIM
`SsoProviderDomainsTab`	Gestion de l’association de domaines
`ProviderConfigureFields`	Champs de formulaire dynamiques par stratégie
`ScimTokenDisplay`	Affichage du jeton SCIM avec fonctionnalité de copie

Hooks disponibles

Ces hooks fournissent la logique sous-jacente sans aucune interface utilisateur. Veuillez les utiliser pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration de l’API Auth0.

Hook	Description
`useSsoProviderEdit`	Logique de chargement et de mise à jour du fournisseur
`useSsoProviderProvisioning`	Gestion de la fourniture SCIM
`useSsoProviderDomains`	Gestion de l’association de domaines

My Organization

​Configuration requise

​Installation

​Démarrage rapide

​Propriétés

​Propriétés essentielles

​Propriétés d’affichage

​Propriétés d’action

​backButton

​Actions de l’onglet SSO

​sso.updateAction

​sso.deleteAction

​sso.removeFromOrganizationAction

​Actions de l’onglet Fourniture

​provisioning.createAction

​provisioning.deleteAction

​provisioning.createScimTokenAction

​provisioning.deleteScimTokenAction

​Actions de l’onglet Domaines

​domains.createAction

​domains.verifyAction

​domains.deleteAction

​domains.associateToProviderAction

​domains.deleteFromProviderAction

​Propriétés de personnalisation

​schéma

​customMessages

​style

​Personnalisation avancée

​Sous-composants disponibles

​Hooks disponibles

Configuration requise

Installation

Démarrage rapide

Propriétés

Propriétés essentielles

Propriétés d’affichage

Propriétés d’action

backButton

Actions de l’onglet SSO

sso.updateAction

sso.deleteAction

sso.removeFromOrganizationAction

Actions de l’onglet Fourniture

provisioning.createAction

provisioning.deleteAction

provisioning.createScimTokenAction

provisioning.deleteScimTokenAction

Actions de l’onglet Domaines

domains.createAction

domains.verifyAction

domains.deleteAction

domains.associateToProviderAction

domains.deleteFromProviderAction

Propriétés de personnalisation

schéma

customMessages

style

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles