# API Authentication in JS

**URL:** <https://discuss.dev.twitch.com/t/api-authentication-in-js/22723>\
**Category:** API\
**Created:** [October 4, 2019, 10:17pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723 "2019-10-04T22:17:51Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 4, 2019, 10:17pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/1 "2019-10-04T22:17:51Z")

</div>

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)](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/13)  
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.

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [October 4, 2019, 10:33pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/2 "2019-10-04T22:33:47Z")

</div>

Use the Get Streams endpoint [https://dev.twitch.tv/docs/api/reference#get-streams](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.

---

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 4, 2019, 10:46pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/3 "2019-10-04T22:46:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [October 4, 2019, 11:57pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/4 "2019-10-04T23:57:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 5, 2019, 8:59am UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/5 "2019-10-05T08:59:49Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 5, 2019, 11:56am UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/6 "2019-10-05T11:56:47Z")

</div>

> **[Reference](https://dev.twitch.tv/docs/api/reference/)**
>
> Twitch Developer tools and services to integrate Twitch into your development or create interactive experience on twitch.tv.

> [https://api.twitch.tv/helix/streams/?user\_id=CHANNELID](https://api.twitch.tv/helix/streams/?user_id=CHANNELID)

or

> [https://api.twitch.tv/helix/streams/?user\_login=USERNAME](https://api.twitch.tv/helix/streams/?user_login=USERNAME)

---

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 5, 2019, 12:06pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/7 "2019-10-05T12:06:23Z")

</div>

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);`

```auto
            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);

```

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 5, 2019, 12:10pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/8 "2019-10-05T12:10:25Z")

</div>

> **[XMLHttpRequest: setRequestHeader() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader)**
>
> The XMLHttpRequest method setRequestHeader() sets the value of an HTTP request header.
> When using setRequestHeader(), you must call it after calling open(), but before calling send().
> If this method is called several times with the same header,...

> **[XMLHttpRequest: send() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send)**
>
> The XMLHttpRequest method
> send() sends the request to the server.

> **[XMLHttpRequest: load event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event)**
>
> The load event is fired when an XMLHttpRequest transaction completes successfully.

```auto
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:

> **[XMLHttpRequest: response property - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response)**
>
> The XMLHttpRequest
> response property returns the response's body content as
> an ArrayBuffer, a Blob, a Document,
> a JavaScript Object, or a string, depending on the value
> of the request's responseType
> property.

```auto
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.response);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 5, 2019, 12:17pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/9 "2019-10-05T12:17:50Z")

</div>

Thank you very much!

```auto
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?

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 5, 2019, 12:27pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/10 "2019-10-05T12:27:23Z")

</div>

> [@M\_Lehmann](#):
>
> XML.open(“GET”, “[https://api.twitch.tv/helix/streams/?user\_id=sugarincubes](https://api.twitch.tv/helix/streams/?user_id=sugarincubes)”)

Is incorrect

For a username it’s

> XML.open(“GET”, “[https://api.twitch.tv/helix/streams/?user\_login=sugarincubes](https://api.twitch.tv/helix/streams/?user_login=sugarincubes)”)

Please read the docs and what we wrote here

> [@API Authentication in JS](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/6):
>
> [https://api.twitch.tv/helix/streams/?user\_id=CHANNELID](https://api.twitch.tv/helix/streams/?user_id=CHANNELID) or [https://api.twitch.tv/helix/streams/?user\_login=USERNAME](https://api.twitch.tv/helix/streams/?user_login=USERNAME)

---

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 5, 2019, 12:44pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/11 "2019-10-05T12:44:28Z")

</div>

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

```auto
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);
            }

```

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 5, 2019, 12:46pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/12 "2019-10-05T12:46:14Z")

</div>

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

sugarincubes is not live

---

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 5, 2019, 12:51pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/13 "2019-10-05T12:51:29Z")

</div>

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 []

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [October 5, 2019, 12:51pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/14 "2019-10-05T12:51:54Z")

</div>

3/5 minutes

You may also be interested in Webhooks

[https://dev.twitch.tv/docs/api/webhooks-guide](https://dev.twitch.tv/docs/api/webhooks-guide)

For live/not live notifications

Checking it just now I see:

 ![image](https://d2opxh93rbxzdn.cloudfront.net/original/2X/7/75e48e973e2cc605e7402f788a9555e8b962a4d1.png)

---

<div class="post-metadata">

**Author:** ![M\_Lehmann](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/m_lehmann/32/7152_2.png) [@M\_Lehmann](https://discuss.dev.twitch.com/u/M_Lehmann)\
**Post date:** [October 5, 2019, 12:53pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/15 "2019-10-05T12:53:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\
**Post date:** [November 4, 2019, 12:53pm UTC](https://discuss.dev.twitch.com/t/api-authentication-in-js/22723/16 "2019-11-04T12:53:09Z")

</div>

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