Using Twitch EventSub API to Invoke a Netlify Function

We’re going to combine two services: Netlify and Twitch! When a user goes online, we’re going to invoke a Netlify function. This could really could do anything that we want, but for this example, I will have it just console.log the payload we get from Twitch!

If you want to just see the code, feel free to take a gander at the repo.

Prerequisites

This walkthrough assumes a few things:

You will need both accounts in order for you to launch any functions.

Building the Netlify Function

In our project directory, we’re going to build out a nested folder:

  1. At the root level netlify
  2. And inside of the netlify folder, functions

Now let’s create a file in our netlify/functions folder called log.js.

exports.handler = async (event) => {
  // Everything in here will be invoked when Twitch connects
}

In the Twitch EventSub documentation for step 5, it oulines that before we receive any subscriptions we need to be able to handle the challenge response. This is typically what I write first for my functions:

const VERIFICATION_TYPE = "webhook_callback_verification"
exports.handler = async (event) => {

  const body = JSON.parse(event.body)

  const messageType = event.headers["twitch-eventsub-message-type"];

  if(messageType === VERIFICATION_TYPE) {
    return {
      statusCode: 200,
      body: body.challenge // IMPORTANT, challenge is a key in body
    }
  }
}

You’ll notice with the hightlighted line that we parse out the type of message we receive from Twitch. Things like verification, revoking, or the actual subscription payload will be deteremined with this.

From here, once we’re verified, we will need to be able to handle the notification type which says what ever we’ve been subscribed to is sending us a payload. This is where the magic will mostly happen for us!

const VERIFICATION_TYPE = "webhook_callback_verification"
const NOTIFICATION_TYPE = "notification"
exports.handler = async (event) => {

  const body = JSON.parse(event.body)

  const messageType = event.headers["twitch-eventsub-message-type"];

  if(messageType === VERIFICATION_TYPE) {
    return {
      statusCode: 200,
      body: body.challenge // IMPORTANT, challenge is a key in body
    }
  } else if(messageType === NOTIFICATION_TYPE) {
    const event = body.event
    
    console.log("Twitch activated this webhook! Here's the payload: ", event)

    return {
      statusCode: 200,
      body: "ok"
    }
  }
}

Testing the Function Locally with CLIs

This step is optional but I recommend it since you can save a lot of time without deploying and waiting for each service to be ready! We can setup our netlify functions with the Netlify CLI. In the project root, we run in the Terminal:

netlify dev

This should run the Netlify local server at the default route of http://localhost:8888.

From there we can run the Twitch CLI to test both the verification step and the notification step.

When we want to test our verification of our EventSub:

twitch event verify-subscription -F http://localhost:8888/.netlify/functions/log streamup

The Twitch CLI looks at event and knows we’re mocking something from the EventSub API. In our case we’re mocking the verification step for the stream.online subscription type (though it is called streamup) in the CLI. The -F http://localhost:8888/.netlify/functions/log flag is saying that we are redirecting the API request to the provided URL instead.

This should output to the terminal:

✔ Valid response. Received challenge 9e5ad6d4-e82a-6901-3c08-ce2a7855555b in body
✔ Valid status code. Received status 200

And if we want to test how our Netlify function will actually operate when it receives the notification, we can use the trigger option instead:

twitch event trigger -F http://localhost:8888/.netlify/functions/log streamup

And that should result with a 200:

2000/08/30 20:41:12 [200] Request Sent
# ... A mock JSON response from Twitch

Publish the Netlify Function

Now we’re should be ready to publish our Netlify Function! You can use whatever process works for you but I enjoy using the Netlify CLI because in my terminal I run:

netlify deploy --prod

And then it will give my the live link!

Setting up the Twitch EventSub Subscription

Now with our deployed Netlify Function we can subscribe to the EventSub. Similar to Netlify, you can use the Twitch CLI to make it so much easier!

Make sure you configure your Twitch CLI with an application and request your application token with twitch token.

And then we’ll be able to set up our twitch subscription with:

twitch api post eventsub/subscriptions --body '{
"type": "stream.online",
  "version": "1",                      
  "condition": {                       
      "broadcaster_user_id": "20127229"
  },                      
  "transport": {                                                                          
      "method": "webhook",                                                                
      "callback": "https://mystifying-hamilton-ecdbc9.netlify.app/.netlify/functions/log",
      "secret": "this_is_my_secret_password"                                                    
  }
}'

The things highlighted represent the things you should notice:

If you want to look at more options for what you could subscribe to, take a gander in the Twitch documentation.

And that’s a wrap! If you want to verify if your subscription is all setup:

twitch api get eventsub/subscriptions

And you should see it in the list!