> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.auth0-mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="Chargement" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

Le composant `SsoProviderCreate` offre une interface unifiée pour ajouter de nouveaux fournisseurs de [Single Sign-On](/docs/fr-ca/authenticate/enterprise-connections/self-service-enterprise-configuration).

<ComponentLoader componentSelector="sso-provider-create" componentPreviewText="Aperçu du composant Création de fournisseur SSO" />

<h2 id="third-party-application-access-and-cross-app-access">
  Accès des applications tierces et Cross App Access
</h2>

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.

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      Prérequis de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consultez le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    <h2 id="installation">
      Installation
    </h2>

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    <h2 id="get-started">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      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>
        );
      }

      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      Configuration requise
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration Auth0 requise**—Assurez-vous que votre tenant est configuré avec
      l’API My Organization. [Consultez le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-2">
      Installation
    </h2>

    <CodeGroup>
      ```bash npm (Recommandé) wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    <h2 id="get-started-2">
      Pour commencer
    </h2>

    ```tsx page.tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple complet d’intégration">
      ```tsx lines theme={null}
      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;
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      Prérequis de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec
      l’API My Organization. [Consultez le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-3">
      Installation
    </h2>

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

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/sso-provider-create
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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+**.
    </Callout>

    <details>
      <summary>Registre Vercel Legacy (obsolète)</summary>

      Les utilisateurs existants peuvent continuer à utiliser le chemin hébergé par Vercel jusqu’au **17 septembre 2026** :

      ```bash wrap lines theme={null}
      npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-create.json
      ```

      Les nouveaux projets doivent utiliser le chemin du registre GitHub ci-dessus.
    </details>

    <h2 id="get-started-3">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx lines theme={null}
      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>
        );
      }

      ```
    </Accordion>
  </Tab>
</Tabs>

<h2 id="props">
  Props
</h2>

<h3 id="required-props">
  Props requises
</h3>

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.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>createAction</code>
      </td>

      <td>
        <code>ComponentAction\<...></code>
      </td>

      <td>
        <strong>Obligatoire.</strong> Contrôle le flux après la création.
      </td>
    </tr>
  </tbody>
</table>

**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 :**

```tsx wrap lines theme={null}
// 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"),
}}
```

***

<h3 id="display-props">
  Props d’affichage
</h3>

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.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>readOnly</code>
      </td>

      <td>
        <code>boolean</code>
      </td>

      <td>
        Désactive tous les champs du formulaire. Par défaut : <code>false</code>
      </td>
    </tr>
  </tbody>
</table>

***

<h3 id="action-props">
  Props d’action
</h3>

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.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>backButton</code>
      </td>

      <td>
        <code>Object</code>
      </td>

      <td>
        Configuration du bouton de retour.
      </td>
    </tr>

    <tr>
      <td>
        <code>onNext</code>
      </td>

      <td>
        <code>Function</code>
      </td>

      <td>
        Fonction de rappel pour la navigation entre les étapes.
      </td>
    </tr>

    <tr>
      <td>
        <code>onPrevious</code>
      </td>

      <td>
        <code>Function</code>
      </td>

      <td>
        Fonction de rappel pour la navigation entre les étapes.
      </td>
    </tr>
  </tbody>
</table>

**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 :**

```tsx wrap lines theme={null}
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 :**

```tsx wrap lines theme={null}
<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  onNext={(stepId, values) => {
    analytics.track("SSO Wizard Step Completed", { step: stepId });
    return true;
  }}
/>
```

***

<h3 id="customization-props">
  Props de personnalisation
</h3>

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.

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>schema</code>
      </td>

      <td>
        <code>SsoProviderSchema</code>
      </td>

      <td>
        Règles de validation des champs.
      </td>
    </tr>

    <tr>
      <td>
        <code>customMessages</code>
      </td>

      <td>
        <code>Partial\<SsoProviderCreateMessages></code>
      </td>

      <td>
        Remplacements de texte i18n.
      </td>
    </tr>

    <tr>
      <td>
        <code>styling</code>
      </td>

      <td>
        <code>ComponentStyling\<SsoProviderCreateClasses></code>
      </td>

      <td>
        Variables CSS et remplacements de classes.
      </td>
    </tr>
  </tbody>
</table>

**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`.

<Accordion title="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`
</Accordion>

```tsx wrap lines theme={null}
<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.

<Accordion title="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`
</Accordion>

```tsx wrap lines theme={null}
<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.

<Accordion title="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`
</Accordion>

```tsx wrap lines theme={null}
<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",
    },
  }}
/>
```

***

<h2 id="advanced-customization">
  Personnalisation avancée
</h2>

<h3 id="available-hooks">
  Hooks disponibles
</h3>

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.

<table class="table">
  <thead>
    <tr>
      <th>Hook</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <code>useSsoProviderCreate</code>
      </td>

      <td>Logique de création de Provider et intégration au niveau de l’API</td>
    </tr>
  </tbody>
</table>