API Authentication in JS

I’m trying to build a wevsite with twitch embedded. I want to check whether the channel I want to display is currently streaming to decide whether to play a video of the current stream. Playing the current stream is no issue. But the checking part is giving me a head ache. I tried using some old code from here: Live vs online (using javascript)
I got to the point where I believe I understand that I need to authentice to use this part of the Api. Do I need to do this with a client ID or an Access Token? How do I obtain the access token exactly (reading the doc didn’t help me, I’m just getting started with using APIs of any kind)? I do not want for a user to have to log into their twitch account for this simple check which the doc on getting tokens seemed to imply. How do I go about this in javascript?

I have registered an application and do have a client ID.

Use the Get Streams endpoint https://dev.twitch.tv/docs/api/reference#get-streams

You don’t need an access token, a client id will work fine, as shown in the example.

Just make a request to that endpoint, with your client id as the Client-ID header, and you can specify one or more channels using the user_id or user_login querystring params depending on if you want to use their username or their Twitch ID.

If the channel is live, you’ll get a stream object back in the results, if their offline you wont.

How do I put the ID in the header using JS? GET https://api.twitch.tv/helix/streams/<channel>client-ID=uo6dggojyb8d6soh92zknwmi5ej1q2?

You can’t put it in the URL like that. Just google whatever request library you’re using and how to set headers in it.

I tried using the XMLHttpRequst but I’m not sure how to use it.

function reqListener(){
              console.log(this.responseText);
            }
            var XML = new XMLHttpRequest();
            XML.addEventListener("load", reqListener);
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/<channel>");
            XML.setRequestHeader('Client-ID', '<ID>');

The reqListener function I copied from the mozilla doc. I put the setRequestHeader after the open because XML complained headers can only be set for requests that are ‘opened’.

Using this I get a 404.

https://api.twitch.tv/helix/streams/?user_id=CHANNELID

or

https://api.twitch.tv/helix/streams/?user_login=USERNAME

Yes, but I’ll still need to send the client ID in the header and I think that’s the part that’s going wrong.
Correcting my code as described returns undefined for the call console.log(data);

            var XML = new XMLHttpRequest();
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/?user_id=CHANNELID");
            XML.setRequestHeader('Client-ID', 'CLIENTID');
            var data = XML.send();
            console.log(data);


var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.onload = function () {
  // Do something with the retrieved data ( found in xmlhttp.response )
};

xhr.send(null);

xhr.send() doesn’t return anything

The response is in onload

Another way:

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.response);
    }
  }
1 Like

Thank you very much!

var XML = new XMLHttpRequest();
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/?user_id=sugarincubes");
            XML.setRequestHeader('Client-ID', '<clientID>');
            XML.send();
            XML.onload = function () {
              console.log(XML.response);
            }

Gave me some meaningful output at last.
However, I only ever get a JSON object with data: [] regardles of the stream being online of not. Does the user_id differ from the name of a channel?

Is incorrect

For a username it’s

XML.open(“GET”, “https://api.twitch.tv/helix/streams/?user_login=sugarincubes”)

Please read the docs and what we wrote here

I think I did indeed do everything according to your replies and the doc but still only receive data=[]

var XML = new XMLHttpRequest();
            var response = null;
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/?user_login=sugarincubes");
            XML.setRequestHeader('Client-ID', '<clientID>');
            XML.send();
            XML.onload = function () {
              response = JSON.parse(XML.response);
              console.log(response);
            }

Data is only returned/not an empty array when that streamer is live

sugarincubes is not live

does it take time to be updated? I went live several times during testing.
Sugarincubes is now live, also streaming live to the embedded twitch iframe but sata is still []

3/5 minutes

You may also be interested in Webhooks

For live/not live notifications

Checking it just now I see:

1 Like

Just noticed. I refreshed the page and now it says data 1. Thank you very much and sorry for the triviality of some questions.

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