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

> Documentation pour intégrer Auth0 à Netlify

# Intégrer Auth0 à Netlify

<div id="overview">
  ## Vue d’ensemble
</div>

Connectez une instance Auth0, nouvelle ou existante, à votre projet Netlify pour améliorer la sécurité, l’évolutivité et la personnalisation de votre application grâce à l’intégration Auth0. Cette intégration vous permet de mettre en place une approche simplifiée de l’identité client directement dans votre application.

Utilisez la nouvelle intégration pour créer et personnaliser le flux d’identité de votre projet Netlify. Pour mettre votre application en service rapidement et en toute sécurité, cette intégration :

* Configure un environnement de production dans Netlify qui s’intègre à votre locataire Auth0 en quelques clics seulement.
* Crée automatiquement une application dans votre locataire Auth0 qui se connecte à votre projet Netlify.
* Précharge vos identifiants Auth0 dans Netlify, ce qui vous permet d’éviter certaines étapes manuelles de ce processus.

<div id="prerequisites">
  ## Prérequis
</div>

Pour commencer à intégrer Auth0 à votre projet Netlify, vous devez d’abord configurer les éléments suivants :

* Un compte Netlify associé au projet que vous souhaitez intégrer. Consultez [Créez votre compte Netlify](https://www.netlify.com/) pour créer un compte.
* Une application Web qui nécessite une authentification, comme une application React ou Vue, ou un site statique avec des fonctions sans serveur.

<div id="add-a-netlify-integration">
  ## Ajouter une intégration Netlify
</div>

Après avoir créé votre compte Netlify et ouvert une session dans votre tableau de bord, vous pouvez commencer à ajouter une intégration. Pour ajouter l’intégration Auth0 à un projet Netlify existant :

1. Dans le tableau de bord Netlify, accédez à **Extensions > Directory.**
2. Recherchez [**Auth0**](https://app.netlify.com/extensions/auth0) et sélectionnez **Install.**
3. Sélectionnez **Install** pour lancer l’installation dans votre portail d’intégration Auth0.

<Frame>
  <img src="https://mintcdn.com/translations/raZlN0BXDjNonwyb/docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png?fit=max&auto=format&n=raZlN0BXDjNonwyb&q=85&s=1ad114f4beafeb5162299c2fed2d244c" alt="" width="2234" height="1222" data-path="docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png" />
</Frame>

<div id="connect-your-site">
  ## Connectez votre site
</div>

Pour connecter votre site à Auth0 :

1. Accédez à la **Configuration du site** du site que vous souhaitez connecter à Auth0.
2. Dans la barre latérale, sélectionnez **Auth0** sous **Accès et sécurité.**
3. Sélectionnez **Lier un locataire Auth0** et suivez les instructions pour lier votre compte Auth0. Si vous n’avez pas encore de compte Auth0, vous pouvez vous inscrire à [https://auth0.com/signup](https://auth0.com/signup).

   <Frame>
     <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=d5f97658ddc8049face10d4093258f0a" alt="" width="886" height="1424" data-path="docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png" />
   </Frame>
4. Sélectionnez votre locataire dans la liste déroulante, puis sélectionnez **Accepter** pour autoriser l’accès à votre compte.

   <Frame>
     <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=9f69230b2779b2f1849027c613894696" alt="" width="1966" height="846" data-path="docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png" />
   </Frame>
5. Après avoir lié votre locataire, sélectionnez **Ajouter un locataire**.
6. Remplissez les renseignements requis pour votre locataire et votre application, cochez la case **Redéployer le site**, puis sélectionnez **Créer le locataire du site**.

   <Frame>
     <img src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=a0a034de759f1f95df4d26e0e821e331" alt="" width="2436" height="2444" data-path="docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png" />
   </Frame>
7. Vous devriez maintenant voir le locataire du site lié avec succès dans la configuration de votre site.

   <Frame>
     <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=049ecdd1543816ff9fab4904d645f1d2" alt="" width="2362" height="750" data-path="docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png" />
   </Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Vous devriez maintenant voir votre application cliente et votre API dans Auth0 Dashboard, sous **Applications**.
</Callout>

<div id="set-up-the-integration">
  ## Configurer l’intégration
</div>

Lorsque vous intégrez Auth0 à votre projet Netlify, vous devez fournir à votre application des paramètres d’authentification, comme l’**<Tooltip tip="ID client : valeur d’identification attribuée par Auth0 à votre ressource enregistrée." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Client+ID">ID client</Tooltip>** et le **domaine Auth0**.

Si votre application lit ces paramètres à partir de variables d’environnement, elles sont injectées automatiquement par l’extension.

1. Accédez à votre tableau de bord Netlify.
2. Accédez à **configuration du site > Environment variables.**
3. Cliquez sur **Add a variable**, puis saisissez :

   * `AUTH0_CLIENT_ID` (votre ID client Auth0)
   * `AUTH0_DOMAIN` (votre domaine Auth0)

     <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
       Ces variables, ainsi que toutes les autres informations sur l’application, se trouvent dans votre Auth0 Dashboard, sous **Applications > \[Votre application] > Settings**.
     </Callout>

Vous avez maintenant configuré les identifiants Auth0 nécessaires au déploiement.

<div id="populate-a-configuration-file">
  ### Renseigner un fichier de configuration
</div>

Si votre application lit les paramètres Auth0 à partir d’un fichier, vous pouvez automatiser ce processus pendant la phase de compilation. Ainsi, votre application dispose toujours des paramètres d’autorisation appropriés, sans que vous ayez à modifier manuellement des fichiers.

Pour ce faire :

1. Accédez à votre tableau de bord Netlify.
2. Accédez à **configuration du site > Build & deploy > Build settings**.
3. Modifiez la **Build command** pour inclure un script shell avant de lancer la compilation :

   ```bash wrap lines theme={null}
   echo "{\"clientId\": \"${AUTH0_CLIENT_ID}\", \"domain\": \"${AUTH0_DOMAIN}\"}" > auth_config.json && npm run build
   ```

Ce script crée un fichier JSON nommé `auth_config.json` et le renseigne avec les variables d’environnement `AUTH0_CLIENT_ID` et `AUTH0_DOMAIN` définies ci-dessus, ce qui garantit que l’application dispose des paramètres Auth0 appropriés à l’exécution.

<div id="manage-integration">
  ## Gérer l’intégration
</div>

Après avoir ajouté l’intégration Auth0 à votre projet Netlify, le <Tooltip tip="Auth0 Dashboard : le produit principal d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip> crée une nouvelle application pour gérer et personnaliser votre flux de travail CIAM.

1. Accédez à Auth0 Dashboard.
2. Sélectionnez **Applications > Applications > \[Votre application Netlify]**
3. Confirmez l’URI de l’application Netlify dans **Settings > Application URIs**.

Vous pouvez maintenant personnaliser et modifier cette application comme toute autre application dans votre Auth0 Dashboard.