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

Help
,
1

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!

2

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.

1 Like