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

> Documentation for integrating Auth0 into Netlify

# Integrate with Netlify

## Overview

Connect a new or existing Auth0 instance to your Netlify project to enhance your app's security, scalability, and customization using the Auth0 Integration. This integration allows you to implement a streamlined customer identity approach directly in your application.

Use the new integration to build and customize the identity flow for your Netlify project. To get your app up and running quickly and securely, this integration:

* Sets up a production environment in Netlify that integrates with your Auth0 tenant in just a few clicks.
* Automatically creates an Application in your Auth0 tenant that connects with your Netlify project.
* Pre-loads your Auth0 credentials into Netlify, allowing you to skip some of the manual steps in this process.

## Prerequisites

To begin integrating Auth0 into your Netlify project, there are a few requirements that you'll need to set up before getting started:

* A Netlify account with a project that you would like to integrate with. Visit [Create your Netlify account](https://www.netlify.com/) to create an account.
* A web application that requires authentication, such as a React, Vue, or static site with serverless functions.

## Add a Netlify integration

After creating your Netlify account and logging in to your dashboard, you can begin the process of adding an integration. To add the Auth0 integration to an existing Netlify project:

1. From the Netlify dashboard, navigate to **Extensions > Directory.**
2. Search for [**Auth0**](https://app.netlify.com/extensions/auth0)and select **Install.**
3. Select **Install** to proceed with the installation to your Auth0 integration portal.

<Frame>
  <img src="https://mintcdn.com/docs-staging-actions-triggers-prototype/2DQIk_7pOO3Z71x8/docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png?fit=max&auto=format&n=2DQIk_7pOO3Z71x8&q=85&s=29070c91983cc7b6cadb05d99d18a171" alt="" width="2234" height="1222" data-path="docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png" />
</Frame>

## Connect your site

To connect your site to Auth0:

1. Navigate to the **Site Configuration** for the site you want to connect to Auth0.
2. In the sidebar, select **Auth0** under **Access & security.**
3. Select **Link an Auth0 tenant** and follow the prompts to connect to your Auth0 account. If you don't already have an Auth0 account, you can sign up at [https://auth0.com/signup](https://auth0.com/signup).

   <Frame>
     <img src="https://mintcdn.com/docs-staging-actions-triggers-prototype/BCluj8cbseLQ7dvz/docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png?fit=max&auto=format&n=BCluj8cbseLQ7dvz&q=85&s=76d6b1944b896eb3a3b1692ac3e97184" alt="" width="886" height="1424" data-path="docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png" />
   </Frame>
4. Select your tenant from the dropdown list, and select **Accept** to authorize your account.

   <Frame>
     <img src="https://mintcdn.com/docs-staging-actions-triggers-prototype/n5Xjoaq5reGHleJi/docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png?fit=max&auto=format&n=n5Xjoaq5reGHleJi&q=85&s=e47ee35cc0257f55f5e490512e02463f" alt="" width="1966" height="846" data-path="docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png" />
   </Frame>
5. After you have linked your tenant, select **Add tenant**.
6. Fill out the required information for your tenant and application, enable the **Redeploy site** checkbox and select **Create site tenant**.

   <Frame>
     <img src="https://mintcdn.com/docs-staging-actions-triggers-prototype/d34J0f8uC103DggY/docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png?fit=max&auto=format&n=d34J0f8uC103DggY&q=85&s=d02d9af2fd0797bcffada56817215b28" alt="" width="2436" height="2444" data-path="docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png" />
   </Frame>
7. You should now see the successfully linked site tenant in your site configuration.

   <Frame>
     <img src="https://mintcdn.com/docs-staging-actions-triggers-prototype/1PH2qC0V_inS4tw1/docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png?fit=max&auto=format&n=1PH2qC0V_inS4tw1&q=85&s=79fc7d0b978cf88d55e7548405a78d0f" alt="" width="2362" height="750" data-path="docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png" />
   </Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  You should now see your client application and API in your Auth0 dashboard under **Applications**.
</Callout>

## Set up the integration

When integrating Auth0 with your Netlify project, you'll need to provide your application with authentication settings such as the **<Tooltip tip="Client ID: Identification value given to your registered resource from Auth0." cta="View Glossary" href="/docs/glossary?term=Client+ID">Client ID</Tooltip>** and **Auth0 domain**.

If your application is reading these settings from environment variables, they are injected automatically by extension.

1. Go to your Netlify dashboard.
2. Navigate to **Site configuration > Environment variables.**
3. Click **Add a variable**, and enter:

   * `AUTH0_CLIENT_ID` (your Auth0 Client ID)
   * `AUTH0_DOMAIN` (your Auth0 domain)

     <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
       These variables, along with all other application information, can be found in your Auth0 dashboard under **Applications > \[Your app] > Settings**.
     </Callout>

You should now have the proper Auth0 credentials set up for deployment.

### Populate a configuration file

If your application reads Auth0 settings from a file, you can automate this process during the build phase. This ensures your application always has the proper authorization without manually modifying files.

To do this:

1. Go to your Netlify dashboard.
2. Navigate to **Site configuration > Build & deploy > Build settings**.
3. Modify the **Build command** to include a shell script before starting the build:

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

This script creates a JSON file named `auth_config.json`, and populates it with the environment variables `AUTH0_CLIENT_ID` and `AUTH0_DOMAIN` set above, ensuring the application has correct Auth0 settings at runtime.

## Manage integration

After adding the Auth0 integration to your Netlify project, the <Tooltip tip="Auth0 Dashboard: Auth0's main product to configure your services." cta="View Glossary" href="/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip> creates a new Application to manage and customize your CIAM workflow.

1. Navigate to the Auth0 Dashboard.
2. Select **Applications > Applications > \[Your Netlify application]**
3. Confirm the Netlify application URI under **Settings > Application URIs**.

You can now customize and modify this application similar to any other application in your Auth0 Dashboard.
