Show stream on/off on HTML page

API
1

Hi. I’m pretty new to working with APIs, what I want to do is something (I think) simple.

What I’m looking for is a text that says if a user’s stream is Live or Offline with the twitch api. I want to display it in an HTML page so I’m using JavaScript. I made this code, but it gives me 401 Unauthorized error.


const clientId = 'CLIENT ID';
const channelName = 'CHANNEL NAME;
const accessToken = 'ACCES TOKEN';


fetch(`https://api.twitch.tv/helix/streams?user_login=${channelName}`, {
  headers: {
    'Client-ID': clientId,
    'Authorization': `Bearer ${accessToken}`,
  },
})
  .then(response => response.json())
  .then(data => {

  })
  .catch(error => {
    console.error('Error al obtener el estado del stream:', error);
  });

Does anyone know what I’m doing wrong?

Thank you.

1 Like
2

You missed a closing single-quote on channelName, but I’m assuming that’s irrelevant. Aside from that, the code functions as expected. The error must lie in your client ID and Access Token pair.

3

Yes, I mistyped it when transcribing it to the forum. Sadly, that’s not the problem. I was using an old application, so I created a new one, but it’s still not working. If it helps, here is the error I get from the Twitch API:

{“error”:“Unauthorized”,“status”:401,“message”:“OAuth token is missing”}

Thanks for your reply, though.

4

How are you generating your token?

5

From the dev console in the app

6

If you’re trying use just what’s in the Dev console, then it sounds like you’re trying to use the Client Secret as an OAuth token, which it’s not.

Make sure to follow the Authentication Docs to get an OAuth token. If you’re building a public webpage you’ll need to use the Implicit or Auth Code flows for the user to log in to the site and generate a token that can be used for API requests.

7

Hi Dist. Thanks for your reply.
I was actually making that mistake. There is no way to get the Oauth without the user having to log in? Because all I want is a text that says if I’m live or not and it’s strange asking the user to log in to see that. Is there no other option to generate it?

8

There is the Client Credentials flow, but this should only be done server-side as you must not expose tokens from that flow to front end users, which means you would need the frontend to send a request to your server which makes the Get Streams request and then responds back to the frontend to display the text that you wish.

9

So, there’s no way to get this data WITHOUTH autentication?

10

All API requests require a Client ID and OAuth token. If a stream is live or not doesn’t require any user permissions, but it still requires a token.

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.