Receiving a 'Only valid bearer authentication supported' 400 error

[grootzy]

When making an API call to 

https://api.spotify.com/v1/me/top/, I am unable to receive the user's top results and get a 400 error. 

When making an API call to 

https://api.spotify.com/v1/search, I am able to receive values searched.

Can anyone see the difference in why? I can console.log(data) succesfully, but not console.log(data2). TIA!

  useEffect(() => {
    getUsersFavoriteTracks();
  }, []);

  const getUsersFavoriteTracks = async () => {
    const { data } = await axios.get(
      "https://api.spotify.com/v1/search",

      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        params: {
          q: "Hotel Surrender",
          type: "album",
        },
      }
    );
    console.log(data);
    const { data2 } = await axios.get("https://api.spotify.com/v1/me/top/", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      params: {
        type: "artists",
      },
    });
    console.log(data2);
  };​

[Ximzend]

Did you get the access token by following the Authorization Code Flow?

Also, did you request it by using the Authorization Scope "user-top-read"?

[grootzy]

Thanks Ximzend for narrowing it down, I didn't set the authorization scope. 

If you could imagine this is my href to authenticate, how can I properly use the user-top-read?

<a className="button" href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=user&20top&20read&response_type=${RESPONSE_TYPE}`}>Login to Spotify</a>

[Ximzend · Accepted solution]

&20 is a space, but it just needs to be a user-to-read, without encoding the - symbols.

[grootzy]

Thanks Ximzend, problem solved.