Illegal redirect_uri message form the Spotify API

I’m trying to build an application using the Spotify API for a school project. I trying to make my way through the tutorial on the Spotify developer website. But I’m stuck on the end of the authorization guide. When I click on the ‘login with spotify’ button on the page that I serve on localhost:8888, I get the message ‘illegal redirect_uri’.

I’ve searched the internet for possible solutions, and it seems to have something to do with the redirect_uri not being ‘whitelisted’.

I’ve added localhost:8888, localhost:8888/callback, both with and without backslashes to my whitelist in my applications where you find your client_id and client_secret keys. This does not solve the problem.

I’m stuck on completing the tutorial. I don’t know where to look for the solution. Is there anyone that can help me, please? btw. I’m working with Node.js

I continued my search for the solutions and I opened my console in my chrome browser. I get error 400 (bad request) The server responded with statusCode 400. But as I look at the URL of the authorization

https://accounts.spotify.com/authorize?response_type=code&client_id=**CLIENT_…**/private%20user-read-email&redirect_uri=**REDIRECT_URI**&state=V5sC8qlArWgBf0y9....
Failed to load resource: the server responded with a status of 400 (Bad Request)

I have changed my client_id, client_secret and redirect_uri on my own numbers that where given to my by Spotify itself. I think the value of the variable is not responding. How can I fix this?

Maybe this isn’t the right Q&A forum to prefer my question, but I’m stuck for a really long time and i’ve already ask my question on Stack Overflow but those guys don’t reply.

I’ve edited my code underneath.

/**
 * This is an example of a basic node.js script that performs
 * the Authorization Code oAuth2 flow to authenticate against
 * the Spotify Accounts.
 *
 * For more information, read
 * https://developer.spotify.com/web-api/authorization-guide/#authorization_code_flow
 */

var express = require('express'); // Express web server framework
var request = require('request'); // "Request" library
var querystring = require('querystring');
var cookieParser = require('cookie-parser');

var client_id = '54564f79593549238d76cf06af0fe9fb'; // Your client id
var client_secret = 'd93c7a3dadb5435ba308e61cf82e5234'; // Your secret
var redirect_uri = 'http://localhost:8888/'; // Your redirect uri

/**
 * Generates a random string containing numbers and letters
 * @param  {number} length The length of the string
 * @return {string} The generated string
 */
var generateRandomString = function(length) {
  var text = '';
  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  for (var i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
};

var stateKey = 'spotify_auth_state';

var app = express();

app.use(express.static(__dirname + '/public'))
   .use(cookieParser());

app.get('/login', function(req, res) {

  var state = generateRandomString(16);
  res.cookie(stateKey, state);

  // your application requests authorization
  var scope = 'user-read-private user-read-email';
  res.redirect('https://accounts.spotify.com/authorize?' +
    querystring.stringify({
      response_type: 'code',
      client_id: client_id,
      scope: scope,
      redirect_uri: redirect_uri,
      state: state
    }));
});

app.get('/callback', function(req, res) {

  // your application requests refresh and access tokens
  // after checking the state parameter

  var code = req.query.code || null;
  var state = req.query.state || null;
  var storedState = req.cookies ? req.cookies[stateKey] : null;

  if (state === null || state !== storedState) {
    res.redirect('/#' +
      querystring.stringify({
        error: 'state_mismatch'
      }));
  } else {
    res.clearCookie(stateKey);
    var authOptions = {
      url: 'https://accounts.spotify.com/api/token',
      form: {
        code: code,
        redirect_uri: redirect_uri,
        grant_type: 'authorization_code'
      },
      headers: {
        'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
      },
      json: true
    };

    request.post(authOptions, function(error, response, body) {
      if (!error && response.statusCode === 200) {

        var access_token = body.access_token,
            refresh_token = body.refresh_token;

        var options = {
          url: 'https://api.spotify.com/v1/me',
          headers: { 'Authorization': 'Bearer ' + access_token },
          json: true
        };

        // use the access token to access the Spotify Web API
        request.get(options, function(error, response, body) {
          console.log(body);
        });

        // we can also pass the token to the browser to make requests from there
        res.redirect('/#' +
          querystring.stringify({
            access_token: access_token,
            refresh_token: refresh_token
          }));
      } else {
        res.redirect('/#' +
          querystring.stringify({
            error: 'invalid_token'
          }));
      }
    });
  }
});

app.get('/refresh_token', function(req, res) {

  // requesting access token from refresh token
  var refresh_token = req.query.refresh_token;
  var authOptions = {
    url: 'https://accounts.spotify.com/api/token',
    headers: { 'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64')) },
    form: {
      grant_type: 'refresh_token',
      refresh_token: refresh_token
    },
    json: true
  };

  request.post(authOptions, function(error, response, body) {
    if (!error && response.statusCode === 200) {
      var access_token = body.access_token;
      res.send({
        'access_token': access_token
      });
    }
  });
});
console.log('Listening on 8888');
app.listen(8888);

Is there anywhere else you’d need to change those values? Any other scripts you’re using? I know nothing about the API and don’t have the time right at this second to look it up. If this isn’t a SPA, and you have other files in use, try searching them (do a “find” in your code editor, or something) for **REDIRECT_URI** - those placeholder values are clearly still being read from somewhere, it’s just a question of where and why, I guess.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.