A powerful MagicMirror² module that displays your live Twitch stats in real time. Perfect for streamers who want to monitor their growth on their Magic Mirror during broadcasts.

• Live Status: A red indicator when you're live; otherwise, the status is "OFFLINE."
• Profile Picture: Automatically displays your current Twitch channel logo.
• Extended Stats: Followers, Subscribers (protected data), and live viewer counts.
• Smart Refresh: Refreshes every 5 minutes to stay within Twitch API limits.

1. Navigate to the modules folder:

   cd ~/MagicMirror/modules
   

2. Clone this repo:

   git clone https://github.com/Didi-Tools/MMM-TwitchStats
   

3. Go to the directory just made:

   cd MMM-TwitchStats
   

4. Install the required library:

   npm install node-fetch@2
   

Follow these important steps to obtain your personal Client ID and Client Secret:

1 Log in: Go to the Twitch Developer Console and log in with your Twitch account.

2 Register App: Click the + Register Your Application button.

3 Enter Information:

• Name: Choose a unique name, for example, MyMagicMirrorStats_[YourName].
• OAuth Redirect URLs: Enter http://localhost. (We won't be using this directly for a website, but Twitch requires this field to be filled in.)
• Category: Choose Application Integration or Other.
• Client Type: Choose Confidential.

4 Save: Click on Create.

5 Get Credentials:

• You'll now see your new app in the list. Click Manage.
• Here you'll see the Client ID. Copy it and save it.
• Click the New Secret button. A long string of letters and numbers (the Client Secret) will appear. Note: Copy the Secret immediately and save it securely. Once you leave the page, you won't be able to see it anymore, and you'll need to create a new one.

Because your MagicMirror doesn't have a browser to click "Login," we'll use the Authorization Code Grant method.

Step 1: Add permissions in the Twitch Console

1. Return to your Twitch Dev Console.
2. Click Manage for your app.
3. Make sure the OAuth Redirect URL is exactly this: http://localhost
4. Save this.

Step 2: Generate the Code (Manual, One-Time)

You now need to tell Twitch that your app can see your subscriber data. Copy the URL below into your browser on your computer, but replace YOUR_CLIENT_ID with your own Client-ID:

https://id.twitch.tv/oauth2/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost&response_type=code&scope=channel:read:subscriptions

• You'll see a Twitch screen: "Give [Your app name] permission." Click on Allow.
• Your browser will be redirected to a blank page (because nothing is running on localhost), but look at the URL bar.
• There will be something like: http://localhost/?code=THIS_IS_THE_CODE&scope=...
• Copy the text after code= (usually a long string of letters and numbers). Note: This code is only valid for a short time!

Step 3: Exchange the Code for a Refresh Token

Now we need to convert this temporary code into a "perpetual" key. Open your terminal on the Raspberry Pi and paste this command (replacing the three fields between the parentheses):

curl -X POST https://id.twitch.tv/oauth2/token \ 
-H "Content-Type: application/x-www-form-urlencoded" \ 
-d "client_id=YOUR_CLIENT_ID" \ 
-d "client_secret=YOUR_CLIENT_SECRET" \ 
-d "code=THE_CODE_FROM_THE_URL" \ 
-d "grant_type=authorization_code" \ 
-d "redirect_uri=http://localhost"

You'll now receive a JSON response. Look for the refresh_token. This is the "Golden Key" we'll use in the code. Save this code because we need it in the config.js settings for your MagicMirror.

Add the following code to the modules section in ~/MagicMirror/config/config.js:

{ 
	module: "MMM-TwitchStats", 
	position: "top_right", 
	config: { 
		userName: "YOUR_TWITCH_NAME", 
		clientId: "YOUR_CLIENT_ID", 
		clientSecret: "YOUR_CLIENT_SECRET", 
		refreshToken: "YOUR_REFRESH_TOKEN", 
		updateInterval: 300000 // Elke 5 minuten 
	} 
},

• MMM-TwitchStats.js - The display logic.
• MMM-TwitchStats.css - Stylesheet
• node_helper.js - The backend that refreshes the API tokens and retrieves data.
• README.md - This manual.

Created with 💜 for the MagicMirror community.

Name: Didi La Raye

Twitch Channel: Just_Lady_D

Ko-Fi Website: https://ko-fi.com/just_lady_d