Video Chat app using Gatsby and twilio-5

Photo by Safar Safarov on Unsplash

Welcome to part-5 of the series. You can find part-4 here.

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

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

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

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

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

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

Error

It will show us the real error.

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

After logging again, we are getting the same error. So, on going through the youtube video which i am following, we need to use the function as in the twillio docs link.

twilio docs

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

twilio docs

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

JWT Back

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

Valid JWT

This completes part-5 of the series. You can find part-6 here.

You can also find the code for this project in this github link.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building a simple event notifier via Telegram with NodeJS

Conquering Frontend Mentor — Challenge-8

Creating Firefox browser extensions-18

DOM Crash Course for Beginners -2

Decorators FTW with Required Fields in Redux Form

How to create a mock-up real-time chart application using CanvasJS

JavaScript: Dangerous ‘in’ keyword

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Application Framework

Object Capture API Basics

ReactJS Tutorial Part #4 ~ ReactJS Components

Chat App using WhatsApp web UI and React JS