Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Consume a Generated Twilio Token in Gatsby with React Hooks

    Jason LengstorfJason Lengstorf
    gatsbyGatsby
    >=2.15.7

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.