Passer au contenu principal

​
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 { SsoProviderCreate } from '@auth0/universal-components-react/spa';

export function CreateProviderPage() {
  const navigate = useNavigate();

return (

<SsoProviderCreate
createAction={{
        onAfter: () => navigate("/providers/list"),
      }}
backButton={{
        onClick: () => navigate("/providers/list"),
      }}
/>
);
}
Bien que cet exemple utilise une application à page unique React, les configurations des propriétés (schéma, customMessages, styling, etc.) s’appliquent également aux configurations Next.js et shadcn.
importer React à partir de « react »;
importer { SsoProviderCreate } à partir de « @auth0/universal-components-react/spa »;
importer { Auth0Provider } à partir de « @auth0/auth0-react »;
importer { Auth0ComponentProvider } à partir de « @auth0/universal-components-react/spa »;
importer { useNavigate } à partir de « react-router-dom »;
importer { analytics } à partir de « ./lib/analytics »;

function CreateSsoProviderPage() {
  const navigate = useNavigate();

  const handleCreateSuccess = (provider, result) => {
    analytics.track("SSO Provider Created", {
      strategy: provider.strategy,
      name: provider.name,
    });
    navigate("/sso-providers");
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderCreate
        schema={{
          name: { required: true, minLength: 3, maxLength: 50 },
        }}
        createAction={{
          onBefore: (provider) => confirm(`Create "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => navigate("/sso-providers") }}
        customMessages={{
          header: { title: "Add New SSO Provider" },
        }}
        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>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​
Propriétés

​
Propriétés essentielles

Les propriétés essentielles sont fondamentales pour le fonctionnement du composant. Pour SsoProviderCreate, il n’existe qu’une seule propriété essentielle qui contrôle ce qui se passe après la création réussie d’un fournisseur.
PropriétéTypeDescription
createActionComponentAction<...>**Obligatoire.**Contrôle le flux après la création. Détails

​
createAction

Type : ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider> La propriété createAction est obligatoire, car elle détermine la page vers laquelle les utilisateurs sont redirigés après la création réussie d’un fournisseur. Sans elle, le composant ne sait pas quoi faire ensuite. Propriétés :
  • disabled – Désactiver le bouton de création (p. ex., lorsqu’une autre opération est en cours).
  • onBefore(data) – S’exécute avant la création du fournisseur. Renvoie false pour empêcher la création (p. ex., pour afficher d’abord une fenêtre de confirmation).
  • onAfter(data, result) – S’exécute une fois le fournisseur créé avec succès. À utiliser pour accéder à une autre page ou suivre l’événement.
Modèles courants : 
// Navigate to providers list after creation
createAction={{
  onAfter: () => navigate("/providers/list"),
}}

// Navigate to edit the newly created provider
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

// Add confirmation dialog before creation
createAction={{
  onBefore: (provider) => {
    return confirm(`Create SSO provider "${provider.display_name}"?`);
  },
  onAfter: () => navigate("/providers/list"),
}}

​
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. Veuillez les utiliser pour masquer des sections ou activer le mode lecture seule.
PropriétéTypeDescription
readOnlybooleanDésactivez toutes les entrées de formulaire. Valeur par défaut : false
hideHeaderbooleanMasquer la section d’en-tête. Valeur par défaut : false

​
Propriétés d’action

Les propriétés d’action gèrent les interactions de l’utilisateur au-delà du flux de création principal. Elles contrôlent la navigation et le comportement des étapes de l’assistant.
PropriétéTypeDescription
backButtonObjectConfiguration du bouton Retour. Détails
onNextFunctionRappel de navigation par étapes. Détails
onPreviousFunctionFonction de navigation entre les étapes. Détails

​
backButton

Type : { icon?: LucideIcon; onClick: (e: MouseEvent) => void } Configure le bouton Retour dans l’en-tête du composant. À utiliser pour revenir à la liste de vos fournisseurs ou à la page précédente. 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";

<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/providers/list"),
  }}
/>;

​
onNext / onPrevious

Type : (stepId: string, values: Partial<SsoProviderFormValues>) => boolean Contrôle la navigation entre les étapes de l’assistant. Ces fonctions sont appelées lorsque l’utilisateur clique sur Suivant ou Précédent. Renvoie false pour empêcher la navigation. Cas d’utilisation :
  • Valider les données de l’étape avant de continuer
  • Analyse des journaux pour la réalisation des étapes
  • Ignorer des étapes sous certaines conditions
Paramètres :
  • stepId – Identificateur de l’étape actuelle ("provider-select", "provider-details", "provider-configure")
  • values – Valeurs actuelles du formulaire
Exemple : 
<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  onNext={(stepId, values) => {
    analytics.track("SSO Wizard Step Completed", { step: stepId });
    return true;
  }}
/>

​
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éTypeDescription
schemaSsoProviderSchemaRègles de validation des champs. Détails
customMessagesPartial<SsoProviderCreateMessages>Remplacement du texte i18n. Détails
stylingComponentStyling<SsoProviderCreateClasses>Variables CSS et remplacements de classe. Détails

​
schéma

Définir des règles de validation personnalisées pour les champs du fournisseur. Les règles sont organisées par stratégie du fournisseur (le protocole d’authentification utilisé, tel que oidc, samlp, waad, google-apps, adfs, pingfederate ou okta). Tous les champs prennent en charge regex, errorMessage, minLength, maxLength et required.
Détails du fournisseur
  • name, displayName
Okta
  • okta.domain, okta.client_id, okta.client_secret, okta.icon_url, okta.callback_url
ADFS
  • adfs.meta_data_source, adfs.meta_data_location_url, adfs.adfs_server, adfs.fedMetadataXml
Google Workspace
  • google-apps.domain, google-apps.client_id, google-apps.client_secret, google-apps.icon_url, google-apps.callback_url
OIDC
  • oidc.type, oidc.client_id, oidc.client_secret, oidc.discovery_url, oidc.isFrontChannel
PingFederate
  • pingfederate.signatureAlgorithm, pingfederate.digestAlgorithm, pingfederate.signSAMLRequest, pingfederate.metadataUrl, pingfederate.signingCert, pingfederate.idpInitiated, pingfederate.icon_url
SAML
  • samlp.meta_data_source, samlp.single_sign_on_login_url, samlp.signatureAlgorithm, samlp.digestAlgorithm, samlp.protocolBinding, samlp.signSAMLRequest, samlp.bindingMethod, samlp.metadataUrl, samlp.cert, samlp.idpInitiated, samlp.icon_url
Microsoft Entra ID
  • waad.domain, waad.client_id, waad.client_secret, waad.icon_url, waad.callback_url
<SsoProviderCreate
  createAction={{}}
  schema={{
    name: {
      minLength: 3,
      maxLength: 50,
      regex: /^[a-zA-Z0-9-_]+$/,
      errorMessage: « Le nom doit être alphanumérique et comporter des tirets/traits de soulignement »,
    },
    displayName: {
      required: true,
      maxLength: 100,
    },
  }}
/>

​
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.
en-tête – En-tête du composant
  • title, back_button_text
provider_select – Étape 1– title, descriptionprovider_details – Étape 2– title, description – fields.name - label, placeholder, helper_text, error – fields.display_name - label, placeholder, helper_text, errorprovider_configure – Étape 3– title, description, guided_setup_button_text – fields.okta – Champs Okta – fields.adfs – Champs ADFS – fields.google-apps – Champs Google Workspace – fields.oidc – Champs OIDC – fields.pingfederate – Champs PingFederate – fields.samlp – Champs SAML – fields.waad – Champs Microsoft Entra IDnotifications – Réponses API– general_error, provider_create_success
<SsoProviderCreate
  createAction={{}}
  customMessages={{
    header: {
      title: « Ajouter un nouveau fournisseur SSO »,
      back_button_text: « Annuler »,
    },
    provider_details: {
      title: « Informations sur le fournisseur »,
      fields: {
        name: {
          label: « Nom de la connexion »,
          helper_text: « Identificateur interne pour cette connexion »,
        },
      },
    },
    notifications: {
      provider_create_success: « Fournisseur SSO créé 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.
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– SsoProviderCreate-header – SsoProviderCreate-wizard – ProviderSelect-root – ProviderDetails-root –ProviderConfigure-root
<SsoProviderCreate
  createAction={{}}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderCreate-wizard": "shadow-xl rounded-xl",
      "ProviderSelect-root": "grid grid-cols-3 gap-6",
    },
  }}
/>

​
Personnalisation avancée

Le composant SsoProviderCreateest constitué de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de production personnalisés de création de fournisseurs SSO si vous utilisez shadcn.

​
Sous-composants disponibles

Pour les cas d’utilisation avancés, il est possible d’importer des sous-composants individuels afin de créer des flux de production personnalisés pour la création de fournisseurs SSO. Cela est utile lorsque vous devez intégrer une étape unique dans une interface utilisateur différente ou personnaliser le flux de l’assistant au-delà de ce que permettent les propriétés.
ComposantDescription
ProviderSelectÉtape de sélection de la stratégie avec icônes des fournisseurs
ProviderDetailsÉtape de configuration du nom et du nom d’affichage
ProviderConfigureÉtape de configuration propre à la stratégie
ProviderConfigureFieldsChamps de formulaire dynamiques basés sur la stratégie
OktaProviderFormFormulaire de configuration propre à Okta
AdfsProviderFormFormulaire de configuration propre à ADFS
GoogleAppsProviderFormFormulaire de configuration propre à Google Workspace
OidcProviderFormFormulaire de configuration propre à OIDC
PingFederateProviderFormFormulaire de configuration propre à PingFederate
SamlpProviderFormFormulaire de configuration propre à SAML
WaadProviderFormFormulaire de configuration propre à Microsoft Entra ID
WizardInterface utilisateur de l’assistant multi-étapes

​
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.
HookDescription
useSsoProviderCreateLogique de création des fournisseurs et intégration API