Using Twitch API with ReactJS

[Versifiction]

I want to create a web app with ReactJS displaying some datas fetched from Twitch API, but I’m stuck at the OAuth part, I read the documentation here https://dev.twitch.tv/docs/authentication/getting-tokens-oauth but I don’tget it, can someone explain me the logic of the authentication in a few words ?

[Marenthyu]

This should help you a bit more, especially the video linked there, it explains the general logic of oauth:

Authenticating with the Twitch API

Introduction So, you want to work with the Twitch API and you probably noticed that everything requires some sort of Authentication / Authorization to allow you to use it. This Post/Wiki aims to answer some FAQ about that procedure and help you along in your journey. If you are already working with the API and are just struggling with Errors, scroll down to the Troubleshooting section. If instead, you are new to the API entirely and want to learn more, just read on! How to OAuth If the Twitch…

[Versifiction]

Ok thank you for the link, but just to display Twitch datas about me on my app, I need to do the OAuth authentication ?

I don’t understand why I need to get the OAuth popup just to display datas about my account ?

[Dist]

@Versifiction

I don’t understand why I need to get the OAuth popup just to display datas about my account ?

All Helix API requests require an OAuth token.

If you make requests server-side you can just generate an App token for any request that doesn’t require user scopes. If you make requests client-side then you need the user to go through the Implicit auth flow to get the OAuth token required for the API requests.

[Versifiction]

So to display some twitch datas about my account, with only a front-end with React, I need :

• to do a get request to oauth
• then with the access token received, I can go get requests to twitch api endpoints

that’s it ?

[Marenthyu]

In a “Front-End-Only” situation, you must use the Implicit auth flow.

Your user will have to authenticate with Twitch once every while (30 or 60 days, i forgot just now), then you can save that token in localStorage, for example. That will then allow you to make requests on the client-side to gather the data.

This means you need to redirect the user to the /authorize URL with the proper rediect URL to return to your app afterwards. Then your app checks if a token is present and use/save it. If the token becomes invalid, you can redirect the user and if they have not unauthorized your app, they wont even notice the redirect and will end up back on your website.

[Versifiction]

Ok thank you I get it, it’s sad that to see Twitch datas about ME, the user has to login with Twitch, I’m not sure the user will understand that he has to login to see MY datas on MY website haha,

Thanks man,

[Marenthyu]

It’s a limitation of you saying it’s “Client-Side only”.

You can, if you have a backend, cache the information on your server and provide it to all views. Other than that: Hardcode it and regularly run a server-side script to update it, if you expect the info to change.