Modifier les fournisseurs SSO sur le Web

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

Accès des applications tierces et accès interapplications

Ces contrôles s’affichent uniquement lorsque l’organisation dispose d’un accès complet à la connexion SSO. Pour les connexions dont l’accès est restreint, les deux champs sont masqués. use_for_third_party_client_access permet aux applications tierces d’utiliser la connexion. Lorsque la politique third_party_client_access de l’organisation est définie sur "block", cette case à cocher demeure visible, mais est désactivée — un message explicatif invite l’administrateur à d’abord activer l’accès des tiers au niveau de l’organisation. cross_app_access_resource_app configure l’accès interapplications (XAA). Il est disponible directement pour les connexions OIDC et Okta, et pour les connexions SAML au moyen d’une URL de découverte OIDC qui doit d’abord être fournie. Sa disponibilité est déterminée par GET /my-org/config/identity-providers — lorsque la configuration cross_app_access_resource_app de la stratégie est absente, la section ne s’affiche pas. XAA constitue une voie d’autorisation distincte et contourne les deux contrôles d’accès des tiers : la politique third_party_client_access au niveau de l’organisation et le paramètre use_for_third_party_client_access au niveau de la connexion.

React
Next.js
shadcn

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 add @auth0/universal-components-react

npm install @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(
                `Permanently delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
          },
          deleteFromOrganizationAction: {
            onBefore: (provider) => {
              return confirm(
                `Remove "${provider.display_name}" from this organization?`,
              );
            },
            onAfter: () => {
              toast.success("Provider removed from organization");
              navigate("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("SCIM provisioning enabled"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("Copy your SCIM token - it won't be shown again"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain} verified`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "Configuration",
            provisioning: "User Sync (SCIM)",
            domains: "Linked Domains",
          },
        }}
        styling={{
          variables: {
            common: { "--color-primary": "#059669" },
          },
        }}
      />
    </div>
  );
}

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

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

Props

Props requis

Les props requises 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 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`
`hideProvisioningTab`	`boolean`	Masque l’onglet Fourniture (SCIM). Par défaut : `false`
`hideDeleteProvider`	`boolean`	Masque l’action de suppression du fournisseur. Par défaut : `false`
`hideRemoveFromOrganization`	`boolean`	Masque l’action de retrait de l’organisation. Par défaut : `false`
`hideAttributeMappings`	`boolean`	Masque la section de mappage des attributs. 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

backButtonType : { 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 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 du tenant.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Retirer le fournisseur de l’organisation sans le supprimer du tenant.

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

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

Exemple :

<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.deleteActionType : ComponentAction<IdentityProvider>Contrôle la suppression définitive du fournisseur de votre tenant Auth0. Cette action est irréversible.Exemple :

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

sso.deleteFromOrganizationActionType : ComponentAction<IdentityProvider>Contrôle la suppression du fournisseur de l’organisation. Le fournisseur est détaché de l’organisation mais reste présent dans le locataire et peut être réajouté ultérieurement.Exemple :

sso={{
  deleteFromOrganizationAction: {
    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.createActionType : 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.deleteActionType : 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.createScimTokenActionType : 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.deleteScimTokenActionType : 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 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>`	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.createActionType : 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.verifyActionType : 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.deleteActionType : ComponentAction<Domain>Contrôle la suppression du domaine.Exemple :

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

domains.associateToProviderActionType : 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.deleteFromProviderActionType : ComponentAction<Domain, IdentityProvider | null>Supprime l’association entre un domaine et ce fournisseur.

Propriétés 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.

schemaDé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, requiredprovider.*—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)",
        },
      },
    },
  }}
/>

customMessagesPersonnalisez 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 et contenu des onglets

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

provisioning_tab—Onglet Provisioning

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

domains_tab—Onglet des domaines

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

notifications—Réponses de l’API

provider_update_success, provider_delete_success
provisioning_enable_success, provisioning_disable_success
scim_token_create_success, scim_token_delete_success
Notifications liées aux domaines

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

mise en formePersonnalisez 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
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

<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

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
`useSsoDomainTab`	Gestion des associations de domaines

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 install @auth0/universal-components-react

pnpm add @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 complet d’intégration

import React from "react";
import { SsoProviderEdit } from "@auth0/universal-components-react";
import { useRouter, useSearchParams } from "next/navigation";
import { analytics } from "./lib/analytics";

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

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

export default EditProviderPage;

Props

Props de base

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

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 est rendu, sans en modifier le comportement.

Propriété	Type	Description
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`
`hideProvisioningTab`	`boolean`	Masque l’onglet Provisioning (SCIM). Par défaut : `false`
`hideDeleteProvider`	`boolean`	Masque l’action de suppression du fournisseur. Par défaut : `false`
`hideRemoveFromOrganization`	`boolean`	Masque l’action permettant de retirer le fournisseur de l’organisation. Par défaut : `false`
`hideAttributeMappings`	`boolean`	Masque la section de mappage des attributs. 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

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’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 du tenant.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Retirer le fournisseur de l’organisation sans le supprimer du tenant.

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.deleteActionType : ComponentAction<IdentityProvider>Contrôle la suppression définitive du fournisseur de votre tenant Auth0. Cette action est irréversible.Exemple :

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

sso.deleteFromOrganizationActionType : ComponentAction<IdentityProvider>Permet de retirer le fournisseur de l’organisation. Le fournisseur est dissocié de l’organisation, mais demeure dans le tenant et peut être ajouté de nouveau ultérieurement.Exemple :

sso={{
  deleteFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => router.push("/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: {
    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.deleteActionType : 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: {
    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: {
    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>`	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.createActionType : 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.verifyActionType : 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.deleteActionType : ComponentAction<Domain>Contrôle la suppression du domaine.Exemple :

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

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

