Hi. I have a fully front end website made by myself. I wanted to add a feature to the site taht shows a red little circle on the site that says “LIVE NOW”. In order to do this, I simply need a line of JavaScript that pings Twitch’s servers and sends me a boolean that says If my twitch page is livestreaming or not. I can handle the rest.
How would I do this? My site has no backend, and just runs off front end JavaScript. I wanted to add front end JavaScript code that sees if I’m live streaming. It seems like the most simple thing to do but for some reason the API is so complicated due to recently changing that I can’t do it.
As you have no backend and are making the requests client-side, this also means that you need the user to login to your site with the Implicit Grant flow so that you have an OAuth token to use with the request.
Why would the user login to twitch? I couldn’t care less if someone is able to know if I’m streaming or not using JavaScript, is there a way to turn off this needless security?
Only way to get an OAuth token is either in your backend server create an App Access token, or to have the user login to your site which would grant you an OAuth token to use. Since the former is not possible as you mentioned not having a backend, the latter is your only option.
It’s not needless security, it ensures Twitch know who is making API requests, and if necessary can take action against bad actors.
No, as OAuth tokens expire so you would need to frequently update it, and anyone accessing your site could either just revoke the token which would kill it and break it for everyone, or use it maliciously and potentially get your app banned. Plus it’s against Twitch’s Developer Agreement to leak your OAuth token like that.
It should be noted that a login process is really simple, and after the first time a user logs in it can be essentially transparent to the user.
Have a button that sends the user to the Twitch Implicit flow URL (or even potentially automatically if you wish)
User is redirected back to your site, your site takes the OAuth token and stores it in localstorage
Every time the user visits your site you can just check the validity of the token, if it’s missing/expired/invalid, send them to the Auth URL in step 1. If they’re still connected to your app they’ll get redirect right back with a new token to use.