MMM-TwitchStats

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.

Screenshot

❤️‍🔥Features

• 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.

🖥Installation

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
   

📍Twitch Developer App Creation

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.

📍Twitch API setup codes generation

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.

⚙️MagicMirror Configuration

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 
	} 
},

📂File structure

• 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.

Author

Name: Didi La Raye

Twitch Channel: Just_Lady_D

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