How to get my Twitch tools working

Posted by admin on March 11th, 2022

A long time back I wrote two tools which use standalone HTML and javascript to get data from Twitch, one was Box Art which I documented here: Box Art Blog Post

These tools have stopped working recently because Twitch changed a lot of requirements specifically to do with Authentication when accessing the APIs. I didn’t feel like there was a safe way to adapt my tools without causing problems for users, the data required by the API is a token that if accidentally shared could give someone else access to your Twitch channel data.

All that said I did hack the tools myself so that I could continue using them and I want to share that process, it’s a few extra steps so you need to be pretty comfortable with editing code files. I’ll go through the process step by step. I’ll use the Box Art tool as a demo.

First you need to get the latest version of the tool

Twitch Box Art: https://github.com/adrianschofield/twitchboxart

Click on the green Code button and choose to download a Zip file.

Unzip the files to wherever you want them and then open the scripts\twitchboxart.js file in an editor, Notepad will work just fine.

Now you need to grab a coffee and delve into the world of Twitch Developers.

First go to this link in a new tab in your browser: https://twitchapps.com/tokengen/

Leave this tab open and start another tab with this address: https://dev.twitch.tv/console/apps

If you are prompted to login at this stage then use your Twitch account to complete the steps

Click on the purple Register Your Application button and then fill in the details as follows:

Name – can be anything but I believe you can’t use the name Twitch anywhere

OAuth Redirect Urls – you can get this from the first page you opened, it’s highlighted in red so just copy it from one tab to another https://twitchapps.com/tokengen/
Category – choose Broadcaster Suite
Complete the Captcha and you should see this:

Now click Create

Click on the Manage link on the far right of the row where you see your application created. You’ll be presented with a similar image as above but this will contain your Client ID as well. Copy this value. You are going to need this in two places.

First in the file you have opened in the editor amend line 5 so it looks like this put your client ID in between the quotes

var clientId = 'Client_ID_here';

Second go to the first page you opened and paste your Client ID where prompted you’ll also need to supply the scopes, you just need this one: channel_read. Your form should look like this:

Click the Connect button and then the Authorize button when prompted with this dialog:

You’ll then see a page like this:

Whatever you do never share this value with anyone, it allows access to your channel (although at least this token will only have minimal read permissions).

Copy “Your OAuth token” and edit line 6 in the file you have open in the editor

You should end up with something like this:

// Update these values to reflect your own channel name and other variables</p>
var channel = 'channelname';
var clientId = 'client_id';
var oAuthToken = 'oauth_token';

Save the file you have open in the Editor.

Now add the tool to your streaming tool as documented in the original article and you should get things working.

OAuth tokens do not last forever so if the tool stops working you will need to refresh your Token using the steps above.

I appreciate that this seems super complicated for something that’s so simple. Twitch has changed it’s API authentication for very good reasons, mainly protecting your personal data, and this is the reason I stopped working on these tools and providing updates because there is no safe way to store your confidential information in this simple scenario. However I got a few requests and this is the simplest solution (yes I know) that I could come up with. I did search around the internet for other solutions to offer people but the main places I know, Stream Labs and Stream Elements don’t have a box art widget or app. If you know of a better solution please feel free to comment or message me on Twitter

/* Tweet*/