v4: dynamic APP_BASE_URL since our base URLs change

[EvanLovely]

Checklist

• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

Setting the env var APP_BASE_URL (or appBaseUrl in constructor) as a single value doesn't work for us. Locally, our ports increment if we have multiple UIs running and our PR Previews have different URLs.

Describe the ideal solution

Make it dynamic somehow

Alternatives and current workarounds

No response

Additional context

No response

[Altech]

This issue is causing problems for our development on Vercel, a major platform for Next.js.

Specifically, it prevents us from using one of Vercel’s signature features—creating a preview environment (with a dynamically issued URL) for each pull request—which is why we, too, hope this functionality will be added.

[mvvmm]

You can set dynamic environment variables in nextjs via next.config.mjs

We solve this exact use case via:

const isPreviewDeploy = () => {
  return (
    process.env.VERCEL_ENV === "preview" &&
    process.env.VERCEL_GIT_COMMIT_REF !== "dev" &&
    process.env.VERCEL_GIT_COMMIT_REF !== "staging" &&
    process.env.VERCEL_GIT_COMMIT_REF !== "qa" &&
    process.env.VERCEL_GIT_COMMIT_REF !== "uat"
  );
};

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    // AUTH0_BASE_URL needs to be set dynamically in preview deploys
    APP_BASE_URL: isPreviewDeploy()
      ? `https://${process.env.VERCEL_BRANCH_URL}`
      : process.env.APP_BASE_URL,
  },
};

...