How to Deploy a Next.js App Secured By Auth0 to Vercel

byron.motoche · May 8, 2023, 2:22pm

This guide helps you learn how to deploy a Next.js application secured by Auth0 to Vercel.

secomm · October 1, 2023, 9:52pm

I’ve had trouble with the user being callbacked to the home page and being logged in.
I’ve quadruple checked all the environment variable in the Vercel deployment, used all the right callback and logout URLs in the Application Settings, and it won’t work.
The callback URL is right b/c any other callback URL returns an error.
I am able to press login, go through the Universal Login Page, and enter my credentials. But when I press continue, I get redirected to an error page pointing to /api/auth/callback with the a code and state in the URL parameters
If I manually go back to the home page, I’m not logged in, but if I go to the Auth0 Users Page, it shows that: a). there was an account created if not already there and b). there was a login made by that user
My URLs are correct or else they would return a specified error page of the callback URL not being right, I’ve triple-checked my client secrets and generated secret, and I’ve replaced them tons of times, I’ve used the same custom domain in my environment variables and in the callback URLs, and I use the same AUTH0 issuer base url.
By the way, the app’s authentication on the code side uses a pages w/out the app router, as that was what was there in the tutorial when I started out, and the standard handleAuth() in the [auth0].ts file in /api/auth in my code and it is exported. that is all the configuration I’ve used. And the _app.tsx is wrapped in the tags
All authentication works completely normally on the locally hosted server, but the problems arise during production as usual.
Is there any other apparent thing I’ve missed in trying to figure out what is wrong?

byron.motoche · October 4, 2023, 9:20pm

Hi @secomm, welcome to the Auth0 community!

To help us better understand and diagnose the issue, could you please provide us with the following information:

Which Vercel Deployment Environment are you testing the authentication: Production or Preview environments.
Which are the versions of Next.js and Auth0 Next.js SDK dependencies in your project?
Are you using Pages Router or App Router?
Could you please send us a screenshot of the error you’re experiencing?
Can you please double-check if you get an error log on Vercel for the /api/auth/callback route?

Thanks.

secomm · October 12, 2023, 5:05am

hi @byron.motoche

Blockquote

im testing in production, and by default, it had preview and production selected in vercel
I am currently using a pages router for my app
I am getting no error log on vercel at /api/auth/callback
I get a call to /api/auth/login when logging in
and then a call to /api/auth/me sometimes after a few minutes for some reason

it registers as a login on auth0, however:

then:

my auth0 log also reflects a successful login with no error

running npm next version gives:
Next.js v13.4.12

and npm -v auth0/nextjs-auth0 returns
9.5.0

here’s my error -just a generic error page after I press continue on my universal login page
there’s a code and state in the url

don’t know if this is relevant, why this happens, or if it’s normal, but the state in the URL parameters changes from what it is in the universal login page’s URL to the /api/auth/callback state on the error page

secomm · October 21, 2023, 10:54pm

I also noticed I get a an API read operation in my auth0 logs to get a client and the data seems normal but the application and connection are shown as N/A and I don’t know whether it’s relevant or not - does this show where it could be going wrong

danieldeichfuss · April 17, 2024, 8:11pm

Thanks for the great guide! Looking really good. But you only explained how to setup production. If I get this correctly you can’t log in locally or in any preview environment with this setup, right? How to do this with the dynamically generated preview urls?

byron.motoche · April 23, 2024, 3:15pm

Hi @danieldeichfuss, welcome to the Auth0 Community. Thanks for reading our guide!

We know the solution to make it work with preview deployments, and we’re planning the best way to share it. We will update the guide soon or provide guidance here as soon as possible.

I appreciate your understanding!

Thanks!

byron.motoche · April 29, 2024, 10:05pm

Hi @danieldeichfuss, thank you for your understanding!

To make it work with preview deployments, you should configure the Allowed Callback URLs and Allowed Logout URLs in your Auth0 application to use wildcards at the subdomain level (e.g., https://*.vercel.app).

You’ll need to add the following values to your Auth0 application registration:

Allowed Callback URLs: https://*.vercel.app/api/auth/callback
Allowed Logout URLs: https://*.vercel.app

Additionally, for preview deployments, to assign AUTH0_BASE_URL environment variable, you need to create a .env.production file at the root folder of your project and ensure this file is committed to your source code.

If you have an entry for the AUTH0_BASE_URL environment variable for the preview environment within Vercel settings, remove it since this will override the .env.production file.

Within the .env.production file, assign either the “Automatic Deployment URL” or the “Automatic Branch URL” to the AUTH0_BASE_URL environment variable:

Automatic Deployment URL:

Whenever a new deployment is created, Vercel will automatically generate a unique URL that follows this structure <project-name>-<unique-hash>-<scope-slug>.vercel.app. This URL is available through the VERCEL_URL environment variable:

#.env.production
AUTH0_BASE_URL=$VERCEL_URL

Automatic Branch URL:

You can also use the generated URL associated with a deployment connected to a Git branch. This URL follows this structure <project-name>-git-<branch-name>-<scope-slug>.vercel.app. You can construct this URL as follows:

#.env.production
AUTH0_BASE_URL=${VERCEL_GIT_REPO_SLUG}-git-${VERCEL_GIT_COMMIT_REF}-${VERCEL_GIT_REPO_OWNER}.vercel.app

Besides creating the .env.production file, you will also need to create the following env property under the next.config.js file:

// next.config.js
// ... existing code
const nextConfig = {
// ... existing code
// 👇 new code
  env: {
    AUTH0_BASE_URL: process.env.VERCEL_URL || process.env.AUTH0_BASE_URL,
  },
// 👆 new code
}

Make sure that the Automatically expose System Environment Variables option in your Vercel Dashboard is checked in “Settings” > “Environment Variables”.

Hope this helps! Don’t hesitate to reach out if you have any issues or further questions!

Thanks!

hughCulling · July 23, 2024, 7:08pm

Hi. I got to the ‘Use Your Vercel Production URL in Auth0’ section of the docs, but when I entered the ‘Allowed Callback URLs’ and ‘Allowed Logout URLs’ I got this error: ‘Error!You don’t have permissions to access the resource’.

Is this because I’m on a free tier? Unfortunately I’m not provided with any more information and it didn’t mention anything about free tier restrictions up until this point in this tutorial.

Apart from this I’m really impressed with the docs especially compared to the other ones that the Next.js docs recommended.

Any guidance would be very much appreciated.

byron.motoche · July 24, 2024, 4:20pm

Hi @hughCulling, welcome to the Auth0 Community. Thanks for reading our guide!

The error you’re getting is not related to having a free-tier account. You should be able to follow this guide with the free tier.

This error is generic and happens when there is a problem with the browser cookies or session.

Solution:

Try logging out and logging in again. Then, retry editing and saving your Auth0 application URIs settings.

Alternatively, start from an incognito window or use a different browser and then retry saving your application URIs settings.

We have a topic in the Community about this error. You can check out this link for more details if needed: "Error! You don't have permissions to access the resource" with custom Action.

Hope this helps! Don’t hesitate to reach out if you have any issues or further questions!

Thanks!