Spotify OAuth Scope Parameter Not Included In Authorisation URL

[Tommyboy0797]

Hi everyone,

I’m working on integrating Spotify OAuth login into my React app. I want to request multiple scopes including user-read-email, user-read-private, and user-follow-read. However, when I build the authorization URL and redirect the user to Spotify’s login page, the URL only contains the first two scopes (user-read-email and user-read-private). The additional scopes I add (like user-follow-read) never appear in the URL query parameters.

I have tried:

• Hardcoding the scopes string

• Changing the order of scopes

• Logging the constructed URL before redirecting, which still shows missing scopes

• Using URL and URLSearchParams objects to build the URL as well as manually constructing the URL string

• Testing in different browsers and incognito mode

• Verifying the scopes are enabled in my Spotify Developer Dashboard app

• Confirming my redirect URI exactly matches the registered URI in Spotify Dashboard

Here is a simplified example of the code I’m using to build the URL:

const CLIENT_ID = '...';
const REDIRECT_URI = 'http://127.0.0.1:8000/callback';
const SCOPE = 'user-read-email user-read-private user-follow-read';
const AUTH_ENDPOINT = 'https://accounts.spotify.com/authorize';

const authUrl = new URL(AUTH_ENDPOINT);
authUrl.searchParams.set('response_type', 'code');
authUrl.searchParams.set('client_id', CLIENT_ID);
authUrl.searchParams.set('scope', SCOPE);
authUrl.searchParams.set('redirect_uri', REDIRECT_URI);
authUrl.searchParams.set('state', crypto.randomUUID());

console.log(authUrl.toString()); // Scopes missing here too

window.location.href = authUrl.toString();

Despite this, the scope parameter in the URL only includes the first two scopes, and the third scope (and any others I add) are missing.

Has anyone else encountered this? What could cause scopes to be omitted from the authorization URL when building it in React? Any tips or ideas to debug this would be appreciated!

Thanks in advance.