> ## 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 une interface d’administration déléguée avec l’API My Organization

> Décrit comment utiliser Universal Components pour créer des interfaces d’administration déléguée avec l’API My Organization d’Auth0.

Universal Components vous permet de créer un tableau de bord d’administration en libre-service dans votre propre application. Cela permet à vos clients B2B, à qui vous avez délégué l’administration de leur [Organisation Auth0](/fr-CA/docs/manage-users/organizations), de gérer eux-mêmes leur image de marque, leurs fournisseurs d’identité et leurs domaines vérifiés, sans avoir à accéder à Auth0 Dashboard ni à faire appel à une équipe de soutien pour des tâches administratives de base.

<div id="how-it-works">
  ## Fonctionnement
</div>

Universal Components s’appuie sur la [API My Organization](/fr-CA/docs/api/myorganization), qui utilise des jetons de portée utilisateur, pour créer un [tableau de bord d’administration SSO en libre-service](/fr-CA/docs/authenticate/enterprise-connections/self-service-enterprise-configuration). Lorsqu’un administrateur se connecte à votre tableau de bord intégré à votre application, le SDK Auth0 récupère un Jeton d’accès contenant des scopes propres à l’organisation pour les privilèges d’administration. Les composants utilisent ce jeton pour appeler l’API en tant qu’utilisateur connecté, ce qui garantit que les administrateurs délégués ne peuvent modifier que l’Organisation Auth0 à laquelle ils appartiennent.

<div id="available-components">
  ### Composants disponibles
</div>

Chaque composant est associé à des points de terminaison précis dans l’[API My Organization](/fr-CA/docs/api/myorganization) pour exécuter des tâches administratives.

| **Composant**                                                                                                                                                   | **Point de terminaison API**          |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------ |
| **OrganizationDetailsEdit** — Modifier le nom de l’Organisation, le nom d’affichage, les couleurs de l’image de marque et le logo.                              | `/my-org/details`                     |
| **SsoProviderTable** — Lister, activer, désactiver, supprimer et détacher des fournisseurs d’identité pour le SSO.                                              | `/my-org/identity-providers`          |
| **SsoProviderCreate** — Assistant en plusieurs étapes pour créer des fournisseurs SSO (Okta, ADFS, SAML, OIDC, Google Workspace, Azure AD, Ping Federate).      | `/my-org/identity-providers`          |
| **SsoProviderEdit** — Configurer les paramètres d’authentification, activer le provisionnement et gérer les jetons SCIM ainsi que les associations de domaines. | `/my-org/identity-providers/{idp_id}` |
| **DomainTable** — Créer, vérifier, supprimer et associer des domaines à des fournisseurs d’identité.                                                            | `/my-org/domains`                     |

<div id="configure-auth0-dashboard">
  ## Configurer Auth0 Dashboard
</div>

Avant d’utiliser les composants My Organization, vous devez configurer votre locataire Auth0 avec les [API](/fr-CA/docs/api), les applications et les [scopes](/fr-CA/docs/api/myorganization) adéquats.

