Créer des fournisseurs SSO sur le Web

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

Le composant SsoProviderCreate offre une interface unifiée pour ajouter de nouveaux fournisseurs de Single Sign-On.

React

​

Prérequis de configuration

Configuration Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez 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";
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";
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(`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() {
  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 dans une fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Next.js

​

Configuration requise

Configuration Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez 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 qui fournit des utilitaires partagés et l’intégration à Auth0.

​

Pour commencer

page.tsx

import { SsoProviderCreate } from "@auth0/universal-components-react";
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";
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(`Create "${provider.display_name}"?`),
          onAfter: handleCreateSuccess,
        }}
        backButton={{ onClick: () => router.push("/sso-providers") }}
        customMessages={{
          header: { title: "Add New SSO Provider" },
        }}
        styling={{
          variables: { common: { "--color-primary": "#059669" } },
        }}
      />
    </div>
  );
}

export default CreateSsoProviderPage;

shadcn

​

Prérequis de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez 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 qui fournit des utilitaires partagés et l’intégration à 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(`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() {
  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 d’une fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props requises

Les props requises sont essentielles au fonctionnement du composant. Pour SsoProviderCreate, il n’y a qu’une seule prop principale, qui détermine ce qui se passe après la création réussie d’un fournisseur.

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

createAction

Type : ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider>

La prop createAction est obligatoire, car elle détermine vers quelle page les utilisateurs sont redirigés après la création réussie d’un fournisseur. Sans elle, le composant ne saurait pas quoi faire ensuite.

Propriétés :

• disabled—Désactive le bouton de création (par exemple, lorsqu’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 (par exemple, afin d’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-le pour naviguer vers une autre page ou suivre l’événement.

Exemple :

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

// Accéder à la page de modification du fournisseur nouvellement créé
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

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

---

​

Props 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 utilisateur au-delà du processus 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 de retour.
onNext	Function	Fonction de rappel pour la navigation entre les étapes.
onPrevious	Function	Fonction de rappel pour la navigation entre les étapes.

backButton

Type : { icon?: LucideIcon; onClick: (e: MouseEvent) => void }

Configure le bouton de 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; ArrowLeft par défaut)
• 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 callbacks sont appelés lorsque l’utilisateur clique sur Suivant ou Précédent. Retournez false pour empêcher la navigation.

Cas d’utilisation :

• Valider les données de l’étape avant de poursuivre
• Consigner des données analytiques à la fin d’une étape
• Ignorer certaines étapes de façon conditionnelle

Paramètres :

• stepId—Identifiant 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;
  }}
/>

---

​

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>	Remplacements de texte i18n.
styling	ComponentStyling<SsoProviderCreateClasses>	Variables CSS et remplacements 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!",
    },
  }}
/>

---

style

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

Options de style disponibles

Variables—propriétés personnalisées CSS

• common—Appliquées à tous les thèmes
• light—Thème clair uniquement
• dark—Thème foncé uniquement

Classes—surcharges de classes de 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 SsoProviderCreate se compose de sous-composants et de hooks. Vous pouvez les importer individuellement pour créer des workflows 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 afin de créer des workflows personnalisés de création de fournisseurs SSO. C’est utile lorsque vous devez intégrer une étape unique à une autre interface utilisateur ou personnaliser le flux de l’assistant au-delà de ce que permettent les props.

Composant	Description
ProviderSelect	Étape de sélection de la stratégie avec icônes de fournisseurs
ProviderDetails	Étape de configuration du nom et du nom d’affichage
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’un assistant à 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 au niveau de l’API Auth0.

Hook	Description
useSsoProviderCreate	Logique de création de Provider et intégration au niveau de l’API