barrycarlyon / twitch_profile_extension

A simple Twitch Extension to cover the basics of using the JWT and EBS together to get Twitch API information

Whats in this Repo

This Repo provides a simple example of a Twitch Extension.

The Example EBS is written in NodeJS

This Twitch Extension primarilly demonstrates the following

Front End

• Theme Switching based on the Twitch Theme toggle
• Prompting a user to Share their Twitch ID with the Extenion
• Making a call to a EBS and display the result

Back End

A Twitch Extension Back end is also known as an "EBS" or "Extension Backend Service"

• Generating an App Access Token for the EBS to use
• Parsing a JWT Token that was passed up from the front end
• Calling the Twitch API from the EBS

Note: this EBS expects node.js 18 as it utilises fetch built into node.js 18

What this extension/guide/example doesn't do is cover SSL hosting. EITHER FOR TESTING OR YOUR EBS

So without SSL on your frontend/EBS browsers will usually block access on mixed content grounds.

Example Images

Getting Started.

This covers how to get started if you don't already have an extension setup.

If you already do you can just use your existing hosting/test solution and use the existing Extension. And follow from step 12 for the relevant keys/IDs/secrets

1. Visit the Twitch Dev Console to create a new extension. Link
2. Give it a Name, you cannot use "Extension," "Twitch," or "Glitch". Hit Continue
3. Select the Panel checkbox, leave the reset as is. Hit Create
4. Select Capabilities at the top
5. Select Yes, I would like my extension to request an identity link. and Save Changes
6. Select Asset Hosting at the top
7. Change Panel Viewer Path to index.html
8. Change the Panel Height to 500 and Save Changes
9. Top right hit Extension Settings
10. In the ebs folder copy config_sample.json to config.json
11. Change the port as need
12. Copy the clientID from this page, it's at the top, into the "" of client_id in config.json
13. Under Twitch API Client Secret Click on Generate Secret
14. Hit OK
15. Copy the now shown Client Secret into the "" of client_secret in config.json
16. Under "Extension Secrets" on the page hit the "show" button
17. Copy the now shown key (including any = on the end) into the "" of extension_secret in config.json
18. Run by cd to your ebs folder and run the commands
19. npm install
20. node .
21. In extension copy config_sample.js to config.js
22. Change the https://theURLtoMyEBS to the URL of your now running EBS

For easy "what key goes where" see this image.

FINALLY

Install the Extension to your channel and test it.

Notes

These instructions do not cover SSL termination, which is the only gotcha here.

You can use something like NGROK for testing.

You'd need two tunnels, one for your frontend and one for your backend (or if you know what you are doing just the one). And to adjust the Extension Console settings (and config.json's) as needed.

Personally I use NGINX to SSL Terminate, and a reverse SSL tunnel to get traffic from my production server to my local machine.

GOTCHAS

The EBS for this server, generates an App Access Token at Boot, but doesn't test it/renew it. So if you use this code for a production EBS it'll probably stop working after 60 days. The EBS is for short demonstrations of the code flow.

CSP

If you are testing this example in Hosted Test or above, you'll need to add your EBS URL to the CSP fields, specifically the Allowlist for URL Fetching Domains

You can find those at -> Dev Console -> Manage an Extension -> Manage a Version -> Capabilties

See also the Documentation on Content Restrictions