Création d’un fournisseur SSO

Assistant en plusieurs étapes pour créer des fournisseurs SSO, avec sélection du fournisseur, configuration des détails et paramétrage de l’authentification

Le composant SsoProviderCreate fournit une interface unifiée pour ajouter de nouveaux fournisseurs d’authentification unique (SSO).

React

​

Prérequis de configuration

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

​

Installation

pnpm

pnpm add @auth0/universal-components-react

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

​

Pour commencer

import { SsoProviderCreate } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";

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

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

Exemple d’intégration complet

import React from "react";
import { SsoProviderCreate } from "@auth0/universal-components-react/spa";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./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(`Créer "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => navigate("/sso-providers") }}
        customMessages={{
          header: { title: "Ajouter un nouveau fournisseur SSO" },
        }}
        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' // Obligatoire pour gérer les demandes d’authentification step-up au moyen de la fenêtre contextuelle de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Next.js

​

Exigences de configuration

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

​

Installation

npm (recommandé)

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.

​

Pour commencer

page.tsx

import { SsoProviderCreate } from "@auth0/universal-components-react/rwa";
import { useRouter } from "next/navigation";

export function CreateProviderPage() {
  const router = useRouter();

  return (
    <SsoProviderCreate
      createAction={{
        onAfter: () => router.push("/providers/list"),
      }}
      backButton={{
        onClick: () => router.push("/providers/list"),
      }}
    />
  );
}

Exemple complet d’intégration

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

function CreateSsoProviderPage() {
  const router = useRouter();

  const handleCreateSuccess = (provider, result) => {
    analytics.track("SSO Provider Created", {
      strategy: provider.strategy,
      name: provider.name,
    });
    router.push("/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(`Créer "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => router.push("/sso-providers") }}
        customMessages={{
          header: { title: "Ajouter un nouveau fournisseur SSO" },
        }}
        styling={{
          variables: { common: { "--color-primary": "#059669" } },
        }}
      />
    </div>
  );
}

export default CreateSsoProviderPage;

shadcn

​

Exigences de configuration

Configuration d’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-create.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 avec Auth0.

​

Pour commencer

import { SsoProviderCreate } from "@/components/auth0/my-organization/sso-provider-create";

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

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

Exemple d’intégration complet

