Auth API doesn't recognize a scope string with replaced ":" with "%3A"


#1

I have this code

const authParams = {
  client_id: TWITCH_CLIENT_ID,
  redirect_uri: TWITCH_REDIRECT_URI,
  response_type: 'token+id_token',
  scope: ['openid', 'chat:edit', 'chat:read'].join('+'),
};

const getAuthUrl = () => {
  const search = new URLSearchParams();
  Object.entries(authParams).forEach(([key, value]) => search.set(key, value));

  return `https://id.twitch.tv/oauth2/authorize?${search.toString()}`;
};

URLSearchParams replaces : with %3A and the final url looks like this

https://id.twitch.tv/oauth2/authorize?...&scope=openid+chat%3Aedit+chat%3Aread

API server can’t recognize this encoded colon and returns an error:

{"status":400,"message":"invalid scope requested: 'openid+chat:edit+chat:read'"}

Looks like an API bug.


#2

you are encoding the URL where you shouldn’t be/where other encoding already processed

Try

Or don’t use URLSearchParam

With scopes you need to literally send + and : not their encoded forms.

Covered on, some really old posts after searching the forums to be sure