> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/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)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </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>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="Chargement" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} 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>;

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

<Tabs>
  <Tab title="React">
    ## Prérequis de configuration

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

    ## Installation

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

    ## Pour commencer

    ```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 wrap 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 domain={domain}>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    ## Configuration requise

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

    ## Installation

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

    ## Pour commencer

    ```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 wrap 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">
    ## Prérequis de configuration

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

    ## Installation

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

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

    ## Pour commencer

    ```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 wrap 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 domain={domain}>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

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

<div id="props">
  ## Props
</div>

<div id="required-props">
  ### Props requises
</div>

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

***

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

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>

    <tr>
      <td>
        <code>hideHeader</code>
      </td>

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

      <td>
        Masque la section d’en-tête. Par défaut : <code>false</code>
      </td>
    </tr>
  </tbody>
</table>

***

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

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.

<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;
  }}
/>
```

***

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

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

  **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",
        },
      },
    },
    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`
</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",
    },
  }}
/>
```

***

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

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.

<div id="available-subcomponents">
  ### Sous-composants disponibles
</div>

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.

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

  <tbody>
    <tr>
      <td>
        <code>ProviderSelect</code>
      </td>

      <td>Étape de sélection de la stratégie avec icônes de fournisseurs</td>
    </tr>

    <tr>
      <td>
        <code>ProviderDetails</code>
      </td>

      <td>Étape de configuration du nom et du nom d’affichage</td>
    </tr>

    <tr>
      <td>
        <code>ProviderConfigure</code>
      </td>

      <td>Étape de configuration propre à la stratégie</td>
    </tr>

    <tr>
      <td>
        <code>ProviderConfigureFields</code>
      </td>

      <td>Champs de formulaire dynamiques selon la stratégie</td>
    </tr>

    <tr>
      <td>
        <code>OktaProviderForm</code>
      </td>

      <td>Formulaire de configuration propre à Okta</td>
    </tr>

    <tr>
      <td>
        <code>AdfsProviderForm</code>
      </td>

      <td>Formulaire de configuration propre à ADFS</td>
    </tr>

    <tr>
      <td>
        <code>GoogleAppsProviderForm</code>
      </td>

      <td>Formulaire de configuration propre à Google Workspace</td>
    </tr>

    <tr>
      <td>
        <code>OidcProviderForm</code>
      </td>

      <td>Formulaire de configuration propre à OIDC</td>
    </tr>

    <tr>
      <td>
        <code>PingFederateProviderForm</code>
      </td>

      <td>Formulaire de configuration propre à PingFederate</td>
    </tr>

    <tr>
      <td>
        <code>SamlpProviderForm</code>
      </td>

      <td>Formulaire de configuration propre à SAML</td>
    </tr>

    <tr>
      <td>
        <code>WaadProviderForm</code>
      </td>

      <td>Formulaire de configuration propre à Azure AD</td>
    </tr>

    <tr>
      <td>
        <code>Wizard</code>
      </td>

      <td>Interface utilisateur d’un assistant à plusieurs étapes</td>
    </tr>
  </tbody>
</table>

<div id="available-hooks">
  ### Hooks disponibles
</div>

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>