Skip to content

Feat/integrate with vercel #1200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lrzhou25 wants to merge 3 commits into
base: main
Choose a base branch
from
+81 −48
Open

Feat/integrate with vercel #1200

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
23ddc9b
Update Vercel integration documentation
lrzhou25 May 14, 2026
217ba42
Fixed links
lrzhou25 May 14, 2026
f471b9a
Added validation date
lrzhou25 May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 81 additions & 48 deletions main/docs/customize/integrations/integrate-with-vercel.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,114 @@
---
description: Integrating Auth0 into your Vercel application
title: Integrate with Vercel
description: Integrate Auth0 into your Vercel application
validatedOn: 2026-05-14
---
## Overview

Connect a new or existing Auth0 instance to your Vercel project to enhance your app's security, scalability, and customization using the [Auth0 Integration](https://vercel.com/integrations/auth0). This integration allows you to implement a streamlined customer identity approach directly in your application.
Auth0 is the leading identity and access management platform for securing your apps and agentic workflows. Set up and customize your login box without having to build from scratch. Then extend and scale your authentication and authorization flows with advanced features, including [B2B Organizations](/docs/manage-users/organizations), [Fine-Grained Authorization (FGA)](https://docs.fga.dev/), [Auth0 for AI Agents](https://auth0.com/ai/docs), and more.

Use the new integration to build and customize the identity flow for your Vercel project. To get your app up and running quickly and securely, this integration:
Auth0's Vercel native integration enables:

* Sets up a production environment in Vercel that integrates with your Auth0 tenant in just a few clicks.
* Automatically creates an Application in your Auth0 tenant that connects with your Vercel project.
* Pre-loads your Auth0 credentials into Vercel, allowing you to skip some of the manual steps in this process.
* Automatic provisioning of an Auth0 application that connects to your Vercel project
* Preloading of your Auth0 credentials into the Vercel Dashboard for quick and easy setup
* Out-of-the-box support for your Next.js and React applications using the [Auth0 SDKs](/docs/libraries)

### Prerequisites
Auth0's native integration with Vercel creates a new Auth0 tenant environment for your Vercel project. If you want to use an existing Auth0 account, integrate with Vercel manually when creating an application in the Auth0 Dashboard.

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

* A Vercel account with a project that you would like to integrate with. To create a Vercel account if you don't already have one, visit [Create your Vercel account](https://vercel.com/signup) to get started.
* A Next.js application based on the latest [Auth0 Next.js SDK](/docs/quickstart/webapp/nextjs#install-the-auth0-next-js-sdk).
Before you begin, make sure you have:

## Add a Vercel integration
* A Vercel account with an active project. If needed, [create a Vercel account](https://vercel.com/signup)
* A Next.js application using the latest [Auth0 Next.js SDK](/docs/quickstart/webapp/nextjs), or
* A React application using the latest [Auth0 React SDK](/docs/quickstart/spa/react)

To add the Auth0 integration to an existing Vercel project:
After you've installed the integration, [enable iframe embedding](/docs/customize/login-pages/manage-core-configuration#iframe-embedding) to allow Universal Login or Classic Login to load in an iframe, as required by Vercel.

1. Navigate to the [Auth0 integration page](https://vercel.com/integrations/auth0).
2. When prompted with the installation window, select the Vercel team and project which you would like to install the Auth0 integration.
## Install integration

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
Install Auth0's Vercel native integration from the Vercel Marketplace:

We currently only offer integration to one project at a time. Selecting **All projects** will defer the project selection screen until later in the workflow.
1. **Vercel Marketplace**: Navigate to **Integrations > Browse Marketplace** and search for Auth0. Select the **Auth0 integration** under **Native Integrations**, then select **Install**.

</Callout>
3. Select **Install** to proceed with the installation to your Auth0 integration portal.
4. Verify that you are logged-in with the correct Auth0 account and you are integrating to the correct Tenant dashboard.
2. **Configuration and Plan**: Auth0 automatically populates the localhost URL and callback URL for your application. Then, select your **Installation Plan**. Select **Continue**.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
3. **Confirmation**: Enter a name for your application. Select **Create**. Once the new Auth0 tenant and application have been successfully created, select **Continue**.

Either log into Auth0 **or** verify that you are logged in with the correct Auth0 account and you are integrating to the correct Tenant dashboard.
4. **Connect a project**: To connect to an existing Vercel project, select **Connect Project**, then select your project and environments. Enter a custom prefix to be added to your environment variables, if needed. Select **Connect**. Once you've successfully connected a Vercel project, you should be taken to the integration's [Getting Started](#getting-started) section.

* If no Tenant is selected, you’ll be redirected to create a tenant.
* If you’re creating a new tenant, you’ll go through our standard onboarding.
* If you’re new to Auth0, this is where you’ll create an Auth0 account.
</Callout>
5. Select **Accept**.
6. Next, select the Vercel project that you would like to integrate with Auth0 and select **Continue**.
7. Confirm the application selection, and select **Continue**.
8. You have now successfully added the Auth0 integration to your Vercel project. To view installed integrations, navigate to the **Integrations** tab on your project overview page. Auth0 now appears as an installed integration for your project.
## Getting started

## Manage a Vercel Integration
The Getting started section in the Vercel Dashboard shows a quickstart to get your app up and running quickly and securely. You can also manage your application settings on the left-hand navigation.

After you have successfully integrated the Auth0 integration to your Vercel project, you can manage the integration from your application dashboard in Vercel.
### Quickstart

### Manage from Vercel

To manage the Auth0 application from your Vercel dashboard, select the Auth0 integration from the **Integration** tab of your project.
To get started with Auth0's Vercel native integration, follow the instructions in the Vercel Dashboard to create and deploy your application.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
You can only configure environment variables in a production environment.
</Callout>

The environment variables are only configurable at the production domain.
### Manage your application settings

</Callout>
You can manage your application settings in the [Vercel Dashboard](#vercel-dashboard) and the [Auth0 Dashboard](#auth0-dashboard).

#### Vercel Dashboard

To manage your application settings in the Vercel Dashboard, navigate to **Settings** on the left-hand navigation.

You can update the following application settings:

- **Update Name**: Update the name of the application.
- **Update Configuration**:
- **Parameters**: Update the localhost URL and callback endpoint for your application.
- **Current Installation Level Plan**: Navigate to Integration settings to update the installation level plan for your integration. To learn more, read [Settings](#settings).
- **Secure this resource**
- **Rotate Secrets**: Rotate secrets for your application. To learn more, read [Rotating environment variables](https://vercel.com/docs/projects/environment-variables/managing-environment-variables#rotating-environment-variables).
- **Allowed Environments**: Select whether the integration is available to **All environments** or **Production environment only**.
- **Delete integration**: When you delete the integration, you are automatically downgraded to a Free Vercel plan. To learn more, read [Delete integration](#delete-integration).

#### Auth0 Dashboard

Manage additional application settings in the [Auth0 Dashboard](https://manage.auth0.com/).

After you add the native integration to your Vercel project, the Auth0 Dashboard creates a new application in a dedicated Auth0 tenant. The application is pre-populated with your Vercel URIs, allowed callbacks, and logout URLs.

You can modify this application, such as customizing your Universal Login experience, just as you would any other application in your Auth0 dashboard.

## Manage integration

To manage the integration from your Vercel dashboard, select the **Integration** tab of your project, scroll to the Auth0 integration, and select **Manage**.

### Invoices

On the **Invoices** page, view a list of invoices related to your Auth0 integration. To learn more about invoices, read [Billing & Invoices](https://vercel.com/docs/pricing/understanding-my-invoice).

### Settings

On the **Settings** page, add payment methods, change the installation level plan, and delete the integration.

#### Payment methods

To add a payment method, select **Add**. To learn more about payment methods, read [Vercel pricing](https://vercel.com/docs/accounts/plans).

#### Manage access
#### Current installation level plan

To manage the integration access to specific projects in your Vercel application, select **Manage Access.** This provides you with a project-level access restriction for the Auth0 integration.
The installation-level plan applies to all products in the installation.

#### Remove integration
To change the installation level plan:

To uninstall the Auth0 integration, select **Remove integration** and the application and all associated settings will be removed from your <Tooltip tip="Auth0 Dashboard: Auth0's main product to configure your services." cta="View Glossary" href="/docs/glossary?term=Auth0+dashboard">Auth0 dashboard</Tooltip>. Note that this is not reversible, and if removed you must reinstall the application.
1. Under **Settings**, scroll to **Current Installation Level Plan** and select **Change Plan**.
2. Select your desired installation level plan.
3. Select **Continue**.
4. Review your selection, then select **Update**.
5. Once the installation has been updated, select **Done**.

### Manage from the Auth0 Dashboard
#### Delete integration

After adding the Auth0 integration to your Vercel project, the [Auth0 dashboard](https://manage.auth0.com/) creates a new Application to manage and customize your CIAM workflow.
When you delete the integration, you are automatically downgraded to a Free Vercel plan.

1. Navigate to the [Auth0 dashboard](https://manage.auth0.com/).
2. Select **Applications > Applications > [Your Vercel application]**
3. Confirm the Vercel application URI under **Settings > Application URIs.**
To delete the integration:

<Frame>![](/docs/images/cdy7uua7fh8z/62UwXZPwqrjYly0rkXawYb/31a270f2e8b1413bac2fd879edd1dd6e/border_Screenshot_2024-05-30_at_10.54.28_AM.png)</Frame>
4. You can now customize and modify this application similar to any other application in your Auth0 dashboard.
1. Under **Settings**, scroll to **Delete \<YOUR_PRODUCT\>** and select the **Remove \<YOUR_PRODUCT\>** button.
2. Enter the integration slug and your team, then select **I acknowledge that this will remove my Auth0-connected account**.
3. Select **Remove \<YOUR_PRODUCT\>**.
Loading