is there anyway i can refresh spotify token in react?

Question

I create a function that I can log in to my Spotify and get the access token and I create a function to refresh my token but it does not work properly when I pass it to the request function with Axios and it returns 400 or 404.

what should I do?

here is my code:

    const AUTH_URL =
  " https://accounts.spotify.com/authorize?client_id=MY_ID&response_type=token&redirect_uri=http://localhost:3000/&scope=user-read-playback-state";

let Login = () => {
  const spotifyHandle = (params) => {
    const afterHashtag = params.substring(1);
    const param = afterHashtag.split("&");
    const paramsSplit = param.reduce((Para, currentPara) => {
      const [key, value] = currentPara.split("=");
      Para[key] = value;
      return Para;
    }, {});

    return paramsSplit;
  };

  useEffect(() => {
    if (window.location.hash) {
      const { access_token, expires_in } = spotifyHandle(window.location.hash);
      localStorage.clear();

      localStorage.setItem("accessToken", access_token);
      localStorage.setItem("expiresIn", expires_in);
    }
  });

  return (
    <div>
      <a href={AUTH_URL}>
        <button>Login</button>
      </a>
    </div>
  );
};

here the refresh function:

let refresh = async () => {
  const clientId = "id";
  const clientSecret = "secret";

  const headers = {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded",
    },
    auth: {
      username: clientId,
      password: clientSecret,
    },
  };
  const data = {
    grant_type: "client_credentials",
  };

  try {
    const response = await axios.post(
      "https://accounts.spotify.com/api/token",
      qs.stringify(data),
      headers
    );
    console.log(response.data.access_token);
    return response.data.access_token;
  } catch (error) {
    console.log(error);
  }
};

Answer 1

The Spotify API follows the OAuth 2.0 specs and it requires (as presented at this Spotify's documentation section):

• grant_type to be equal to authorization_code
• code to be equal to the authorization code returned from the initial request to the Account /authorize endpoint
• redirect_uri This parameter is used for validation only (there is no actual redirection). The value of this parameter must exactly match the value of redirect_uri supplied when requesting the authorization code. This parameter is used for validation only (there is no actual redirection). The value of this parameter must exactly match the value of redirect_uri supplied when requesting the authorization code.

And a Authorization is also required at the request header, as stated at the docs: Base 64 encoded string that contains the client ID and client secret key. The field must have the format: Authorization: Basic *<base64 encoded client_id:client_secret>* Base 64 encoded string that contains the client ID and client secret key. The field must have the format: Authorization: Basic *<base64 encoded client_id:client_secret>*