Consume a Generated Twilio Token in Gatsby with React Hooks
Now that we have a serverless function to generate a Twilio token, we need to use it.
In this lesson, we'll use axios within our custom React hook to request and store a token from the serverless Twilio function. The generated token will be used to protect routes that require authentication within Gatsby.
Instructor: [0:01] Now that we have a serverless function to get a Twilio token, we need to modify our code to get that token. We're going to do that in usedTwilioVideo. We're going to start out by importing Axios, so that we can make a call to that Twilio function.
[0:17] We're also going to set up a constant that has that token URL in it, so that we're able to make that call. We've saved that over here so we can get that out and drop it in right here. Next, we need to make sure that we're able to store that token somewhere, so we're going to add it to our state and then we're going to add a new action.
[0:39] The way that this function works is that we're going to send off the identity to Twilio and we're going to get back a token. We need to store that in state. That also means that in our join action, that means we need to track the token. We're going to pass that in action.token.
[0:57] Next, we need to go down into usedTwilioVideo and add a function that we can use to make the request. This is going to be called getRoomToken and this is an async function. We're going use async/await so that we don't have to do promise wrangling.
[1:12] This is going to be a single argument that will be an object with two properties, identity and roomName. Inside this function, we're going to get the result of making a call to Axios, which we're going to await. We will use the axios.post method to our Twilio token URL. We're going to send along the identity, and we'll send over the roomName as well.
[1:39] We don't strictly speaking need to send the roomName, but in the future, a good enhancement for this app would be to limit the token to only a single room. Once we have the result, we're going to dispatch an action that's going to have a type of join. It will send back the token, which will be the result.data. We're also going to pass along the identity and the roomName so that we can get those in the state.
[2:04] Instead of sending the dispatch itself, we're going to send getRoomToken instead. That means that we need to go and update our join.js. We will do that by getting getRoomToken out of the usedTwilioVideo, instead of dispatch. In handle submit, we're going to refactor it to use getRoomToken instead and we no longer need to send a type because that's handled by the function itself.
[2:30] Once this is done, we can head back out to our app. We can see that the token is now tracked in state. If we make a call to our room, we should get a token back. Click join. Now we can see that we're getting back a token. This token is going to allow us to use the Twilio API.
hey there — the headers have to be set in the Twilio function to allow requests from your domain
check out the response.setHeaders part here: https://github.com/jlengstorf/twilio-gatsby-video-chat#create-a-serverless-function-in-twilio
thanks for watching!
It was actually just a simple capitalization error. Thanks!
On submit, my state isn't changing and the console says: localhost/:1 Access to XMLHttpRequest at 'https://mysite.twil.io/create-room-token' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:178 POST https://mysite.twil.io/create-room-token net::ERR_FAILED. Any ideas what might be causing this?