Consume a Generated Twilio Token in Gatsby with React Hooks

InstructorJason Lengstorf

Gatsby>=2.15.7

Share this video with your friends

Send Tweet

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.

Kofi Ocran

~ 5 years ago

~ 4 years ago

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?

Jason Lengstorf(instructor)

~ 4 years ago

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!

~ 4 years ago

It was actually just a simple capitalization error. Thanks!