Spotify Web API giving me illegal scope no matter what

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. Ive 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.com/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.com/authorize',
};

export default config;