Add SMS Verification in a React Native App Using Node.js and Express

Published May 26, 2020 by Corbin Crutchley

blog spotlight banner

Building a mobile app comes with many challenges. React Native can ease many of these challenges when it comes to cross-compatibility support, but obviously, there’s still a significant amount of engineering effort involved in any app. You may want to implement SMS-based two-factor-authentication (2FA) to block upwards of 100% of bot-based account takeovers, or even integrate a “share this app with your friends” marketing tool.

Luckily, Vonage makes integrating features like these into your app a cinch!

What’re We Going To Create?

Our goal for today is to create an app that allows users to “create an account” using their phone number and SMS 2FA. Additionally, once the user is “Signed in,” we’ll allow them to select a contact from their contacts list and have an invite to use the app sent to their phone via SMS.

To enable this functionality, we’re going to be using React Native for the UI and a Node/Express server on the backend.

To keep this article focused, we’re going to start with a UI that’s been pre-built. This React Native app is not connected to any server but does have its UI laid out with mock data. The app in this state is relatively small (~300 LOC), and is entirely open-sourced.

A demo of the React Native app with mocked data and no server connectivity

Setup Vonage Account

Now that we have a UI laid out for us, we can start working on the server. To enable the functionalities we’re looking for, we’ll be using two of the Vonage APIs today:

Start building with Vonage

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

The Vonage dashboard showing the API secrets

Once we have these values, let’s store them in a .env file:

Don’t forget to add the .env file to your .gitignore rules! You don’t want to end up in a scenario where you git commit your API secrets!

We’ll need one more value from the dashboard for our usage: The phone number associated with your Vonage account. You can find this under Numbers > Your numbers.

The numbers tab in the Vonage dashboard with the number area highlighted

Once again, we’ll be storing that value in the same .env file for usage later:

Be sure to exclude any other symbols outside of the numbers themselves. The Nexmo SDK prefers a format-less phone number to be used in code.

Setup Express Server

It’s hard to setup an app’s functionality that requires a back-end without a working server! As such, let’s start with some of the template Express code. Go ahead and create an app.js file and start with the following template:

This code should allow us to use JSON as our request bodies and access them later through req.body. If we sent a POST request to /test with the payload {hello: "Hi there"}, we could access "Hi there" through req.body.hello.

Once we have our initial Express code running, we’ll want to get set up with the Nexmo Node SDK. This package provides all of the functionality we’ll need to integrate with Vonage APIs into our application.

We’ll start by adding the package to our project:

Once that’s configured, we can run the constructor at the top of our file to allow us to use the APIs later:

Request a Verification Code

Let’s start by building the code for requesting and verifying a 2FA SMS code. We’ll begin with the request portion of the code:

As the code comments indicate, when we send a code request to a number, we’re returned a request_id. We need to return that to the client and store it in state. This will allow us to submit the “verification” request once the user receives the request code itself.

That said, once the user makes the request, they have to have a way to verify that, don’t they? We’ll setup that route now:

In a more production-ready application, we’d likely tie this into an authentication system, like Passport. Because of the simplicity of the APIs at play, the integration should be relatively trivial.

Now that we have a “confirmation” that the user’s phone number was verified, we can move forward with the UI.

Call Server from React Native

Because we’ve setup most of the logic in the UI already, our setup on the React Native side is trivial. We’ll be using the fetch API to make calls to the server:

Simply call these methods inside of the React code as you would any other API and voilà!

A demo of the React Native app running with calls to the server

Send an SMS

If you watch the demo until the end, you’ll notice that we were able to pick a contact from our contacts list and send them an invite SMS to use the app!

Luckily, this is as trivial to implement as the verify code. Looking back to Express, adding another route to send texts is easy:

Then, adding the last bit of code to the React Native services.js file is just as easy:

Conclusion

If you’d like to see the completed code sample (of both the Express server and the React Native app), you can find that code hosted on GitHub.

Even though the app has a solid start, maybe we can make the SMS sent to users an interactive SMS Delivery system. If you have any ideas for how to add functionality to the app, feel free to join us in conversation at our Vonage Developer Community Slack.

Finally, be sure you don’t miss future content like this by following the Vonage Developer Twitter account!

Leave a Reply

Your email address will not be published.

Get the latest posts from Nexmo’s next-generation communications blog delivered to your inbox.

By signing up to our communications blog, you accept our privacy policy , which sets out how we use your data and the rights you have in respect of your data. You can opt out of receiving our updates by clicking the unsubscribe link in the email or by emailing us at [email protected].