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

> Découvrez comment intégrer Auth0 à votre projet Netlify.

# Intégration à Netlify

<div id="overview">
  ## Aperçu
</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, directement dans votre application, une approche simplifiée de l’identité client.

Utilisez la nouvelle intégration pour créer et personnaliser le parcours 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, relié à votre tenant Auth0, en quelques clics seulement.
* Crée automatiquement une Application dans votre tenant Auth0, connectée à votre projet Netlify.
* Précharge vos identifiants Auth0 dans Netlify, ce qui vous permet d’éviter certaines étapes manuelles du processus.

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

Avant de commencer à intégrer Auth0 à votre projet Netlify, vous devez mettre en place quelques éléments :

* Un compte Netlify avec un projet que vous souhaitez intégrer. Consultez [Créer votre compte Netlify](https://www.netlify.com/) pour créer un compte.
* Une application Web qui nécessite une authentification, comme une application React, 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 **Site Configuration** du site que vous souhaitez connecter à Auth0.
2. Dans la barre latérale, sélectionnez **Auth0** sous **Access & security.**
3. Sélectionnez **Link an Auth0 tenant** et suivez les instructions pour connecter votre compte Auth0. Si vous n’avez pas encore de compte Auth0, vous pouvez vous inscrire à l’adresse [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 tenant dans la liste déroulante, puis sélectionnez **Accept** pour autoriser 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. Une fois votre tenant lié, sélectionnez **Add tenant**.
6. Remplissez les renseignements requis pour votre tenant et votre application, cochez la case **Redeploy site**, puis sélectionnez **Create site tenant**.

   <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 tenant de 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 votre 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 le **<Tooltip tip="Client ID : valeur d’identification attribuée par Auth0 à votre ressource enregistrée." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Client+ID">Client ID</Tooltip>** et le **domaine Auth0**.

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

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

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

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

Vous devriez maintenant avoir configuré les identifiants Auth0 appropriés pour le 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 build. Ainsi, votre application dispose toujours des autorisations nécessaires sans que vous ayez à modifier les fichiers manuellement.

Pour ce faire :

1. Accédez à votre tableau de bord Netlify.
2. Allez à **Site configuration > Build & deploy > Build settings**.
3. Modifiez la **Build command** pour y inclure un script shell avant de lancer le build :

   ```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 à l’aide des variables d’environnement `AUTH0_CLIENT_ID` et `AUTH0_DOMAIN` définies ci-dessus, afin que l’application dispose des bons paramètres Auth0 dans l’environnement d’exécution.

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

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

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

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