OAuthCallbackError in next using Spotify as one provider

[Harsh-npx]

Question 💬

I am trying to Create a Spotify Clone everything went well but when I click on login I stay on the login page with no redirects I checked Chrome console no error there when I checked

Vs Code Terminal there was this error

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error client_secret_basic client authentication method requires a client_secret {
  error: {
    message: 'client_secret_basic client authentication method requires a client_secret',
    stack: 'TypeError: client_secret_basic client authentication method requires a client_secret\n' +
      '    at Client.authFor (E:\\React\\React Projects\\spotify\\node_modules\\openid-client\\lib\\helpers\\client.js:135:15)\n' +
      '    at Client.authenticatedPost (E:\\React\\React Projects\\spotify\\node_modules\\openid-client\\lib\\helpers\\client.js:174:30)\n' +
      '    at Client.grant (E:\\React\\React Projects\\spotify\\node_modules\\openid-client\\lib\\client.js:1327:46)\n' +
      '    at Client.oauthCallback (E:\\React\\React Projects\\spotify\\node_modules\\openid-client\\lib\\client.js:610:35)\n' +
      '    at oAuthCallback (E:\\React\\React Projects\\spotify\\node_modules\\next-auth\\core\\lib\\oauth\\callback.js:114:29)\n' +
      '    at processTicksAndRejections (internal/process/task_queues.js:95:5)\n' +
      '    at async Object.callback (E:\\React\\React Projects\\spotify\\node_modules\\next-auth\\core\\routes\\callback.js:50:11)\n' +
      '    at async NextAuthHandler (E:\\React\\React Projects\\spotify\\node_modules\\next-auth\\core\\index.js:133:28)\n' +
      '    at async NextAuthNextHandler (E:\\React\\React Projects\\spotify\\node_modules\\next-auth\\next\\index.js:20:19)\n' +
      '    at async E:\\React\\React Projects\\spotify\\node_modules\\next-auth\\next\\index.js:56:32',
    name: 'TypeError'
  },
  providerId: 'spotify',
  message: 'client_secret_basic client authentication method requires a client_secret'
}
[next-auth][error][CALLBACK_OAUTH_ERROR]
https://next-auth.js.org/errors#callback_oauth_error client_secret_basic client authentication method requires a client_secret TypeError: client_secret_basic client authentication method requires a client_secret
    at Client.authFor (E:\React\React Projects\spotify\node_modules\openid-client\lib\helpers\client.js:135:15)
    at Client.authenticatedPost (E:\React\React Projects\spotify\node_modules\openid-client\lib\helpers\client.js:174:30)
    at Client.grant (E:\React\React Projects\spotify\node_modules\openid-client\lib\client.js:1327:46)
    at Client.oauthCallback (E:\React\React Projects\spotify\node_modules\openid-client\lib\client.js:610:35)
    at oAuthCallback (E:\React\React Projects\spotify\node_modules\next-auth\core\lib\oauth\callback.js:114:29)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.callback (E:\React\React Projects\spotify\node_modules\next-auth\core\routes\callback.js:50:11)
    at async NextAuthHandler (E:\React\React Projects\spotify\node_modules\next-auth\core\index.js:133:28)
    at async NextAuthNextHandler (E:\React\React Projects\spotify\node_modules\next-auth\next\index.js:20:19)
    at async E:\React\React Projects\spotify\node_modules\next-auth\next\index.js:56:32 {
  name: 'OAuthCallbackError',
  code: undefined
}

I don't know why I am getting this but you can check my code Repo here

https://github.com/Harsh-npx/Spotify-react.git

Any Help would be appreciable

How to reproduce ☕️

I am Following this Video Tutorial -

https://www.youtube.com/watch?v=3xrko3GpYoU&t=5685s

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

Quick remarks:

You should absolutely NOT expose the refresh token to the client!!!! https://github.com/Harsh-npx/Spotify-react/blob/main/pages/api/auth/[...nextauth].js#L61

Your client secret should NOT HAVE the NEXTAUTH_PUBLIC_ as it makes it very easy for you to accidentally expose it.

Regarding your issue, it sounds like you forgot to set the environment variables.

[Saketh-Parimi]

Im having the same issue and i do have my .env.local

[nishant26n]

Check your client id and client secret in Spotify.for Developers and in your .env.local. I'm pretty sure there will be some issue in .env.local file . Also, set your redirect URL to "http://localhost:3000/api/auth/callback/spotify" in Edit Settings in My Dashboard.

[samikaran]

Create .env.local file in your root directory and add code as below:

`SPOTIFY_CLIENT_ID=YourSPOTIFYClientID
SPOTIFY_CLIENT_SECRET=SPOTIFYSecretID
NEXTAUTH_URL=http://localhost:3000

JWT_SECRET=a2H1u5gJEzW7PHRHmxgYaQvxXlNnS1UV
`

Since, NextAuth works with inbuild JSON Web Token(JWT) protection layer you may need to define in your pages/api/auth/[...nextauth].js file. Check official reference here

`import NextAuth from 'next-auth';
import SpotifyProvider from 'next-auth/providers/spotify';

export default NextAuth({
// Configure one or more authentication providers
providers: [
SpotifyProvider({
clientId: process.env.SPOTIFY_CLIENT_ID,
clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
}),
// ...add more providers here
],

secret: process.env.JWT_SECRET,
session: {
strategy: 'jwt',
},
});`

And, do as @nishant26n says Here

Hope it helps!