The recent changes of the API

Hello guys, I had done a pretty good twitch clone with React and your API.

But since recently I have “error 501” everywhere and I’m so confused about what to do to use the API like before (If I can still use it like before.)

Before the API changes, here is how I was using the API :

import axios from 'axios';

let api = axios.create({
    headers: {
        'Client-ID' : 'xxxxxxxxxxxxxxxxxxxxxx'
    }
})

export default api;

And then :

const fetchData = async () => {

            const result = await api.get(

                `https://api.twitch.tv/helix/streams?game_id=${location.state.gameID}`

            );
}

With my research I went on this page but I really didn’t understand a thing :

Do I need to make a post request ? (I tried)

const result = await api.post('https://id.twitch.tv/oauth2/token?client_id=xxxxxxxxxx&client_secret=xxxxxxx&grant_type=client_credentials')

But I had this error : " Request header field client-id is not allowed by Access-Control-Allow-Headers in preflight response."

If someone can give me a hand and explain me in easy to understand english it would be awesome :slight_smile:

This sounds like you are doing the requests in the front end, this is bad, hence it’s been blocked.

Doing it this way allows you to fetch and leak an access token aka a password (for want of a better description), and as or right now you are leaking your client_secret to the world, which is bad and against the Dev TOS

Your react front end needs to call your react back end and the react back end does the requests to Twitch and handles the secrets securely

Hello Barry thank you for the response, but what if I just use the API in local to build some exiting things ?

What about doing :

https://id.twitch.tv/oauth2/authorize?client_id=’ + CLIENT_ID + ‘&redirect_uri=’ + REDIRECT_URI + ‘&response_type=token’

Just in local with my localhost ?

Sure you can do oAuth via a server running on Localhost

Token is for implicit auth

An example