fix: load from process.env.VERCEL_URL if AUTH0_BASE_URL not set

[ctjlewis]

Potentially fixes #383.

Description

See #383 (comment).

References

Include any links supporting this change such as a:

• GitHub Issue/PR number addressed or fixed
• Auth0 Community post
• StackOverflow post
• Support forum thread
• Related pull requests/issues from other repos

If there are no references, simply delete this section.

Testing

Describe how this can be tested by reviewers. Be specific about anything not tested and reasons why. If this library has unit and/or integration testing, tests should be added for new functionality and existing tests should complete without errors.

Please include any manual steps for testing end-to-end or functionality not covered by unit/integration tests.

Also include details of the environment this PR was developed in (language/platform/browser version).

• This change adds test coverage for new/changed/fixed functionality

Checklist

• I have added documentation for new/changed functionality in this PR or in auth0.com/docs
• All active GitHub checks for tests, formatting, and security are passing
• The correct base branch is being used, if not main

[vercel]

@ctjlewis is attempting to deploy a commit to the Auth0 Team on Vercel.

A member of the Team first needs to authorize it.

[adamjmcgrath]

Hi @ctjlewis - thanks for raising this

We don't want to bake Vercel environment variables into the SDK if we can avoid it, so I'm going to close this.

Have a look at the instructions here for assigning the AUTH0_BASE_URL when using Vercel and feel free to raise an issue if you find one.

[ctjlewis]

@adamjmcgrath I would really recommend reopening and merging this PR. Whatever logic exists for not doing this automatically despite the library being designed for deployment to Vercel, it's not worth it in practice. I have to look this PR up every time I add the library to a new project because it's the only way to keep the base URL consistent across live deploys.

It's just an OR statement. If the given project is not deployed to Vercel, it won't have any effect. Also, if you set AUTH0_BASE_URL, it will use that! This is not a breaking change.

Not taking this approach results in unexpected behavior when users add the library to a project and attempt to deploy to Vercel, the deploy pipeline Next was designed for.

[ctjlewis]

You know, it's still impossible to deploy a working dev environment to production without being incredibly crafty and realizing you have to manually shim the AUTH0_BASE_URL to match VERCEL_URL at runtime.

This is objectively suboptimal software design. Just terrible work.

For visitors from Google

Workaround is:

process.env.AUTH0_BASE_URL = process.env.AUTH0_BASE_URL || process.env.NEXT_PUBLIC_DOMAIN || process.env.VERCEL_URL;

And setting the NEXT_PUBLIC_DOMAIN env key with Production set to avoid Vercel confusing your preview URL (like repo-abc123-dude.vercel.app) with your assigned production domain (which you will set as NEXT_PUBLIC_DOMAIN=https://my-site/ with trailing slash).

[ctjlewis]

@adamjmcgrath I think about this every time I need to hack this together manually in a new project because it will otherwise not recognize the correct base URL when deployed to a domain, which is obviously necessary for any site running in production.

[adamjmcgrath]

Hi @ctjlewis - thanks for your feedback, and apologies we didn't accept your PR

Our instructions for assigning the AUTH0_BASE_URL for preview deployments on Vercel are here https://github.com/auth0/nextjs-auth0/tree/main/examples#assigning-the-auth0_base_url, this includes info for people that want to use the Automatic Deployment URL or Automatic Branch URL.

We also have instructions for handling production deployments in Vercel here https://github.com/auth0/nextjs-auth0/tree/main/examples#production-deployments-or-other-environments-with-fixed-urls - where we recommend using the Vercel dashboard

If you think these instructions are incorrect, feel free to raise an issue with steps to reproduce and we'd be happy to investigate it for you.

[ctjlewis]

Yes, it's an absolute nightmare to try to figure this out each time.

We need to restate the linked docs in a step-by-step format, with screenshots, and move it into the main README. This is a Next-specific library and brain surgery is required to ship it to Vercel so this needs to be front and center.

A note will also be added that the production base URL override means the deploy URL (like site-abc1234-site.vercel.app) which is assigned to production will see broken auth behavior, and normal behavior only exists at the fixed URL that deploy is assigned to (site.vercel.app).

[tisonkun]

I try place AUTH0_BASE_URL=${VERCEL_URL} in .env.production under the root path but it doesn't work.

[thexpand]

It doesn't work for me either. It seems that the preview deployment doesn't read .env.production for some reason. I'm using prebuilt projects with GitHub actions which I then deploy to Vercel.

[ctjlewis]

It doesn't work for me either. It seems that the preview deployment doesn't read .env.production for some reason. I'm using prebuilt projects with GitHub actions which I then deploy to Vercel.

Yeah, this team refuses to listen to me regarding the pattern. It should just read from VERCEL_URL automatically.

For now, you must go into Project Settings > Environment Variables, and override AUTH0_BASE_URL for Production to your Production Domain URL. For instance, if my preview site-abc.vercel.app is deployed to site.com in production, you must go to Environment Variables and override AUTH0_BASE_URL="site.com" for production so that when it builds, it builds for site.com.

[thexpand]

@ctjlewis But how do you make it work for preview deployments? Here's my current GitHub actions workflow setup:

    steps:
      - uses: actions/checkout@v3
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: AUTH0_BASE_URL="http://0.0.0.0:3000" vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        id: deploy
        run: echo "PREVIEW_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" >> "$GITHUB_OUTPUT"

I'm setting AUTH0_BASE_URL="http://0.0.0.0:3000" to a temporary value during the build step, so that Auth0 doesn't complain about the baseURL missing, but then I can't use the preview URL for re-setting it after the deployment, because I only have access to the preview URL after it's been deployed.

[ctjlewis]

@thexpand If I needed preview URLs to work I used to use this shim:

process.env.AUTH0_BASE_URL = process.env.AUTH0_BASE_URL || process.env.NEXT_PUBLIC_DOMAIN || process.env.VERCEL_URL;

But it's not convenient. The library generally poorly supports this despite being designed specifically for deploying on this exact architecture.

Maintainers linked some docs when they closed this PR, would review those but IIRC the instructions aren't reliable.

[thexpand]

@ctjlewis Oh, thanks! I though that'll do it, but it's not ideal. I hope it works as a workaround for Next.js 13.4+ with the /app directory. I'll try it out and post back the results.

[thexpand]

Hmm, actually I got it working with a .env file instead of a .env.production one. This is the content of my .env (commited into VCS):

AUTH0_BASE_URL=$VERCEL_URL

And then the steps for my GitHub action for preview deployments are configured like this:

    steps:
      - uses: actions/checkout@v3
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: AUTH0_BASE_URL="http://0.0.0.0:3000" vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        id: deploy
        run: echo "PREVIEW_URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" >> "$GITHUB_OUTPUT"