i got error 401 token not provided and this is occur on my function

[ErvinWijaya]

this error occur on my function, while i request POST and PUT axios method

the follow is my function

// change next and previous 

const changeNextTrack = async (type) => {

    await axios.post(

      `https://api.spotify.com/v1/me/player/${type}`,

      {},

      {

        headers: {

          Authorization: "Bearer " + token,

          "Content-Type": "application/json",

        },

      }

    );

    const response = await axios.get(

      `https://api.spotify.com/v1/me/player/currently-playing`,

      {

        headers: {

          Authorization: "Bearer " + token,

          "Content-Type": "application/json",

        },

      }

    );

    if (response.data !== "") {

      const { data } = response;

      const currentlyPlayer = {

        name: data.item.name,

        duration: data.item.duration_ms,

        id: data.item.id,

        artist: data.item.artists[0].name,

        thumbnail: data.item.album.images[0].url,

      };

      dispatch({ type: reducerCases.SET_CURRENTLYPLAYER, currentlyPlayer });

    } else {

      dispatch({

        type: reducerCases.SET_CURRENTLYPLAYER,

        currentlyPlayer: null,

      });

    }

  };

//chnage state play and pause

  const playPause = async () => {

    const state = playState ? "play" : "pause";

    await axios.put(

      `https://api.spotify.com/v1/me/player/${state}`,

      {},

      {

        headers: {

          Authorization: "Bearer " + token,

          "Content-Type": "application/json",

        },

      }

    );

    dispatch({

      type: reducerCases.SET_PLAYSTATE,

      playState: !playState,

    });

  };

people can help be appreciate

Thank you

[Ximzend]

How do you get your Bearer token?

I see you are trying to use the Currently Playing endpoint. That endpoint requires Authorization.

[ErvinWijaya]

this is how i get my token:

 const [{ token }, dispatch] = useStateProvider();

  useEffect(() => {

    const hash = window.location.hash;

    if (hash) {

      const token = hash

        .substring(1)

        .split("&")

        .find((elem) => elem.startsWith("access_token"))

        .split("=")[1];

      window.localStorage.setItem("token", token);

      // window.location.hash = "";

      dispatch({ type: reducerCases.SET_TOKEN, token });

    }

  }, [token, dispatch]);

i put the token into my reducerCases file : 

 switch (action.type) {

    case reducerCases.SET_TOKEN: {

      return {

        ...state,

        token: action.token,

      };

    }

and i become my token as contextProvider.

[ErvinWijaya]

the error occur just as when i request post or put. while i used get request , i did,'t get error as post and put request

.

[Ximzend]

That code only shows how you get the token from elsewhere.

To get a token that works, you'll need to implement an Autorisation Code Flow. I think you want to run the code in your browser, so I recommend you to use the Authorization Code with PKCE Flow.