Using Twilio for User Verification on Your website - DZone Web Dev

Using Twilio for User Verification on Your website - DZone Web Dev

While I love Twilio for sending text messages as much as the next person, I haven't spent much time digging into the rest of their offerings. And there is so much to explore! Today, I want to look at how to use the Verify API from Twilio to require that a user verifies themselves before moving forward in a process. This can used for 2FA on accounts or verifying purchases from anonymous users.

While I love Twilio for sending text messages as much as the next person, I haven't spent much time digging into the rest of their offerings. And there is so much to explore! Today, I want to look at how to use the Verify API from Twilio to require that a user verifies themselves before moving forward in a process. This can used for 2FA on accounts or verifying purchases from anonymous users.

A breakdown of how this will all work:

  • we need to capture the user's phone number
  • start a verification process with Twilio
  • have the user enter their code
  • retrieve that code and pass it to Twilio's verification check service
  • get the green light and go!

So we need at least 2 UI inputs and 3 calls to Twilio. WAIITT...where did 3 come from, you only outlined 2. Well to make sure a phone number is in the proper format, instead of doing the regex verification on our side, Twilio has a service we can use for that too!

The first thing that you will need is an input field with the phone number. This can be on your sign-up screen, payment details, account settings page, wherever makes sense for your app. Since I'll be using Corvid by Wix, I am just going to drag and drop a Text Input UI element onto my page and give it an ID of "phoneInput". You may also want a button to trigger the Verification process, so feel free to add a button with id "verifyButton".

Once we have our UI elements on our page, we need to add an event to the button click to retrieve the value of the phone number and pass it along to the Twilio Verify service. I am going to do the verification process in the backend of my app so I'll start by importing my backend function from my Twilio file.

JavaScript

1

import { sendVerification } from 'backend/twilio'

Next, in my page onReady event, I will add a new event listener for my button.

JavaScript1

$w('#verifyButton').onClick(async () => {2
})

In my event listener, I will GET the value of the phone number input and assign it to a new variable.

JavaScript

javascript integration npm twilio corvid

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Using Twilio and Corvid: Simple SMS Integration for Your Web App

Texting is a huge trend in e-commerce sites. Using Twilio and Corvid, installing text-messaging features to a website can take less than 10 minutes. Text messaging is the latest trend in e-commerce sites. It enables you to directly talk with your consumer and share new products or shipping updates. Twilio is a great tool that enables us as developers to add text messaging to our apps with minimal headaches. At Corvid by Wix, we're all about increasing dev velocity, so with Twilio's npm module, we can add text messaging to our website in less than 10 minutes.

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

npm and the Future of JavaScript

npm started out as a back-end tool for node.js developers writing server-side applications, but has become the tool of choice for front-end developers writing rich web applications.

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.