GetClips with axios returns 401 error

Hi everyone!

I’m currently working on a React web app where I want to show the latest 3 clips from twitch. (i’m fairly new to react and axios so this web app is just for practice).

Note: The broadcaster_id & id in the params are id’s i grabbed from the internet somewhere, I’m not sure where to find the propper ones.

Here is my code:

const twitchUrl = "https://api.twitch.tv/helix/clips?id=AwkwardHelplessSalamanderSwiftRage";

try {
      let res = await axios({
        url: twitchUrl,
        params: {"broadcaster_id":"141981764","id":"1woowvbkiNv8BRxEWSqmQz6Zk92", "first":"3"},
        method: 'get',
        timeout: 8000,
        headers: {
          'client-id': client_id,
          'accept': 'application/vnd.twitchtv.v5+json',
          'Authorization': 'Bearer ss91pf4relwcgcet6ebubt4sgo268o',
        }
      })
      if(res.status === 200) {
        console.log("twitch status: ", res.status)
      }
      return getTwitchClips(res.data);
    }
    catch(err) {
      console.error("twitch error: ", err);
    }
  }

When I check the console log, it returnes this error:

AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

I don’t know what i’m doing wrong here, can someone please help me out with this ?

Thanks!

You’re sending too many params, as the Get Clips documentation states:
For a query to be valid, id (one or more), broadcaster_id, or game_id must be specified. You may specify only one of these parameters.

You’re specifying an id in your twitchUrl, another id in your request params, and a broadcaster_id in the request params too.

Additionally, the 'accept': 'application/vnd.twitchtv.v5+json' can be removed completely as v5 is one of the versions of Kraken, not Helix, and is no longer part of the Twitch API.

In the future, please remove any bearer tokens from code you post. I don’t know if that was a valid token at some point or not as it’s not valid currently, but still, please just hide any tokens that must be kept private.

@Dist thank you for your reply, I missed the part where it said that only one of these params are allowed. I changed that, so now I only have the broadcaster_id and removed the others.

However I’m still getting the same error message:

"Invalid OAuth token"

Do you know how I can fix this error ? and where I can find my broadcaster_id ?

Have you gone through the Authentication process and obtained an OAuth token? Authentication | Twitch Developers

You can use the Get Users endpoint. If you use the login param you can specify a broadcasters username and it’ll return the user object, which includes their id.

@Dist I’m still getting the “Invalid OAuth token” error, I’m running a script that gets the accesstoken:

async function getTwitchAccessToken() {
    const twitchTokenUrl = `https://id.twitch.tv/oauth2/token?client_id=${twitch_client_id}&client_secret=${twitch_client_secret}&grant_type=client_credentials`;

    axios.post(twitchTokenUrl).then((response) => {
      const token = response.data.access_token;
      setTwitchAccessToken(token);
    }).catch(({response}) => {
      console.log("error post: ", response)
    });
  }

This does return a accessToken, that token, is the Bearer code right ? Or am i wrong about this?

Because i’m using that in the other codes to get the user and the clips:
User:

 const twitchUserUrl = "https://api.twitch.tv/helix/users";
  axios.get(twitchUserUrl, {
    headers: {
      'Client-Id': twitch_client_id,
      'Authorization': `Bearer ${twitchAccessToken}`,
    }
  }).then((response) => {
    console.log("user resp: ", response)
  }, (err) => {
    console.log("user error: ", err);
  }); 

Clips:

const twitchClipsUrl = "https://api.twitch.tv/helix/clips";
  
  axios({
      url: twitchClipsUrl,
      params: {"broadcaster_id":"67955580", "first":"3"},
      method: 'get',
      timeout: 8000,
      headers: {
        'Client-Id': twitch_client_id,
        'Authorization': `Bearer ${twitchAccessToken}`,
      }
    }).then((response) => {
      console.log("twitch status: ", response.status)
    }, (error) => {
      console.log("clips errpr: ", error)
  })

What am i missing here ? (Yes I am new to all of this, so if its something stupid, bear with me haha)