Créer des fournisseurs SSO sur le Web

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

Accès des applications tierces et Cross App Access

Ces contrôles s’affichent uniquement lorsque l’Organization dispose d’un accès complet à la connexion SSO. Pour les connexions à accès 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’Organization est définie sur "block", cette case à cocher reste visible, mais est désactivée — un message explicatif demande à l’administrateur d’activer d’abord l’accès tiers au niveau de l’Organization. cross_app_access_resource_app configure Cross App Access (XAA). Cette fonctionnalité est offerte directement pour les connexions OIDC et Okta, ainsi que pour les connexions SAML au moyen d’une URL de découverte OIDC qui doit d’abord être fournie. Sa disponibilité est contrôlé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 tiers : la politique third_party_client_access au niveau de l’Organization et le paramètre use_for_third_party_client_access au niveau de la connexion.

React
Next.js
shadcn

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

npm install @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>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Configuration requise

Configuration Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consultez 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 { 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;

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

Installez le composant au moyen de la CLI shadcn à l’aide du registre GitHub :

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

La 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 { 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>
        <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`

Props d’action

Les props d’action gèrent les interactions 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 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
third_party_access—title, label, helper_text
cross_app_access—title, label, helper_text, domain_verification_text, saml_description, saml_discovery_url_label, saml_discovery_url_placeholder, saml_discovery_url_helper

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",
        },
      },
    },
    provider_configure: {
      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.",
      },
    },
    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
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

<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

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

Web Components

iOS Components

Android Components

Créer des fournisseurs SSO sur le Web

Accès des applications tierces et Cross App Access

Prérequis de configuration

Installation

Pour commencer

Configuration requise

Installation

Pour commencer

Prérequis de configuration

Installation

Pour commencer

Props

Props requises

Props d’affichage

Props d’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

​Accès des applications tierces et Cross App Access

​Prérequis de configuration

​Installation

​Pour commencer

​Configuration requise

​Installation

​Pour commencer

​Prérequis de configuration

​Installation

​Pour commencer

​Props

​Props requises

​Props d’affichage

​Props d’action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

Accès des applications tierces et Cross App Access

Prérequis de configuration

Installation

Pour commencer

Configuration requise

Installation

Pour commencer

Prérequis de configuration

Installation

Pour commencer

Props

Props requises

Props d’affichage

Props d’action

Props de personnalisation

Personnalisation avancée

Hooks disponibles