TwilioHackathon - Video Chat app using Gatsby and twilio-5
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-18 07:19:13

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dgkvi4ovmoicb7dc9zje.jpeg)

Welcome to part-5 of the series. We need to do an api call to the twilio endpoint, which contains our function. For this we will install axios first.

So, stop your gatsby develop and install axios by `npm i axios` command.

![npm install](https://cdn-images-1.medium.com/max/2880/1*fYoSDws9uWqfZu5y7zCfKA.png)*npm install*

Don’t forget to restart your development server by re-running `gatsby develop` command.

We will now use axios to send the form data to our twilio endpoint. Open the file **login-form.js** and create a form **onSubmit**. It will call a function **handleSubmit** and use the twilio endpoint url, and the data will be the **name**.

![login-form.js](https://cdn-images-1.medium.com/max/2880/1*zzDc5_NotvkQBs5rvKQ7dg.png)*login-form.js*

Now, the twilio endpoint in the above code we are getting from the function page in twilio.

![function page](https://cdn-images-1.medium.com/max/2880/1*iw6qUQG_HtcSyfbIWpjCrw.png)*function page*

Now, go back to the web-app and open the console. After that give a name and login. We are getting a CORS error and not able to login.

![Login](https://cdn-images-1.medium.com/max/2880/1*6m6ZiuSUgZd7udfEC-8bVA.png)*Login*

Now, there is a very good way to check the actual error from inside of twilio dashboard. Click on the bug icon on the top right side. After that click on **Go to the Debugger** link.

![Dashboard](https://cdn-images-1.medium.com/max/2880/1*UiL3OcaYOcsFbUFg8OWJLw.png)*Dashboard*

We will get the below screen, in which we will get the error. Need to click on the highlighted error in this screen.

![Error](https://cdn-images-1.medium.com/max/2880/1*SCaFXgri0n-ayjLMBXf6oA.png)*Error*

It will show us the real error.

![Real error](https://cdn-images-1.medium.com/max/2880/1*TU-ZTHSQAoMGo1_V-0gXLA.png)*Real error*

After seeing my function again, i realised the 4 lines were not saved from part-3. So, i added those lines again and hit the **Save** button.

![Added lines](https://cdn-images-1.medium.com/max/2880/1*xtdyycOg4QPGYTCWeQrLdQ.png)*Added lines*

After logging again, we are getting the same error. So, on going through the [youtube](https://www.youtube.com/watch?v=K02SnxY6c_0) video which i am following, we need to use the function as in the twillio docs [link](https://www.twilio.com/docs/runtime/functions/faq?code-sample=code-set-multiple-http-headers-in-a-response-5&code-language=Node.js&code-sdk-version=default).

![twilio docs](https://cdn-images-1.medium.com/max/2880/1*PYCdUIIg1TXA5hfds0aDyA.png)*twilio docs*

So, updating our function according to it. Also, don’t forget to hit the **Save** button.

![twilio docs](https://cdn-images-1.medium.com/max/2880/1*F8TIzf8hD7bcPLts5vhKng.png)*twilio docs*

Now, when we submit again we will get the JWT back successfully.

![JWT Back](https://cdn-images-1.medium.com/max/2880/1*IWype7ep_gaG4KYDAgIvcg.png)*JWT Back*

We can also check the validity of it by going to the site [https://jwt.io/](https://jwt.io/) and pasting the returned JWT there. And yes it is valid.

![Valid JWT](https://cdn-images-1.medium.com/max/2878/1*LS4j_zPUy54xvZyeATJypw.png)*Valid JWT*

This completes part-5 of the series. 

You can also find the code for this project in [this](https://github.com/nabendu82/SimpleVideoApp) github link.