Setting NEXTAUTH_URL for preview/production environments when building in CI with Vercel CLI

[ChristianIvicevic]

I am running into an issue with NextAuth.js and the Vercel CLI. I am currently in the process of migrating from the Vercel integration with git to running the Vercel CLI in the GitHub actions workflow. Before building I am downloading the environment variables using vercel pull --yes --environment=preview and vercel pull --yes --environment=production respectively. Previously I had to manually define NEXTAUTH_URL as http://localhost:4200/api/auth for local development since it would get overriden with VERCEL_URL during developments via the integration. Unfortunately the pull command downloads VERCEL_URL="" now. For production deployment I could theoretically define the actual canonical URL, but not for preview deployments resulting in NextAuth not working for preview deployments triggered by the CLI. Has anyone run into that issue yet and found a workaround for that?

[charlesponti]

I've run into this issue as well. My failing deployment can be found here: https://github.com/theponti/create-ponti-app/actions/runs/3270805242/jobs/5379853395

I get ERR_INVALID_URL in the vercel deployment action.

[charlesponti]

This works fine when I run vercel build on my local machine but fails in the Github Action.

[MariusVB]

Did you figure this out?

[charlesponti]

Nah, I moved away from vercel and nextauth altogether 💃🏽

[Merott]

Have you found a solution to this? Running into the same issue over here, and it looks like we have to explicitly provide NEXTAUTH_URL.

I'm just not sure what the best way to do that is.

[enk0de]

same issue here

[AbelGuitian]

same issue here...

[david7378]

Same issue here!

[emilyhou]

+1 same issue here

[zarif-al]

Hello

I was struggling with this problem for a while. This is what I came up with, I've outlined the main steps I use in my github actions for deploying preview branches to vercel.

Hope it helps!

# This fetches the current branch name.
- name: Get branch names.
        id: branch-names
        uses: tj-actions/branch-names@v8

# I have `/` in my branch names, that causes an issue with domains so I have replace all `/` with `-`
- name: Clean Branch name
  id: cleaned-branch-name
  uses: mad9000/actions-find-and-replace-string@3
  with:
    source: ${{ steps.branch-names.outputs.current_branch }}
    find: '/'
    replace: '-'
    replaceAll: 'true'

# This step creates the url alias that I will use with my deployment.
- name: Generate Vercel URL
  id: generate_url
  run: echo "url=ans-frontend-${{ steps.cleaned-branch-name.outputs.value }}.vercel.app" >> $GITHUB_OUTPUT

- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

# I had to set NEXTAUTH_URL to the env before running vercel build.
- name: Build Project Artifacts
  run: NEXTAUTH_URL=https://${{ steps.generate_url.outputs.url }} vercel build --token=${{ secrets.VERCEL_TOKEN }}
 
# After running vercel deploy I set the alias of the of the deployed url to be url I generated.     
- name: Deploy Project Artifacts to Vercel
id: vercel_deploy
run: |
  url="$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"
  vercel alias set "$url" "${{ steps.generate_url.outputs.url }}" --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM_ID }}

Additional Resources:

https://vercel.com/guides/how-to-alias-a-preview-deployment-using-the-cli

[GoulartNogueira]

This very simple solution worked for me:

Simply run:

echo "http://localhost:3000" | vercel env add NEXTAUTH_URL development
vercel env pull
vercel build

Explanation:

1. Add NEXTAUTH_URL to development environment
2. Pull the change to .env
3. Rebuild 🎉