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

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

2 Likes

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?

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:

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

Thanks.

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:
image

then:
image

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

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

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?