Build a Page Layout in Gatsby

Create a React Form in Gatsby

Generate Dynamic Routes in Gatsby with Reach Router

Manage Application State in Gatsby with React Hooks

Generate an Access Token for Users with Twilio Serverless Functions

Consume a Generated Twilio Token in Gatsby with React Hooks

Restrict Access in Gatsby with Protected Routes

Connect Video to a Room with React Hooks in Gatsby

Show Video in Gatsby from Remote Participants with React Hooks

Handle Disconnected Participants with React Hooks and the Twilio API

Build a Video Chat App with Twilio and Gatsby

To use Twilio's services, we'll need credentials. These will be used to authenticate requests to a serverless Twilio function that will generate an access token for each user that allows us to control who joins the chat.

Instructor: [0:01] To do the next step, we actually need to get some Twilio credentials. We're going to head over to twilio.com. We'll sign up for new account.

[0:08] I am going to go ahead and fill out this form. Add in my name, put in an email, and we'll put in a password. Accept those terms and we'll get started.

[0:19] I'm going to head over and verify my email. After clicking the verify email, it's going to ask us to verify a phone number. I do not want to be contacted, so I am just going to verify. It sends us a verification code, which I am going to enter in.

[0:38] Now, I am just going to skip all these and go straight to the console. I click. I do write code. We're going to be using Node. We're going to skip to the dashboard.

[0:52] The first thing we need to do is get an API key that we can use with our severless function. Twilio is going to be powering all of our video. In order to use it, we need to get an API Key.

[1:03] We'll go to settings. Then, API Keys, and we're going to create a new API Key. We'll say Egghead. It's a standard API Key, so we're going to create that.

[1:15] Now, we need to copy this SID and the secret. We're going to use these inside Twilio itself, but for now, we're just going to put these somewhere so that they're easy for us to get.

[1:29] Once we move away from this screen, we're never going to be able to see the secret again. After we have the API Key, we're going to create a serverless function in Twilio. To find that, we're going to go to all products and services, and we're going to scroll on down to runtime and find functions.

[1:47] To make this easier to find, we can click this pin to dock button. Now, if we collapse this, we can see that it's right up here.

[1:53] Let's click into functions. We're going to go into configure. We need to make three changes here. The first, we're going to enable the account, SID, and the off token. We need to be able to access those inside of our function.

[2:07] Second, we need to add an API Key and an API secret. We're going to use the values that we got from our Twilio API Key. We can save those.

[2:22] Then, we're going to head back to manage, and we're going to create a function using the blank template up here. Click create, and we're going to name this function create room token.

[2:37] We'll also give it a path of create room token. We need to copy this because we're going to use it later. We don't need that anymore so we can get rid of it. We'll set this here.

[2:47] We do not need to check for a valid Twilio signature that's if we're using different features of Twilio. We also don't need any events because we're doing something custom here. We can just drop all of this out because we don't need it.

[3:01] The first thing we need to do is get out those environment variables that we set before. Let's grab out the account SID, the API key and the API secret from process.end. We also are going to get out access token and this is going to come out of the Twilio global.

[3:22] Twilio because we're using their functions is going to give us access to a couple globals one of which is this Twilio object. That has a whole bunch of helpers on it. We're specifically going to use the JSON Web Token or JWT and the access token to help like factory.

[3:40] What this will do is allow us to generate an access token. We also need to set the video grant. We'll do that using the access token video grant factory. We start by just initializing that grant with new video grant and then we're going to get a new token using new access token.

[4:05] We need to pass in the account said the API key and the API secret as arguments. Then, we're going to set the token identity to the event identity. This is going to be passed in by the call to the function so we'll actually receive this is an argument. This is going to be the user's identity, what they want to go by.

[4:30] Then we need to add that grant and the grant is just a way for us to say, "Is this person, is this token allowed to use the video functionality?" We're saying, "Yes."

[4:41] Next we need to set up a response. Our response is going to be a new Twilio.response. That's just some convenience methods for returning a valid response object.

[4:53] Because we want this to be available from any domain, we're going to enable cross origin requests so we need to set up some headers for that. We'll use response.set headers and set access control allow origin and we'll allow any origin.

[5:13] We will also and copy and paste a little bit of this. We will allow methods, the only method we want to allow is post. We need to allow only the content type header.

[5:29] Finally, we're going to set the Content-Type, and we'll set it to application/json. Then, we need to send back the body. The response is just going to be our token.

[5:41] We need to convert that to a JWT, so a JSON Web Token. We'll look at what that looks like in just a minute here.

[5:49] Our last step here is to actually send a response. To do that, we'll use this callback function that comes in from our serverless handler. The first argument is an error.

[6:00] We didn't get an error, so we're going to pass NULL. The second argument is the actual response. This is a pretty standard pattern for sending callbacks.

[6:08] Once we've got this set, we can hit save. We'll see that it's deploying, and now it's successfully updated.

Course

Build a Video Chat App with Twilio and Gatsby

Generate an Access Token for Users with Twilio Serverless Functions

Share this video with your friends