How to use Nexmo verify API and Message API in React native

In this tutorial, we are going to implement the verification process in our React Native application. For the verification process, we are going to use Nexmo to verify API and message API with React Native. Nexmo is a platform that provides full-service verification service. They help to deploy a scalable verification solution without compromising the user experience. this tutorial inspired by React Native Social Chat App Template

Currently, the user can register and use the app instantly. Now, we are going to add a verification page after the user successfully registers. First, we are going to create a Nexmp app for verification and message API. Then, we are going to create a verification server by using codesandbox. Finally, we will configure these verification APIs and server to our React Native app logic and test the result.

Prepare the Nexmo App

First, we are going to create a Nexmo app and configure it. To create a Nexmo app we need to go to the Nexmo developer dashboard and log in. If we don’t have an account then we need to register into the Nexmo platform which is pretty easy. We can see the Nexmo login interface below through which we can register as well as log in.

After successful registration and login into the Nexmo platform, we will be redirected to Nexmo dashboard as shown in the screenshot below:

In the drawer menu of the dashboard, we can see the “Messages and Dispatch” option which can be collapsed into the additional sub-menu options.

Among the options, we need to click on ‘Create an application’ option in order to create a Nexmo app. Then, we need to provide an application name i.e. ‘nexmo test app’ here. After that, we can see the ‘Generate public/private key pair’ button at the bottom in the screenshot below. We need to click on it to generate a key that provides us with a private key in order to use it for connecting to the Nexmo server. Then, we need to save that private key into our local directory in order to use later while creating our server. The key file here is named as jwtRS256.key.

Configurations of Nexmo app

Now, we need to fill webhook URL to receive status from Nexmo server as shown in the screenshot below:

Next, we need to click on ‘Create application’ on the bottom right-hand side which will provide us with a Nexmo app named ‘nexmo test app’ as shown in the code snippet below:

As we can see in the screenshot above, we have successfully created the Nexmo app with all the required configurations. Now, we create the server in codesandbox which handles the verification messages API with the key that we generated.

Creating a Server

For verification purposes, we need to create a server that handles the sending and checking of the OTP code. In this tutorial, we are going to demonstrate the implementation of the server by using codesandbox.

First, we need to go to codesandboxwhich is an online editor or IDE for coding and creating demos. Here, we need to login to the codesandbox account using our GitHub account. Then, we need to go to our dashboard and create a sandbox by clicking on ‘Create Sandbox’ which opens up a dialog as shown in the screenshot below:

From the dialog shown in the above screenshot, choose ‘Node’ as configuration. Then, it will load the template for Node.js server with all the files already configured as shown in the editor screenshot below:

Setting up Dependencies

Now, we can see that there is a ‘Dependencies’ dropdown option on the left-hand side menu. It has a option to add the required dependencies to our Node project. So, we need to click on ‘Add Dependency’ button in the Dependencies dropdown which will open up a dialog with a number of dependencies list as shown in the screenshot below:

On the dependences dialog shown above, there is an input field at the top to search for the required dependencies. So, we just need to type the name of the dependency that is required, which will appear in the list below the input and then click on the dependency to install them into our project. The list of packages or dependencies to search and install are given in the screenshot below:

Remember to install all the packages shown in the above screenshot.

Next, we need to add the private key that we generated in our Nexmo app and downloaded to our local directory as jwtRS256.keyinto our Node project as shown in the screenshot below:

To add the key file, we just need to click on the ‘file’ icon option in the ‘src’ file header options, navigate to the directory where we downloaded the key and then, double-click on the key file to add.

Now, its time to do some coding.

Imports and Configurations

First, we are going to import and initialize all the dependencies as shown in the code snippet below:

const express = require("express"); 
var bodyParser = require("body-parser"); 
const app = express(); 
const Nexmo = require("nexmo"); 
const cors = require("cors"); 
const path = require("path");

Read More...

The post How to use Nexmo verify API and Message API in React native appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.