<Tabs>
  <Tab title="React">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration dans Auth0 Dashboard** - Suivez toutes les étapes ci-dessous avant d’utiliser les composants My
      Organization.
    </Callout>

    ## **Créer une application**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Cet exemple utilise une application monopage (SPA). Pour les frameworks React à rendu côté serveur, consultez l’onglet Next.js.
    </Callout>

    1. Accédez à [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications). Cliquez sur **Create Application**.

    2. Choisissez **Applications Web à page unique**.

    3. Dans l’onglet **Paramètres**, ajoutez `http://localhost:5173` aux champs suivants :
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. Sous **Expérience de connexion**, sélectionnez :
       <br />A. Utilisateurs d’entreprise.
       <br />B. (Facultatif) Inviter à saisir l’organisation.

    ## **Activer l'API My Organization**

    1. Accédez à [**Auth0 Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications).
    2. Sélectionnez **[API My Organization](/fr-CA/docs/api/myorganization)** et assurez-vous qu’elle est activée pour votre locataire.

    ## **Configurer l'accès à l'application**

    1. Accédez à l’onglet **Application Access**.
    2. Sélectionnez **Edit** pour l’application que vous voulez utiliser.
    3. Configurez les paramètres suivants :
       <br />A. [Profil de connexion](/fr-CA/docs/authenticate/enterprise-connections/connection-profile#connection-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion.
       <br />B. [Profil d’attributs utilisateur](/fr-CA/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur.
       <br />C. [Fournisseurs d’identité](/fr-CA/docs/authenticate/identity-providers) pris en charge : Activez les fournisseurs que vos clients peuvent utiliser.
       <br />D. Comportement lors de la suppression de la connexion : Choisissez **Allow** ou **Allow if Empty**.
       <br />    • **Autoriser** : Les utilisateurs peuvent supprimer des connexions, ce qui supprime tous les utilisateurs de cette connexion.
       <br />    • **Autoriser si vide** : Les utilisateurs peuvent seulement supprimer des connexions qui ne comptent aucun utilisateur.
       <br />E. Autorisation d’accès de l’utilisateur : Choisissez **Non autorisé**, **Autorisé** ou **Toutes**.
       <br />    • **Non autorisé** : Aucune autorisation n’est accordée.
       <br />    • **Autorisé** : Sélectionnez des autorisations précises.
       <br />    • **Toutes** : Inclut toutes les autorisations existantes et futures.
       <br />F. Autorisation d’accès des informations d’identification de l’application : Choisissez **Non autorisé**, **Autorisé** ou **Toutes**.
    4. Cliquez sur **Save**.

    ## **Configurer la base de données et l'utilisateur**

    1. Accédez à [**Auth0 Dashboard > Authentification > Base de données**](https://manage.auth0.com/#/connections/database) pour créer une connexion de base de données.
    2. Sélectionnez l’onglet **Applications** de la connexion, puis activez votre nouvelle application SPA.
    3. Créez un utilisateur test dans cette base de données pour les essais initiaux.

    ## **Configurer le rôle**

    1. Créez un rôle (p. ex., "Administrateur d’organisation").
    2. Ajoutez au rôle les scopes requis de l’API My Organization.

    <Accordion title="Scopes requis">
      ```
          read:my_org:details
          update:my_org:details
          create:my_org:identity_providers
          read:my_org:identity_providers
          update:my_org:identity_providers
          delete:my_org:identity_providers
          update:my_org:identity_providers_detach
          create:my_org:identity_providers_domains
          delete:my_org:identity_providers_domains
          read:my_org:domains
          delete:my_org:domains
          create:my_org:domains
          update:my_org:domains
          read:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_scim_tokens
          delete:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_provisioning
          read:my_org:identity_providers_provisioning
          delete:my_org:identity_providers_provisioning
          read:my_org:configuration
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Le jeton de l’utilisateur n’inclura que les autorisations présentes à la fois dans le rôle qui lui est attribué et dans les paramètres User Access Authorization configurés à l’étape précédente.
    </Callout>

    ## **Créer une organisation**

    1. Accédez à [**Organisations > Créer une organisation**](https://manage.auth0.com/#/organizations).
    2. Configurez l’organisation Auth0 :
       <br />A. Dans **Membres** : ajoutez votre utilisateur test et attribuez-lui le rôle "Administrateur de l’organisation".
       <br />B. Dans **Connexions** : activez votre connexion de base de données.

    ## **Configurer les variables d'environnement**

    1. Créez un fichier `.env` à la racine de votre projet React :

    ```bash theme={null}
    VITE_AUTH0_DOMAIN=your-domain.auth0.com
      VITE_AUTH0_CLIENT_ID=your-spa-client-id
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Vous êtes responsable de vous assurer que votre utilisation de l’API My Organization et des composants d’interface utilisateur intégrables respecte vos politiques de sécurité et les
      lois applicables, y compris les autorisations accordées à vos utilisateurs finaux.
    </Callout>

    <Check>
      L’utilisateur doit être authentifié et être membre de l’Organisation Auth0. Les composants chargent automatiquement les données de l’Organisation à partir du contexte de l’utilisateur actuel. Pour en savoir plus, consultez [Auth0 Universal Components](/fr-CA/docs/get-started/universal-components/universal-components-overview) pour en savoir plus sur l’installation et la configuration de `Auth0ComponentProvider`
    </Check>
  </Tab>

  <Tab title="Next.js">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration dans Auth0 Dashboard** - Suivez toutes les étapes ci-dessous avant d’utiliser les composants My Organization.
    </Callout>

    ## **Créer une application**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Cet exemple utilise une Application Web régulière avec Next.js. Vous pouvez aussi configurer une application monopage en suivant des étapes semblables.
    </Callout>

    1. Accédez à [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications). Sélectionnez **Create Application**.

    2. Choisissez **Application Web régulière**.

    3. Dans l’onglet **Paramètres**, ajoutez `http://localhost:5173` aux champs suivants :
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. Sous **Expérience de connexion**, sélectionnez :
       <br />A. Utilisateurs d’entreprise.
       <br />B. (Facultatif) Inviter à saisir l’organisation.

    ## **Activer l'API My Organization**

    1. Accédez à [**Auth0 Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications).
    2. Sélectionnez **[API My Organization](/fr-CA/docs/api/myorganization)** et assurez-vous qu’elle est activée pour votre locataire.

    ## **Configurer l'accès à l'application**

    1. Accédez à l’onglet **Application Access**.
    2. Sélectionnez **Edit** pour l’application que vous voulez utiliser.
    3. Configurez les paramètres suivants :
       <br />A. [Profil de connexion](/fr-CA/docs/authenticate/enterprise-connections/connection-profile#connection-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion.
       <br />B. [Profil d’attributs utilisateur](/fr-CA/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur.
       <br />C. Fournisseurs d’identité [pris en charge](/fr-CA/docs/authenticate/identity-providers) : Activez les fournisseurs que vos clients peuvent utiliser.
       <br />D. Comportement lors de la suppression de la connexion : Choisissez **Allow** ou **Allow if Empty**.
       <br />    • **Allow** : Les utilisateurs peuvent supprimer des connexions, ce qui supprime tous les utilisateurs de cette connexion.
       <br />    • **Allow if Empty** : Les utilisateurs peuvent seulement supprimer des connexions qui ne comptent aucun utilisateur.
       <br />E. Autorisation d’accès de l’utilisateur : Choisissez **Unauthorized**, **Authorized** ou **All**.
       <br />    • **Unauthorized** : Aucune autorisation n’est accordée.
       <br />    • **Authorized** : Sélectionnez des autorisations précises.
       <br />    • **All** : Inclut toutes les autorisations existantes et futures.
       <br />F. Autorisation d’accès des informations d’identification de l’application : Choisissez **Unauthorized**, **Authorized** ou **All**.
    4. Sélectionnez **Save**.

    ## **Setup Database & User**

    1. Accédez à [**Auth0 Dashboard > Authentification > Base de données**](https://manage.auth0.com/#/connections/database) pour créer une connexion de base de données.
    2. Sélectionnez l’onglet **Applications** de la connexion, puis activez votre nouvelle application SPA.
    3. Créez un utilisateur test dans cette base de données pour les essais initiaux.

    ## **Configurer le rôle**

    1. Créez un rôle (p. ex., "Administrateur d’organisation").
    2. Ajoutez au rôle les scopes requis de l’API My Organization.

    <Accordion title="Scopes requis">
      ```
          read:my_org:details
          update:my_org:details
          create:my_org:identity_providers
          read:my_org:identity_providers
          update:my_org:identity_providers
          delete:my_org:identity_providers
          update:my_org:identity_providers_detach
          create:my_org:identity_providers_domains
          delete:my_org:identity_providers_domains
          read:my_org:domains
          delete:my_org:domains
          create:my_org:domains
          update:my_org:domains
          read:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_scim_tokens
          delete:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_provisioning
          read:my_org:identity_providers_provisioning
          delete:my_org:identity_providers_provisioning
          read:my_org:configuration
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Le jeton de l’utilisateur n’inclura que les autorisations présentes à la fois dans le rôle qui lui est attribué et dans les paramètres User Access Authorization configurés à l’étape précédente.
    </Callout>

    ## **Créer une organisation**

    1. Accédez à [**Organisations > Créer une organisation**](https://manage.auth0.com/#/organizations).
    2. Configurez l’organisation Auth0 :
       <br />A. Dans **Membres** : ajoutez votre utilisateur test et attribuez-lui le rôle "Administrateur de l’organisation".
       <br />B. Dans **Connexions** : activez votre connexion de base de données.

    ## **Configurer les variables d'environnement**

    1. Créez un fichier `.env` à la racine de votre projet React :

    ```bash theme={null}
    NEXT_PUBLIC_AUTH0_DOMAIN=your-domain.auth0.com
    NEXT_PUBLIC_AUTH0_CLIENT_ID=your-client-id
    AUTH0_SECRET=your-secret
    AUTH0_ISSUER_BASE_URL=https://your-domain.auth0.com
    ```

    Pour Next.js avec le SDK @auth0/nextjs-auth0, consultez la [documentation du SDK Auth0 Next.js](https://auth0.com/docs/quickstart/webapp/nextjs) pour obtenir les instructions de configuration complètes.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Vous êtes responsable de vous assurer que votre utilisation de l’API My Organization et des composants d’interface utilisateur intégrables respecte vos politiques de sécurité et les
      lois applicables, y compris les autorisations accordées à vos utilisateurs finaux.
    </Callout>

    <Check>
      L’utilisateur doit être authentifié et être membre de l’Organisation Auth0. Les composants chargent automatiquement les données de l’Organisation à partir du contexte de l’utilisateur actuel. Pour en savoir plus, consultez [Auth0 Universal Components](/fr-CA/docs/get-started/universal-components/universal-components-overview) pour en savoir plus sur l’installation et la configuration de `Auth0ComponentProvider`
    </Check>
  </Tab>

  <Tab title="shadcn">
    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration dans Auth0 Dashboard** - Suivez toutes les étapes ci-dessous avant d’utiliser les composants My
      Organization.
    </Callout>

    ## **Créer une application**

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Cet exemple utilise une Single Page Application, mais vous pouvez aussi configurer une Application Web régulière (RWA) en suivant des étapes similaires.
    </Callout>

    1. Accédez à [**Auth0 Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications). Cliquez sur **Create Application**.

    2. Choisissez **Applications Web à page unique**.

    3. Dans l’onglet **Paramètres**, ajoutez `http://localhost:5173` aux champs suivants :
       <br />A. Allowed Callback URLs
       <br />B. Allowed Logout URLs

    4. Sous **Expérience de connexion**, sélectionnez :
       <br />A. Utilisateurs d’entreprise.
       <br />B. (Facultatif) Inviter à saisir l’organisation.

    ## **Activer l'API My Organization**

    1. Accédez à [**Auth0 Dashboard > Applications > APIs**](https://manage.auth0.com/#/applications).
    2. Sélectionnez **[API My Organization](/fr-CA/docs/api/myorganization)** et assurez-vous qu’elle est activée pour votre locataire.

    ## **Configurer l'accès à l'application**

    1. Accédez à l’onglet **Application Access**.
    2. Sélectionnez **Edit** pour l’application que vous voulez utiliser.
    3. Configurez les paramètres suivants :
       <br />A. [Profil de connexion](/fr-CA/docs/authenticate/enterprise-connections/connection-profile#connection-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion.
       <br />B. [Profil d’attributs utilisateur](/fr-CA/docs/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur.
       <br />C. [Fournisseurs d’identité](/fr-CA/docs/authenticate/identity-providers) pris en charge : Activez les fournisseurs que vos clients peuvent utiliser.
       <br />D. Comportement lors de la suppression de la connexion : Choisissez **Allow** ou **Allow if Empty**.
       <br />    • **Allow** : Les utilisateurs peuvent supprimer des connexions, ce qui supprime tous les utilisateurs de cette connexion.
       <br />    • **Allow if Empty** : Les utilisateurs peuvent seulement supprimer les connexions qui ne comptent aucun utilisateur.
       <br />E. Autorisation d’accès de l’utilisateur : Choisissez **Unauthorized**, **Authorized** ou **All**.
       <br />    • **Unauthorized** : Aucune autorisation n’est accordée.
       <br />    • **Authorized** : Sélectionnez des autorisations précises.
       <br />    • **All** : Inclut toutes les autorisations existantes et futures.
       <br />F. Autorisation d’accès des informations d’identification de l’application : Choisissez **Unauthorized**, **Authorized** ou **All**.
    4. Cliquez sur **Save**.

    ## **Setup Database & User**

    1. Accédez à [**Auth0 Dashboard > Authentification > Base de données**](https://manage.auth0.com/#/connections/database) pour créer une connexion de base de données.
    2. Sélectionnez l’onglet **Applications** de la connexion, puis activez votre nouvelle application SPA.
    3. Créez un utilisateur test dans cette base de données pour les essais initiaux.

    ## **Configurer le rôle**

    1. Créez un rôle (p. ex., "Administrateur d’organisation").
    2. Ajoutez au rôle les scopes requis de l’API My Organization.

    <Accordion title="Scopes requis">
      ```
          read:my_org:details
          update:my_org:details
          create:my_org:identity_providers
          read:my_org:identity_providers
          update:my_org:identity_providers
          delete:my_org:identity_providers
          update:my_org:identity_providers_detach
          create:my_org:identity_providers_domains
          delete:my_org:identity_providers_domains
          read:my_org:domains
          delete:my_org:domains
          create:my_org:domains
          update:my_org:domains
          read:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_scim_tokens
          delete:my_org:identity_providers_scim_tokens
          create:my_org:identity_providers_provisioning
          read:my_org:identity_providers_provisioning
          delete:my_org:identity_providers_provisioning
          read:my_org:configuration
      ```
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Le jeton de l’utilisateur n’inclura que les autorisations présentes à la fois dans le rôle qui lui est attribué et dans les paramètres User Access Authorization configurés à l’étape précédente.
    </Callout>

    ## **Créer une organisation**

    1. Accédez à [**Organisations > Créer une organisation**](https://manage.auth0.com/#/organizations).
    2. Configurez l’organisation Auth0 :
       <br />A. Dans **Membres** : ajoutez votre utilisateur test et attribuez-lui le rôle "Administrateur de l’organisation".
       <br />B. Dans **Connexions** : activez votre connexion de base de données.

    ## **Configurer les variables d'environnement**

    <Warning>
      La configuration des variables d’environnement varie selon le framework et l’environnement en place. Consultez le répertoire `examples/` du dépôt pour des exemples d’implémentation précis.
    </Warning>

    Créez un fichier `.env` à la racine de votre projet React :

    ```bash theme={null}
    VITE_AUTH0_DOMAIN=your-domain.auth0.com
    VITE_AUTH0_CLIENT_ID=your-spa-client-id
    ```

    <Warning>
      Vous êtes responsable de vous assurer que votre utilisation de l’API My Organization et des composants d’interface utilisateur intégrables respecte vos politiques de sécurité et les
      lois applicables, y compris les autorisations accordées à vos utilisateurs finaux.
    </Warning>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      L’utilisateur doit être authentifié et être membre de l’Organisation Auth0. Les composants chargent automatiquement les données de l’Organisation à partir du contexte de l’utilisateur actuel. Pour en savoir plus, consultez [Auth0 Universal Components](/fr-CA/docs/get-started/universal-components/universal-components-overview) pour en savoir plus sur l’installation et la configuration de `Auth0ComponentProvider`
    </Callout>
  </Tab>
</Tabs>