domains.deleteFromProviderActionType : 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.

schemaDé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, requiredprovider.*—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)",
        },
      },
    },
  }}
/>

customMessagesPersonnalisez 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 et contenu des onglets

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

provisioning_tab—Onglet Provisioning

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

domains_tab—Onglet des domaines

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

notifications—Réponses de l’API

provider_update_success, provider_delete_success
provisioning_enable_success, provisioning_disable_success
scim_token_create_success, scim_token_delete_success
Notifications liées aux domaines

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

mise en formePersonnalisez 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
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

<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

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
`useSsoDomainTab`	Gestion des associations de domaines

Exigences de configuration

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

Installation

Installez le composant à l’aide du CLI shadcn en utilisant le registre GitHub :

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/sso-provider-edit

Le CLI shadcn installe également la dépendance @auth0/universal-components-core qui fournit des utilitaires partagés et l’intégration à Auth0. Nécessite shadcn CLI v2.5.0+.

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(
                `Permanently delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
          },
          deleteFromOrganizationAction: {
            onBefore: (provider) => {
              return confirm(
                `Remove "${provider.display_name}" from this organization?`,
              );
            },
            onAfter: () => {
              toast.success("Provider removed from organization");
              navigate("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("SCIM provisioning enabled"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("Copy your SCIM token - it won't be shown again"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain} verified`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "Configuration",
            provisioning: "User Sync (SCIM)",
            domains: "Linked Domains",
          },
        }}
        styling={{
          variables: {
            common: { "--color-primary": "#059669" },
          },
        }}
      />
    </div>
  );
}

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

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

Props

Props de base

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

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 est rendu, sans en modifier le comportement.

Propriété	Type	Description
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`
`hideProvisioningTab`	`boolean`	Masque l’onglet Fourniture (SCIM). Par défaut : `false`
`hideDeleteProvider`	`boolean`	Masque l’action de suppression du fournisseur. Par défaut : `false`
`hideRemoveFromOrganization`	`boolean`	Masque l’action permettant de retirer le fournisseur de l’organisation. Par défaut : `false`
`hideAttributeMappings`	`boolean`	Masque la section des mappages d’attributs. 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

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 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 du tenant.
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Retirer le fournisseur de l’organisation sans le supprimer du tenant.

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

Exemple :

<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.deleteActionType : ComponentAction<IdentityProvider>Contrôle la suppression définitive du fournisseur de votre tenant Auth0. Cette action est irréversible.Exemple :

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

sso.deleteFromOrganizationActionType : ComponentAction<IdentityProvider>Contrôle le retrait du fournisseur de l’organisation. Le fournisseur est dissocié de l’organisation, mais demeure dans le tenant et peut être ajouté de nouveau ultérieurement.Exemple :

sso={{
  deleteFromOrganizationAction: {
    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: {
    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.deleteActionType : 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: {
    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: {
    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>`	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.createActionType : 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.verifyActionType : 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.deleteActionType : ComponentAction<Domain>Contrôle la suppression du domaine.Exemple :

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

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

domains.deleteFromProviderActionType : 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.

schemaDé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, requiredprovider.*—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)",
        },
      },
    },
  }}
/>

customMessagesPersonnalisez 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 et contenu des onglets

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

provisioning_tab—Onglet de provisionnement

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

domains_tab—Onglet des domaines

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

notifications—Réponses de l’API

provider_update_success, provider_delete_success
provisioning_enable_success, provisioning_disable_success
scim_token_create_success, scim_token_delete_success
Notifications liées aux domaines

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

mise en formePersonnalisez 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
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

<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

Hooks disponibles

Hook	Description
`useSsoProviderEdit`	Logique de récupération et de modification du fournisseur
`useSsoDomainTab`	Gestion des associations de domaines

​Accès des applications tierces et accès interapplications

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props requis

​Propriétés d’affichage

​Props d’action

​Actions de l’onglet SSO

​Actions de l’onglet Provisioning

​Actions de l’onglet Domaines

​Propriétés de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props de base

​Props d’affichage

​Props d’action

​Actions de l’onglet SSO

​Actions de l’onglet Provisioning

​Actions de l’onglet Domaines

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props de base

​Props d’affichage

​Props d’action

​Actions de l’onglet SSO

​Actions de l’onglet Provisioning

​Actions de l’onglet Domaines

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

Accès des applications tierces et accès interapplications

Exigences de configuration

Installation

Pour commencer

Props

Props requis

Propriétés d’affichage

Props d’action

Actions de l’onglet SSO

Actions de l’onglet Provisioning

Actions de l’onglet Domaines

Propriétés de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props de base

Props d’affichage

Props d’action

Actions de l’onglet SSO

Actions de l’onglet Provisioning

Actions de l’onglet Domaines

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props de base

Props d’affichage

Props d’action

Actions de l’onglet SSO

Actions de l’onglet Provisioning

Actions de l’onglet Domaines

Props de personnalisation

Personnalisation avancée

Hooks disponibles