Connecting Twitch API to React JS Application

Just a fair warning, I have only done this once, but I believe this may be valuable to those who are having difficulties. This is basically written for future me, once I forget what I learned. Hi.

Axios is your friend. I would recommend installing Axios.

npm i axios

Once you have Axios installed, go ahead and make sure you have your Twitch developer page pulled up. If you do not have an account setup, you can use your normal Twitch account (and follow perezident14 while you’re at it). To sign in and setup your Twitch developer profile, go to https://dev.twitch.tv.

From there, go to your console > applications > register your application. Once you are there, fill out the form to fit your application needs. If you are just testing it out locally, the OAuth redirect link should point to http://localhost. There should also be a Client ID number below, save that.

Going back into our application, it would be helpful to create an ‘api.js’ file. You can put this in your src folder (or wherever makes sense to you, it doesn’t matter too much). Build out the file to look like this:

import axios from 'axios'
let api = axios.create({
  headers: {
    'Client-ID': 'YOUR_CLIENT_ID',
  }
})
export default api

You’re going to want to replace ‘YOUR_CLIENT_ID’ with… your Client ID. The setup is done for many features, but to ensure we can access even more information from the API, let’s take it a step further. To do this, we are going to want to grab an Authorization code, which is slightly more tricky.

LET ME ITERATE THIS ONE MORE TIME, I have only done this once and hardly know what I am doing. I believe this is fine for personal projects that you are testing locally, but for more professional settings, I know there is a better way to do this.

To grab our authorization code, I console.logged a post request in a random page I had in my project… like this:

import React, { useEffect } from 'react'
import axios from 'axios'
function Live() {
  useEffect(() => {
    const fetchData = async () => {
      await axios.post('https://id.twitch.tv/oauth2/token?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&grant_type=client_credentials')
      .then(response => console.log(response.data))
    }
    fetchData()
  })
}
export default Live

With this code, you will want to replace YOUR_CLIENT_ID with your Client ID again, but you will also want to replace YOUR_CLIENT_SECRET with your Client Secret that can be found on your Twitch developer application page. Underneath where you found your Client ID, there will be a button that says New Secret and it will generate a code for you to use. Once you run this function on your page, you will be hit with information in your console that has an ‘access token’ and ‘token type’ which you will want to keep handy.

With this new information, go back to your api.js file in your project and change your code to look like this:

import axios from 'axios'
let api = axios.create({
  headers: {
    'Client-ID' : 'YOUR_CLIENT_ID',
    'Authorization' : 'Bearer YOUR_ACCESS_TOKEN'
  }
})
export default api

From here, you’re basically good to go. Here’s an easy example to follow:

import React, { Component } from 'react'
import api from './api'
class App extends Component {
  state = {
    teamName: '',
    streamers: [],
  }
  componentDidMount() {
    const fetchData = async () => {
      const result = await api.get('https://api.twitch.tv/helix/teams?name=astro')
      this.setState({
        teamName: result.data.data[0].team_display_name,
        streamers: result.data.data[0].users
      })
    }
    fetchData()
  }
}
export default App

This example just covers what you need to know as far as the API is concerned, you’d probably want to render() something.

THAT’S IT. If you have any questions about this or anything else in React JS, feel free to reach out to me on Twitter (https://twitter.com/perezident14)