Nodecg Twitch Auth

Posted by admin on November 5th, 2015

This is going to be a very short post about nodecg which I have started using to achieve two things. First improve the quality of my stream by creating cool notifications and second to learn a little javascript/Nodejs. In my simplistic understanding nodecg is a small web server which you can use with the OBS browser plugin to add dynamic content, for instance follower or sub notifications. The beauty of it is that if you have a good understanding of javascript you can make the dynamic content be whatever you’d like.

Nodecg uses the term bundle to refer to content, some of this is actual content that you want to appear in the browser and some bundles are support code which allow you do to do interesting things, like accessing the Twitch API or StreamTip for instance. If you need to set up Twitch authentication when using a bundle you have to jump through a few hoops and the documentation isn’t quite detailed enough if you are a noob. As an example the lfg-twitchapi bundle requires Twitch Auth and on it’s github page it tells you what to configure. What’s not clear is how you configure nodecg to allow the authentication to work properly.

First you need to go to the nodecg configuration documentation here:

http://nodecg.com/starter/configuration.html

In the login/twitch object you will see that there are a couple of links, these take you to Twitch to create an application ID, that’s here:

http://www.twitch.tv/kraken/oauth2/clients/new

You have two fields to fill in here, the name is not so important you can choose something meaningful to you rather than anyone else but the Redirect URL is very important in the nodecg case. With nodecg in it’s default configuration of running on port 9090 you need to set the redirect url to:

http://localhost:9090/login/auth/twitch

This is extremely important as the Twitch Auth will fail if you don’t make this change.

Once you’ve created your application and been given the client secret you can go back and edit your nodecg\cfg\nodecg.json so it looks like this (excuse the poor formatting WordPress blows sometimes):

{
"login": {
    "enabled": true,
    "sessionSecret": "supersecret",
    "twitch": {
        "enabled": true,
        "clientID": "CLIENT ID HERE",
        "clientSecret": "CLIENT SECRET HERE",
        "scope": "user_read",
        "allowedUsernames": [
            "unshapedadrian"
            ]
        }
    }
}

You need to restart nodecg for this to take effect and you shouldn’t see any problems during startup unless you have made an error in the config syntax. What does change is that when you go to the dashboard, http://localhost/9090, you will be prompted to login to Twitch. Click the login button and follow the usual steps to Authorize your application to access your Twitch details.

If you need to find the details of your application or edit the redirect url for an application that you already created you’ll find them under your Twitch Settings, Connections, scroll to the bottom past all the social media to see the list of your own applications under the Developer Applications section. Bear in mind that you can’t retrieve your client secret so if you don’t make a note of it you will need to recreate it and update any application code that needs the client secret including nodecg.

Nodecg Github is here.

lfg-twitchapi Github is here.

OK I thought it was done at this point and then I ran into a final problem. Normally to access the content you specify a view as your source in the browser plugin for OBS however with the above configuration you just get an “Authorization Error” instead. I found that once you have Twitch Auth. (I guess any Auth.) set up you have to provide a key for each view. You can find the key in the dashboard and it’s added to the url when you click on the link in the dashboard. Here’s a nice picture which should show you what I mean:

The format of the url is usually something like this:  http://localhost:9090/view/unshaped-notify but you need to add ?key= followed by the key which you can get by clicking the top box highlighted in the image. The link in the bottom highlight will actually take you to browse the url in your browser and this will have the correct syntax as well.