From 23ddc9b72b33400409e481e55d1392d80bd724cb Mon Sep 17 00:00:00 2001 From: Lucy Zhou Date: Thu, 14 May 2026 15:03:04 -0700 Subject: [PATCH 1/3] Update Vercel integration documentation Updated the Vercel integration guide to reflect current installation flow and management options. Key changes: - Restructured content to follow actual Vercel marketplace installation flow - Added React SDK support alongside Next.js - Updated prerequisites with iframe embedding requirement - Expanded management section with detailed settings, invoices, and billing info - Improved clarity and organization throughout - Updated links to current Vercel documentation Co-Authored-By: Claude Opus 4.7 --- .../integrations/integrate-with-vercel.mdx | 126 +++++++++++------- 1 file changed, 78 insertions(+), 48 deletions(-) diff --git a/main/docs/customize/integrations/integrate-with-vercel.mdx b/main/docs/customize/integrations/integrate-with-vercel.mdx index 79d53e7595..249ae372ed 100644 --- a/main/docs/customize/integrations/integrate-with-vercel.mdx +++ b/main/docs/customize/integrations/integrate-with-vercel.mdx @@ -1,81 +1,111 @@ --- -description: Integrating Auth0 into your Vercel application title: Integrate with Vercel +description: Integrate Auth0 into your Vercel application --- -## 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)](/docs/secure/fine-grained-authorization), [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/universal-login/configure-embeddable-universal-login) 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 - +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**. - -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**. - +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. - -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 get started with Auth0's Vercel native integration, follow the instructions in the Vercel Dashboard to create and deploy your application. -To manage the Auth0 application from your Vercel dashboard, select the Auth0 integration from the **Integration** tab of your project. +You can only configure environment variables in a production environment. - +### Manage your application settings -The environment variables are only configurable at the production domain. +You can manage your application settings in the [Vercel Dashboard](#vercel-dashboard) and the [Auth0 Dashboard](#auth0-dashboard). - +#### Vercel Dashboard -#### Manage access +To manage your application settings in the Vercel Dashboard, navigate to **Settings** on the left-hand navigation. -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. +You can update the following application settings: -#### Remove integration +- **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). -To uninstall the Auth0 integration, select **Remove integration** and the application and all associated settings will be removed from your Auth0 dashboard. Note that this is not reversible, and if removed you must reinstall the application. +#### Auth0 Dashboard -### Manage from the Auth0 Dashboard +Manage additional application settings in the [Auth0 Dashboard](https://manage.auth0.com/). -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. +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. -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.** +You can modify this application, such as customizing your Universal Login experience, just as you would any other application in your Auth0 dashboard. - ![](/docs/images/cdy7uua7fh8z/62UwXZPwqrjYly0rkXawYb/31a270f2e8b1413bac2fd879edd1dd6e/border_Screenshot_2024-05-30_at_10.54.28_AM.png) -4. You can now customize and modify this application similar to any other application in your Auth0 dashboard. \ No newline at end of file +## 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/accounts/plans/manage-your-billing-information#billing-and-invoices). + +### 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). + +#### Current installation level plan + +The installation-level plan applies to all products in the installation. + +To change the installation level plan: + +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**. + +#### Delete integration + +When you delete the integration, you are automatically downgraded to a Free Vercel plan. + +To delete the integration: + +1. Under **Settings**, scroll to **Delete \** and select the **Remove \** button. +2. Enter the integration slug and your team, then select **I acknowledge that this will remove my Auth0-connected account**. +3. Select **Remove \**. From 217ba421843c30256ff15852f350ecb9484f24da Mon Sep 17 00:00:00 2001 From: Lucy Zhou Date: Thu, 14 May 2026 15:34:17 -0700 Subject: [PATCH 2/3] Fixed links --- .../customize/integrations/integrate-with-vercel.mdx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/main/docs/customize/integrations/integrate-with-vercel.mdx b/main/docs/customize/integrations/integrate-with-vercel.mdx index 249ae372ed..92de58b063 100644 --- a/main/docs/customize/integrations/integrate-with-vercel.mdx +++ b/main/docs/customize/integrations/integrate-with-vercel.mdx @@ -3,7 +3,7 @@ title: Integrate with Vercel description: Integrate Auth0 into your Vercel 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)](/docs/secure/fine-grained-authorization), [Auth0 for AI Agents](https://auth0.com/ai/docs), and more. +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. Auth0's Vercel native integration enables: @@ -21,7 +21,7 @@ Before you begin, make sure you have: * 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) -After you've installed the integration, [enable iframe embedding](/docs/customize/universal-login/configure-embeddable-universal-login) to allow Universal Login or Classic Login to load in an iframe, as required by Vercel. +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. ## Install integration @@ -43,7 +43,9 @@ The Getting started section in the Vercel Dashboard shows a quickstart to get yo To get started with Auth0's Vercel native integration, follow the instructions in the Vercel Dashboard to create and deploy your application. -You can only configure environment variables in a production environment. + +You can only configure environment variables in a production environment. + ### Manage your application settings @@ -78,7 +80,7 @@ To manage the integration from your Vercel dashboard, select the **Integration** ### 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/accounts/plans/manage-your-billing-information#billing-and-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 From f471b9a127dfa2775100913084ddbc955e3d1161 Mon Sep 17 00:00:00 2001 From: Lucy Zhou Date: Thu, 14 May 2026 15:41:44 -0700 Subject: [PATCH 3/3] Added validation date --- main/docs/customize/integrations/integrate-with-vercel.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/main/docs/customize/integrations/integrate-with-vercel.mdx b/main/docs/customize/integrations/integrate-with-vercel.mdx index 92de58b063..9335a96801 100644 --- a/main/docs/customize/integrations/integrate-with-vercel.mdx +++ b/main/docs/customize/integrations/integrate-with-vercel.mdx @@ -1,6 +1,7 @@ --- title: Integrate with Vercel description: Integrate Auth0 into your Vercel application +validatedOn: 2026-05-14 --- 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.