nextauthjs / nextauthjs/next-auth

OAuthSignin Error in Vercel Deployment

Open
#7,640 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

providers triage
Dominant language
TypeScript
Stars
28.4k
Forks
4k
PR merge metrics
No merged PRs in 30d

Description

Provider type

Spotify

Environment

System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (4) x64 Intel(R) Core(TM) i3-7020U CPU @ 2.30GHz
Memory: 8.52 GB / 11.57 GB
Container: Yes
Shell: 5.8.1 - /bin/zsh

Binaries:
Node: 19.9.0 - /usr/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 9.6.3 - /usr/bin/npm

Browsers:
Chrome: 113.0.5672.126
Firefox: 113.0.2

Reproduction URL

https://github.com/kaganAhmetOkan/nextjs-spotify-clone

Describe the issue

NextAuth fails to log into Spotify in Vercel Deployed version, but works fine in localhost development mode.

The project will redirect the user to the login page, where clicking the "login with spotify" should redirect them to the index, but instead the URL returned is an error: https://nextjs-spotify-clone-iota.vercel.app/login?callbackUrl=https%3A%2F%2Fnextjs-spotify-clone-iota.vercel.app%2F&error=OAuthSignin

How to reproduce
  • Make a simple implementation of NextAuth with Spotify.
  • Design a button that utilizes .signin() method.
  • Deploy to Vercel.

The problem should only happen in the deployed version, and not the development version.

May be important: I forgot to add NEXTAUTH_URL env variable at the beginning of deployment. I since added it and redeployed the project to find the same error. I've also added NEXTAUTH_SECRET and it also did not fix the issue.

Expected behavior

Signin should have opened a new window where Spotify would ask you to signin, confirm that you wanted to give permissions to my project, and redirect to the site.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the Spotify sign-in flow in the linked Vercel deployment and comparing it with localhost. Review the NextAuth Spotify provider setup and the NEXTAUTH_URL and NEXTAUTH_SECRET deployment configuration, then verify the OAuth callback settings. Done means deployed sign-in reaches Spotify and returns without OAuthSignin.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, node.js, typescript
Domain
authentication, cloud
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.