# Update API Call w/oAuth & Embedded Player Changes

**URL:** <https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099>\
**Category:** API\
**Created:** [June 3, 2020, 9:44pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099 "2020-06-03T21:44:17Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Webman97](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/webman97/32/7890_2.png) [@Webman97](https://discuss.dev.twitch.com/u/Webman97)\
**Post date:** [June 3, 2020, 9:44pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/1 "2020-06-03T21:44:17Z")

</div>

Continuation of issues experienced here: [https://discuss.dev.twitch.com/t/new-developer-unsure-how-to-integrate-api/24183](https://discuss.dev.twitch.com/t/new-developer-unsure-how-to-integrate-api/24183)

With the new oAuth requirement and embedded player changes, I’ve modified my code to accommodate. However, I believe I’m stuck again! I’m not sure why the following code is not working:

```
<div id="twitch-embed"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script>

    /* User-defined variables */
    var channel_name = "";
    var client_id = "";
    var client_secret = "";
    
    /* Token variable used to store the access_token */
    var token;
    
    /* Retrieve the access_token using oAuth2 (Bearer Helix, NOT Twitch API v5) */
    fetch(
        'https://id.twitch.tv/oauth2/token',
        {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'client_id': 'client_id',
                'client_secret': 'client_secret',
                'grant_type': 'client_credentials'
            }
        }
    
    /* Store the access token */
    ).then(response => response.json()
    ).then(response => {
        token = response.data[access_token];
    });
    
    /* Get Streams Endpoint (Is the livestream live?) */
    fetch(
        'https://api.twitch.tv/helix/streams?user_login=' + channel_name,
        {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Client-ID': 'client_id',
                'Authorization': 'Bearer + token'
            }
        }
    
    /* Embed livestream if live, otherwise show nothing */
    ).then(response => response.json()
    ).then(response => {
        if (response.data[0] != undefined){
            var embed = new Twitch.Embed("twitch-embed", {
                width: 1280,
                height: 500,
                channel: channel_name,
                theme: "dark"
            });
            
        embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
            var player = embed.getPlayer();
            player.play();
        });
    };
    }).catch(err => {
        console.log(err);
    });
    
</script>
```

---

<div class="post-metadata">

**Author:** ![matt\_thomas](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/matt_thomas/32/710_2.png) [@matt\_thomas](https://discuss.dev.twitch.com/u/matt_thomas)\
**Post date:** [June 3, 2020, 10:26pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/2 "2020-06-03T22:26:25Z")

</div>

> [@Webman97](#):
>
> ‘Authorization’: ‘Bearer + token’

Doesn’t that concat Bearer and the token to be like

```auto
Bearercfabdegwdoklmawdzdo98xt2fo512y

```

instead of

```auto
Bearer cfabdegwdoklmawdzdo98xt2fo512y

```

Also, I think others here might suggest grabbing the renew token and using that instead of making a fresh token on each load.

---

<div class="post-metadata">

**Author:** ![Webman97](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/webman97/32/7890_2.png) [@Webman97](https://discuss.dev.twitch.com/u/Webman97)\
**Post date:** [June 3, 2020, 10:55pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/3 "2020-06-03T22:55:26Z")

</div>

> [@matt\_thomas](#):
>
> Doesn’t that concat Bearer and the token to be like
> 
> ```auto
> Bearercfabdegwdoklmawdzdo98xt2fo512y
> 
> ```
> 
> instead of
> 
> ```auto
> Bearer cfabdegwdoklmawdzdo98xt2fo512y
> 
> ```

**You’d be correct! Corrected, code still isn’t working though…**  
`'Authorization': 'Bearer {$token}'`

> [@matt\_thomas](#):
>
> Also, I think others here might suggest grabbing the renew token and using that instead of making a fresh token on each load.

I’ve opted not to grab the renew token per this documentation:

> **[Authentication](https://dev.twitch.tv/docs/authentication/)**
>
> Authentication

> However, _you should build your applications in such a way that they are resilient to token authentication failures._ In other words, an application capable of refreshing tokens should not need to know how long a token will live. Rather, it should be prepared to deal with the token becoming invalid at any time.

---

<div class="post-metadata">

**Author:** ![Webman97](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/webman97/32/7890_2.png) [@Webman97](https://discuss.dev.twitch.com/u/Webman97)\
**Post date:** [June 3, 2020, 11:00pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/4 "2020-06-03T23:00:53Z")

</div>

> [@Webman97](#):
>
> **You’d be correct! Corrected, code still isn’t working though…**  
> `'Authorization': 'Bearer {$token}'`

Typo: `'Authorization': 'Bearer ${token}'`

---

<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:** [June 4, 2020, 9:03am UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/5 "2020-06-04T09:03:05Z")

</div>

your code fetches a token but doesn’t wait for that token before fetching the user.

Also this code seems to suggest _every page load_ you’ll generate an access token instead of fetching and storing and reusing an active token.

Additionally this is _all front end code_, this violates the developer services agreement as you are leaking your `client_secret` and then the `access_token` generated with it.

Essentially you are leaking your password.

Only a users own token should be shown to the user. Never an app access token.

So whilst the fix is simple, you should not be doing this as it violates the agreement

---

<div class="post-metadata">

**Author:** ![Webman97](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/webman97/32/7890_2.png) [@Webman97](https://discuss.dev.twitch.com/u/Webman97)\
**Post date:** [June 4, 2020, 6:19pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/6 "2020-06-04T18:19:23Z")

</div>

> [@BarryCarlyon](#):
>
> your code fetches a token but doesn’t wait for that token before fetching the user.
> 
> Also this code seems to suggest _every page load_ you’ll generate an access token instead of fetching and storing and reusing an active token.

Ahh! Makes sense, I’ll modify the code’s logic.

> [@BarryCarlyon](#):
>
> Additionally this is _all front end code_ , this violates the developer services agreement as you are leaking your `client_secret` and then the `access_token` generated with it.
> 
> Essentially you are leaking your password.
> 
> Only a users own token should be shown to the user. Never an app access token.
> 
> So whilst the fix is simple, you should not be doing this as it violates the agreement

Thankfully, the code doesn’t work and I’ve been testing all of this on a local vm.

I’m going to regenerate the `client_secret` and work on a rewrite of this code per the above. Thanks all!

---

<div class="post-metadata">

**Author:** ![bruisr](https://avatars.discourse-cdn.com/v4/letter/b/71c47a/32.png) [@bruisr](https://discuss.dev.twitch.com/u/bruisr)\
**Post date:** [June 17, 2020, 3:26pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/7 "2020-06-17T15:26:34Z")

</div>

Hey @Webman97, were you able to get this to work? If so, would you be willing to share your result? I have a stream embed that shows when the channel is live, but hides when offline (I believe our code is very similar) and it stopped working. I’m pretty out of my element here and not sure where to begin. Any help is appreciated!

---

<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:** [June 17, 2020, 3:53pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/8 "2020-06-17T15:53:40Z")

</div>

You might want to start a separate thread and show the code you currently have and where you are stuck and we can go from there rather than hijacking this thread!

---

<div class="post-metadata">

**Author:** ![bruisr](https://avatars.discourse-cdn.com/v4/letter/b/71c47a/32.png) [@bruisr](https://discuss.dev.twitch.com/u/bruisr)\
**Post date:** [June 17, 2020, 4:03pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/9 "2020-06-17T16:03:45Z")

</div>

I figured since we have the same issue, it would be cleaner to just see if he could share his solution. I’d be happy to make a new thread though if that’s what is preferred!

---

<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:** [June 17, 2020, 4:11pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/10 "2020-06-17T16:11:02Z")

</div>

I can help you fix your code/logic, but don’t want to spam Webman with thread reply notifications.

---

<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:** [July 17, 2020, 4:11pm UTC](https://discuss.dev.twitch.com/t/update-api-call-w-oauth-embedded-player-changes/26099/11 "2020-07-17T16:11:07Z")

</div>

Closed on July 17, 2020, 4:11pm UTC

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