Client ID and Bearer Tokens


#1

Currently im making a React App with no backend and my objective is to, as soon as you enter the page, i request the API to fetch my streamers list and get their status. Since i dont want to use a backend for this app, i would need more than 30 requests if 30 people use the app at the same time if im not wrong. How can i get a bearer token with no backend and without asking for user authentication since App Tokens should not be used on the client. Thanks!


#2

You only have two choices of bearer tokens

  1. use your credentials
  2. use your users credentials

without asking for user authentication

that removes option 1)

with no backend

that would require you to expose your credentials in the frontend. If you need to access restricted endpoints, this is a no-go, because you’re basically broadcasting your password. This is what is meant by

since App Tokens should not be used on the client

The last option is to only query publicly available data on the API. Then you would only need to put a Client-ID in the frontend. Still not recommended, but at least not giving out credentials.


#3

Thanks for the reply. Im just going to get some data, I will not need access restricted endpoints. the thing is that even with the client id, i can only get 30 calls per minute. So instead of my client ID, can I generate a token and get the 800 calls? Which type of token it is then?


#4

You could use implicit auth

This doesn’t need a Client Secret and will allow you to make requests to “access restricted” end points and doesn’t require a “backend”

Without a backend you’d have to expose your Client Secret in order to generate a App Access Token (no user auth for server to server requests), or a User Access Token.

Which you can’t do in a pure Front End application due to Client Secret leaking.


#5

Like I said, i dont need to acess “access restricted” endpoints, I just need to increase my rate from 30 calls per minute. Will I be able to do this with the implicit auth ?


#6

Any auth will grant the higher rate limit.

It is worth noting that

Thats 1 API request to get the first 100 follows, and then 1 API request to get their streams. (If you intend to get who you are following as your list of streamers)

Since under Helix you can look up 100 streams at once, so you might find 30 requests is sufficient. If your list is hardcoded, then you can lookup 3000 streams with ease. (Or 1500 if you do follows then streams and keeping to the rate limit)

IE

https://api.twitch.tv/helix/streams?user_id=foo&user_id=bar&user_id=flibble

etc


#7

Yes my list is fixed, i just want a call to check their viewer number, the game the are playing and if they are online. Thanks a lot for your answers and time!!


#8

In that case using helix streams will get you if they are online and let you do 100 at once, so you probably won’t need the rate limit bump


#9

If I have the fetch call on the client code (since i have no backend) and lets say more than 30 people use it at once, the last ones will get a 421 since every single peson is making a request am i right? . Im expecting between 120-150 people so thats why i was thinking in increasing the rate limit with the auth.


#10

No

This implies that your React App is run all locally inside the code in a pure front end environment.

Rate limiting is by ClientID/IP keypair.

So if three people use your App, from three different IP’s they get their own Rate limit pool.

But if this is the intend of your App, it would be beneficial to switch to a app that has a backend.

So you can utilize webhooks to avoid the need to long poll, OR cache the stream online/offline results so you call the API once for your WHOLE App periodically, instead of every time a user loads your App.


#11

Thanks a lot for your answer! I really had no ideia that it was limited per IP/Client ID, I thought that I had only 30 calls per ID, so if that really works like that the 30 requests are more than enough and i need no auth.

I am going to do a backend and cache system in the future, but for now, I want to release the application as soon as possible and after that I have more time to learn some backend framework like node/express/next to add more features to the app (like user actions with auth). I only worked with Java and Spring so far, it is the first time im using javascript frameworks.