Nextjs-auth0: Need new guidance for VERCEL_URL and AUTH0_BASE_URL

[adamjmcgrath]

The guidance in https://github.com/auth0/nextjs-auth0/blob/main/examples/README.md#environment-variables-1 needs to change.

We can no longer assign VERCEL_URL to AUTH0_BASE_URL using "Reference to System Environment Variable" in the Vercel dashboard.

We previously introduced the Provided by System option as some frameworks need to map system variables like VERCEL_URL to framework prefixed variables like NEXT_PUBLIC_VERCEL_URL. You no longer need to configure this mapping because the prefixed variables are added automatically based on your Framework Preset.

Source: https://vercel.com/changelog/environments-variables-per-git-branch

We will need to suggest a way that developers can assign VERCEL_URL to AUTH0_BASE_URL when the application is running (note: we don't need AUTH0_BASE_URL at build time)

[timnlupo]

I was able to get around this by declaring

import { initAuth0 } from "@auth0/nextjs-auth0";
import { BASE_URL } from "./constants";

// Workaround for dynamic AUTH0_BASE_URL env variable
export default initAuth0({
  baseURL: BASE_URL
});

where

export const BASE_URL =
  isDev || !process.env.VERCEL_URL
    ? "http://localhost:3000"
    : `https://${process.env.VERCEL_URL}`;

and then create the SSR with

import client from "utils/auth0";

export default client.handleAuth();

Not sure this is a recommended solution but has worked for me. Open to feedback to get this better!

[dsbrianwebster]

export const getURL = (): string => {
  const url =
    process?.env?.URL && process.env.URL !== ''
      ? process.env.URL
      : process?.env?.VERCEL_URL && process.env.VERCEL_URL !== ''
      ? process.env.VERCEL_URL
      : 'http://localhost:3000';
  return url.includes('http') ? url : `https://${url}`;
};

[darronj]

I solved this for our use case very simply. I added the following to my next.config.js exports.

module.exports = {
  env: {
    AUTH0_BASE_URL: process.env.VERCEL_URL || 'http://localhost:3000'
  }
};

[adamjmcgrath]

Thanks @darronj - that looks like the best solution, I'll test it out and update our guidance

[darronj]

@adamjmcgrath I probably spoke too soon, I can’t get this to work on preview branches. Actually I can’t get either of these workarounds to work in preview. Failures occur in the serverless functions. Production works great.

ERROR TypeError: "baseURL" is required
at Object.get (/var/task/apps/react-workspace/node_modules/@auth0/nextjs-auth0/dist/auth0-session/get-config.js:145:15)

[adamjmcgrath]

Hi @darronj - this is because we're destructuing the process.env here https://github.com/auth0/nextjs-auth0/blob/main/src/config.ts#L410-L437

And the DefinePlugin doesn't work with that:

Next.js will replace process.env.customKey with 'my-value' at build time. Trying to destructure process.env variables won't work due to the nature of webpack DefinePlugin.

https://nextjs.org/docs/api-reference/next.config.js/environment-variables

I'll raise a PR to fix this then your example should work.

[darronj]

any idea of when this will be released? I'd love for my preview branches to work for my team.

[adamjmcgrath]

@darronj - will plan to make a release this week

[thompson-ad]

@adamjmcgrath - has this been released yet? 🙏 I'm also facing this issue at the moment.

[darronj]

I am still seeing this error when on preview branches. My production branch with a set custom url runs fine. The problem only shows up on the /api/auth/[...] routes, as the pages load fine.

[mathieutu]

I can be wrong but for me the define plugin will not work out of the box in node_module, so I'm afraid we actually can't rely on it.