Unable to Return to Next App after Successful Login in Vercel Deploy Previews

I am working on a Next 14 application using App Router and using @auth0/nextjs-auth0 to handle auth flow.

In development, I am able to set up the entire auth flow with the following environment variables set before running my local server:

AUTH0_BASE_URL=http://localhost:3000/
AUTH0_SECRET=...
AUTH0_ISSUER_BASE_URL=...
AUTH0_CLIENT_ID=...
AUTH0_CLIENT_SECRET=...

Since I am deploying the app through Vercel for now, I have set the environment variables mentioned above in Vercel’s environment as well, where:

  • NEXT_PUBLIC_AUTH0_BASE_URL is set as {project-repo-name}-*-{team}.vercel.app/ according to @auth0/nextjs-auth0’s documentation, which is the value of $VERCEL_URL
  • AUTH0_BASE_URL is set as https://{project-repo-name}-*-{team}.vercel.app/ because AUTH0_BASE_URL is required

In the Auth0 application under my tenant, I set the URLs in the settings as follows:

Allowed Callback URLs
http://localhost:3000/api/auth/callback, https://www.{project-repo-name}-*-{team}.vercel.app/api/auth/callback, https://{project-repo-name}-*-{team}.vercel.app/api/auth/callback

Allowed Logout URLs
http://localhost:3000/, https://www.{project-repo-name}-*-{team}.vercel.app/, https://{project-repo-name}-*-{team}.vercel.app/

Allowed Web Origins
http://localhost:3000/, https://www.{project-repo-name}-*-{team}.vercel.app/, https://{project-repo-name}-*-{team}.vercel.app/

In a deploy preview, a user can now reach the login/signup page after making a request to api/auth/login?returnTo=/home. However, the user cannot return to the application after getting authenticated and authorized and the root cause seems to be the wildcard ***** in the AUTH0_BASE_URL / NEXT_PUBLIC_AUTH0_BASE_URL set in the Vercel’s environment or any of the URLs provided to Auth0 because the user is always redirected to a URL that contains an actual * as below:

https://{project's repo name}-/*-{team}.vercel.app/api/auth/callback?code={random string}

I can verify that the user’s authentication and authorization were successful because I can see a successful login from the user’s history provided by Auth0. Could anyone guide me on configuring these environment variables for Vercel’s deploy previews? Thanks in advance!

While wildcards do not seem to be working, I have reconfigured my next.config.js to overwrite the AUTH0_BASE_URL when building the app on Vercel:

/** @type {import('next').NextConfig} */

const nextConfig = {
    env: {
        AUTH0_BASE_URL: process.env.VERCEL
            ? `https://${process.env.VERCEL_URL}`
            : process.env.AUTH0_BASE_URL,
    },
};

module.exports = nextConfig;

This solution works on my end. Please try if you run into the same problem.

On the other hand, I ran into another problem regarding logging out and the returnTo does not seem to be recognizable. I will write a new post and post an update here as well.