Phone authentication allows a user to sign in to a mobile app using their phone number. This could be done traditionally by associating a password with a user and storing it when the user first registers with the app.

However, another common pattern to log in a user using their phone number is to send a verification code to their registered mobile number. This verification code is a unique number, and the user is only allowed to sign in when it matches.

In this tutorial, let’s try to create a small login screen using phone number authentication. To quickly and efficiently establish a backend service, let’s use our good old friend Firebase with a React Native app.

Table of Contents

Requirements

Generate a new project

Enable Phone Authentication

Create PhoneAuthScreen component

Add a method to send an OTP

Add OTP confirmation view

Running the app

Conclusion

Requirements/Stack

Node.js >= 10.x.x version installed

version installed watchman

react-native-cli

Active Firebase project

react-native-firebase

Do note that I’m going to use an iOS simulator for this tutorial. So any library (such as react-native-firebase) that needs configuration set up to be platform-specific, please refer to their official docs.

If you aren’t familiar with how to set up a new Firebase project, please follow the instructions under “Create a Firebase Project” from a previous post.

Generate a new project

Create a new React Native app by executing the following command in a terminal window: