Next.js Discord

Discord Forum

Spotify API token authentication error 400

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
I'm having difficulty with requesting a token from the Spotify API. I'm aware that this is not necessarily an issue with Next, however I am using Next.js.
I'll add my code below, and here's the link to the relevant documentation in the Spotify API: https://developer.spotify.com/documentation/web-api/tutorials/code-flow
So far I've tried adding the Request and Header constructors, and scrutinising both the fetch() and Spotify documentation.
I also attempted to console.log the request body to identify if it was being compiled correctly, but that didn't help.
Any help would be much appreciated.

13 Replies

Brown bearOP
my code: (over character limit)
Toyger
this one 
new Buffer.from(client_id + ':' + client_secret).toString('base64')

really bothers me, first of all can you even run such nodejs code inside client component.
second of all, even if first possible then new is probably shouldnt be here.
and anyway it's better to just use
'Authorization': 'Basic ' + btoa(client_id + ':' + client_secret),
riský
can you even run such nodejs code inside client component.
they are designed to be run on browser... so no nodejs there... thats what server components are for
@Toyger this one js new Buffer.from(client_id + ':' + client_secret).toString('base64') really bothers me, first of all can you even run such nodejs code inside client component. second of all, even if first possible then `new` is probably shouldnt be here. and anyway it's better to just use js 'Authorization': 'Basic ' + btoa(client_id + ':' + client_secret),
Brown bearOP
Thanks for the reply.
I was simply using what the Spotify documentation has supplied. They wrote this for using the Express framework:
app.get('/callback', function(req, res) {

  var code = req.query.code || null;
  var state = req.query.state || null;

  if (state === null) {
    res.redirect('/#' +
      querystring.stringify({
        error: 'state_mismatch'
      }));
  } else {
    var authOptions = {
      url: 'https://accounts.spotify.com/api/token',
      form: {
        code: code,
        redirect_uri: redirect_uri,
        grant_type: 'authorization_code'
      },
      headers: {
        'content-type': 'application/x-www-form-urlencoded',
        'Authorization': 'Basic ' + (new Buffer.from(client_id + ':' + client_secret).toString('base64'))
      },
      json: true
    };
  }
});
The specific error I'm receiving is:
And the Request object, tokensRequest, which is being logged in line 84, returns as this:
Brown bearOP
And I should say that I’m expecting for the user to be redirected to /loggedin.
The Spotify response codes are detailed here https://developer.spotify.com/documentation/web-api/concepts/api-calls
What’s the easiest way to log the Authentication Error Object to the console so I can better identify the issue?
@Brown bear And I should say that I’m expecting for the user to be redirected to /loggedin. The Spotify response codes are detailed here https://developer.spotify.com/documentation/web-api/concepts/api-calls What’s the easiest way to log the Authentication Error Object to the console so I can better identify the issue?
Toyger
I am really confused right now, because of your use client I thought that it is some mistake in a code, but now I see that problem code itself , spotify provided valid way to do that, via express, because even simplest cors can be problem to get token from browser, you should do that on backend not on frontend.
and first of all better try to use api with curl/postman/insomnia to at least understand how it works
@Brown bear So I should have a /callback api route and the code I’ve written above should be in that?
Toyger
it's better for now to test whole process from curl/... then when you understand how it works you'll move needed parts to api
Brown bearOP
any thoughts on this app flow?

I managed to get curl to work and return the access token using:
curl -H "Authorization: Basic <base64 encoded client_id:client_secret>" -H "content-type: application/x-www-form-urlencoded" -d grant_type=authorization_code -d code=<code> -d redirect_uri=https://spotify-network.chimpyfire.repl.co/callback "https://accounts.spotify.com/api/token"