import React from "react";
import { SsoProviderCreate } from "@/components/auth0/my-organization/sso-provider-create";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./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(`Créer "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => navigate("/sso-providers") }}
        customMessages={{
          header: { title: "Ajouter un nouveau fournisseur SSO" },
        }}
        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' // Obligatoire pour gérer les demandes d’authentification renforcée via la fenêtre contextuelle d’Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

prop

​

Props requises

Les props requises sont essentielles au fonctionnement du composant. Pour SsoProviderCreate, il n’y a qu’une seule prop essentielle qui détermine ce qui se passe une fois qu’un fournisseur a été créé avec succès.

Prop	Type	Description
createAction	ComponentAction<…>	Obligatoire. Contrôle le flux après la création.

createAction

Type : ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider>

La prop createAction est requise, car elle détermine vers où les utilisateurs sont redirigés une fois qu’un fournisseur a été créé avec succès. Sans elle, le composant ne saurait pas quoi faire ensuite.

Propriétés :

• disabled - Désactive le bouton de création (p. ex., pendant qu’une autre opération est en cours)
• onBefore(data) - S’exécute avant la création du fournisseur. Retournez false pour empêcher la création (p. ex., pour afficher d’abord une boîte de dialogue de confirmation).
• onAfter(data, result) - S’exécute après la création réussie du fournisseur. Utilisez-la pour rediriger vers une autre page ou consigner l’événement.

Exemple :

// Naviguer vers la liste des fournisseurs après la création
createAction={{
  onAfter: () => navigate("/providers/list"),
}}

// Naviguer vers la modification du fournisseur nouvellement créé
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

// Afficher une boîte de dialogue de confirmation avant la création
createAction={{
  onBefore: (provider) => {
    return confirm(`Create SSO provider "${provider.display_name}"?`);
  },
  onAfter: () => navigate("/providers/list"),
}}

---

​

prop d’affichage

Les props d’affichage contrôlent le rendu du composant sans en modifier le comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Prop	Type	Description
readOnly	boolean	Désactive tous les champs du formulaire. Par défaut : false
hideHeader	boolean	Masque la section d’en-tête. Par défaut : false

---

​

Props d’action

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

Prop	Type	Description
backButton	Object	Configuration du bouton Retour.
onNext	Function	Callback de navigation entre les étapes.
onPrevious	Function	Callback de navigation entre les étapes.

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 ou à la page précédente.

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";

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

---

onNext / onPrevious

Type: (stepId: string, values: Partial<SsoProviderFormValues>) => boolean

Contrôlez la navigation entre les étapes de l’assistant. Ces fonctions de rappel sont appelées lorsque l’utilisateur clique sur Suivant ou Précédent. Retournez false pour empêcher le passage à une autre étape.

Cas d’utilisation :

• Valider les données de l’étape avant de poursuivre
• Enregistrer des données analytiques à la fin d’une étape
• Sauter certaines étapes selon des conditions

Paramètres :

• stepId - Identifiant de l’étape en cours ("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;
  }}
/>

---

​

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.

Prop	Type	Description
schema	SsoProviderSchema	Règles de validation des champs.
customMessages	Partial<SsoProviderCreateMessages>	Surcharges de texte i18n.
styling	ComponentStyling<SsoProviderCreateClasses>	Variables CSS et surcharges de classes.

schema

Définissez des règles de validation personnalisées pour les champs du fournisseur. Les règles sont organisées par stratégie de fournisseur (le protocole d’authentification utilisé, comme oidc, samlp, waad, google-apps, adfs, pingfederate ou okta). Tous les champs prennent en charge regex, errorMessage, minLength, maxLength et required.

Champs de schéma disponibles

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

Azure AD

• 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: "Name must be alphanumeric with hyphens/underscores",
    },
    displayName: {
      required: true,
      maxLength: 100,
    },
  }}
/>

---

customMessages

Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs et les valeurs par défaut sont utilisées s’ils ne sont pas fournis.

Messages disponibles

header - En-tête du composant

• title, back_button_text

provider_select - Étape 1

• title, description

provider_details - Étape 2

• title, description
• fields.name - label, placeholder, helper_text, error
• fields.display_name - label, placeholder, helper_text, error

provider_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 Azure AD

notifications - Réponses de l’API

• general_error, provider_create_success

<SsoProviderCreate
  createAction={{}}
  customMessages={{
    header: {
      title: "Add New SSO Provider",
      back_button_text: "Cancel",
    },
    provider_details: {
      title: "Provider Information",
      fields: {
        name: {
          label: "Connection Name",
          helper_text: "Internal identifier for this connection",
        },
      },
    },
    notifications: {
      provider_create_success: "SSO provider created successfully!",
    },
  }}
/>

---

styling

Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Prend en charge un styling adapté au thème.

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

• 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 SsoProviderCreate est constitué de sous-composants et de hooks. Vous pouvez les importer individuellement pour créer des flux personnalisés de création de fournisseurs SSO si vous utilisez shadcn.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels pour créer des flux de création personnalisés de fournisseurs SSO. C’est utile lorsque vous devez intégrer une seule étape dans une autre interface utilisateur ou personnaliser le flux de l’assistant au-delà de ce que les props permettent.

Composant	Description
ProviderSelect	Étape de sélection de la stratégie avec icônes de fournisseur
ProviderDetails	Étape de configuration du nom et du nom affiché
ProviderConfigure	Étape de configuration propre à la stratégie
ProviderConfigureFields	Champs de formulaire dynamiques selon la stratégie
OktaProviderForm	Formulaire de configuration propre à Okta
AdfsProviderForm	Formulaire de configuration propre à ADFS
GoogleAppsProviderForm	Formulaire de configuration propre à Google Workspace
OidcProviderForm	Formulaire de configuration propre à OIDC
PingFederateProviderForm	Formulaire de configuration propre à PingFederate
SamlpProviderForm	Formulaire de configuration propre à SAML
WaadProviderForm	Formulaire de configuration propre à Azure AD
Wizard	Interface utilisateur d’assistant en plusieurs étapes

​

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
useSsoProviderCreate	Logique de création du fournisseur et intégration à l’API