Trouble hoisting access token from axios.post request

API
1

Hello, this is for the OAuth client credentials flow. Shown in the code below, in the first console log I can see my OAuth access token fine. But in the second console log the access token is undefined. Is their a way for me to hoist the value out of the post request so I can access it?

{import axios from 'axios';

let API_KEY = "MyClientId";
let accessToken;

axios.post('https://id.twitch.tv/oauth2/token?client_id=MyClientId&client_secret=MyClientSecretId&grant_type=client_credentials')
    .then(response => {
        accessToken = response.data.access_token;
        console.log(accessToken); // shows the token fine here
    })
    console.log(accessToken); // shows token is undefined here

let twitchApi = axios.create({
    headers: {
        "Authorization": "Bearer " + accessToken,
        "Client-ID": API_KEY
    }
});

export default twitchApi;}
2

Your axios.create doesn’t appear to wait for the axios.post to complete.

They appear to run at the same time

3

Tys Barry for the reply. Do you have any suggestions in how I can have my axios.post process first before axios.create?

4 
{import axios from 'axios';

let API_KEY = "MyClientId";
let accessToken;

axios.post('https://id.twitch.tv/oauth2/token?client_id=MyClientId&client_secret=MyClientSecretId&grant_type=client_credentials')
    .then(response => {
        accessToken = response.data.access_token;
        console.log(accessToken); // shows the token fine here

let twitchApi = axios.create({
    headers: {
        "Authorization": "Bearer " + accessToken,
        "Client-ID": API_KEY
    }
});

    })

export default twitchApi;}

It’s dumbest fix as I have no idea what else you are doing here

5

I’m solely asking for advice on how to get access to my OAuth access token so i can use the Twitch API.

Heres the tutorial im following: https://www.youtube.com/watch?v=VTY6ZzDTV3A&ab_channel=RenaissanceTroll

And heres the codepen: https://codesandbox.io/s/reactjs-twitch-api-project-skvhe

6

There is nothing in the linked code pen for generating/storing/reusing/obtaining any kind of access token

Authentication is covered here

Since this looks like a server application, where you don’t want the user to login, you probably want to generate an App Access Token, which is what you have already been doing

You should generate then store this somewhere and recall it, IE don’t generate a token for every page load.

Alternatively you can create a server CronJob to fetch, since this application seems to only poll games/top and the streams for those games, so you could create a cronjob to do it, store it in a database, then the front end returns the data from that database. Which then means you are making less calls to Twitch saving your Rate limit, and if 800 people loaded the page at once, the app wouldn’t stop working. IE Implement caching.

The “fix” post I suggested, which you reported as inappropriate is the simplest fix. As it moves the second call to Twitch inside the .then of the call to get a token.

So the second call waits for the result of the first call inside the then. Otherwise both calls were occurring at the same time.

You can either move it to nesting inside .then’s, using Async/await like you have done elsewhere, or move all the calls to Twitch to a CronJob to opimise pageloads/Twitch API interaction

1 Like
7

Thank you Barry, I appreciate the explanation. It was not clear to me at first what you did, so this response cleared it up for me. I apologize for not being able to see what the “fix” was at first; that was my fault.

Yeah the tutorial was pretty old, it was made before Twitch made it required to include OAuth to make a request.

8

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