I am trying to set up an open source GitHub project on my own netlify to break it down and learn from it. I have been having issues getting through the authorization page. No matter how many times I make a new client id, I still get the error illegal scopes. All my scopes are legal from what I can tell, which is what makes this so much more confusing. I've deleted my Spotify API dashboard and remade it 3 times now, with no luck at all. Any help or suggestions would be appreciated. My redirect URI and client ID is the same on my dashboard as it is in my code (attached below):

const config = {
  environment: 'development',
  remoteUrl: '/',
  spotifyAuthparams: {
    client_id: '***********************0b4de86f',
    redirect_uri: `${origin}/spotifycallback`,
    scope:
      'user-read-private user-top-read user-read-recently-played user-read-currently-playing playlist-modify-public playlist-modify-private playlist-read-collaborative user-read-play-history',
    show_dialog: true,
  },
};

export default config;

This code shows what $(origin) returns.

const { protocol, hostname, port } = window.location;

const origin = `${protocol}//${hostname}${port ? `:${port}` : ''}`;

const config = {
  protocol,
  hostname,
  port,
  origin,
  spotifyAuthority: '',
};

export default config;

I am trying to set up an open source GitHub project on my own netlify to break it down and learn from it. I have been having issues getting through the authorization page. No matter how many times I make a new client id, I still get the error illegal scopes. All my scopes are legal from what I can tell, which is what makes this so much more confusing. I've deleted my Spotify API dashboard and remade it 3 times now, with no luck at all. Any help or suggestions would be appreciated. My redirect URI and client ID is the same on my dashboard as it is in my code (attached below):

const config = {
  environment: 'development',
  remoteUrl: 'https://api.spotify./v1/',
  spotifyAuthparams: {
    client_id: '***********************0b4de86f',
    redirect_uri: `${origin}/spotifycallback`,
    scope:
      'user-read-private user-top-read user-read-recently-played user-read-currently-playing playlist-modify-public playlist-modify-private playlist-read-collaborative user-read-play-history',
    show_dialog: true,
  },
};

export default config;

This code shows what $(origin) returns.

const { protocol, hostname, port } = window.location;

const origin = `${protocol}//${hostname}${port ? `:${port}` : ''}`;

const config = {
  protocol,
  hostname,
  port,
  origin,
  spotifyAuthority: 'https://accounts.spotify./authorize',
};

export default config;

• javascript
• scope
• spotify

2 Answers 2

Maybe not your case, but I have also run into illegal scope issues. I've used this URL to get an access token:

https://developer.spotify./console/get-playlists

Just now I got illegal scope at every attempt. But logging out and logging in again solved it (even though I was properly logged in the first time - I could access the web player no problem).

I also got illegal scope one time when I used the wrong user_id - I was logged in with another user_id, so that was nothing strange, but it took my a while to figure out.

Just check your scope variables are correct: Get list of all scopes from Spotify here: https://developer.spotify./documentation/general/guides/authorization/scopes/

I solved it that way. Had few typos since i wrote them manually.