Set Up Firebase Phone Authentication in Expo (SDK 37) without Ejecting

I am so excited about a lot of things for the release of SDK 37. One of which is that Expo made it fairly easy to implement Firebase Phone Number Authentication. We just have to set up a few things first before we can actually use phone authentication in our projects.

Photo by Dan Nelson on Unsplash

Prerequisites

1. An Expo managed workflow project. If you don’t have one, follow the instructions here.
2. A Firebase project. If you don’t have one, just go to your Firebase Console and set it up. Make sure to register a Firebase web app.

Install Dependencies

We need to install the dependencies identified below to make our authentication work:

$ expo install expo-firebase-recaptcha react-native-webview firebase

By installing the expo-firebase-recaptcha dependency, we now have the components for creating the reCAPTCHA verifier to be used for our phone authentication workflow.

NOTE: expo-firebase-recaptcha requires react-native-webview to be installed as well. This is because the reCAPTCHA verifier will be shown inside a WebView modal.

Getting Started

Firebase Settings

First things first make sure that the Phone sign-in method is enabled.

Enabled Phone Sign-In Method

Let’s grab a copy of our Firebase configuration inside our console from one of our Firebase web apps. Just replace the XXXXXX values with your own configuration values.

Create a file firebase.js from within our project and import our Firebase dependency

import * as firebase from 'firebase';
import '@firebase/auth';
const firebaseConfig = {
    apiKey: "AIzaXXXXXX",
    authDomain: "expo-firebase-phone-auth-XXXXXXX.firebaseapp.com",
    databaseURL: "https://expo-firebase-phone-auth-XXXXXXX.firebaseio.com",
    projectId: "expo-firebase-phone-auth-XXXXXXX",
    storageBucket: "expo-firebase-phone-auth-XXXXXXX.appspot.com",
    messagingSenderId: "XXXXXX",
    appId: "1:XXXXXXX:web:a1XXXXXXX",
    measurementId: "G-XXXXXXX"
};
firebase.initializeApp(firebaseConfig);
export default firebase;

Optional: You can save this configuration inside your app.json file as an extra field. If you do this approach, make sure to install expo-constants dependency to access these values at runtime.

App Set-Up

For the purpose of this article, let’s just play around a single screen application. The gists below are from a single source file but are broken down into different sections for simplicity and ease.

This app will have two input boxes: (1) for the phone number; and (2) for the verification code. Each with designated buttons that will execute our verification process.

Input forms for both phone number and verification code

We’ll also add the reCAPTCHA modal, which will help us validate if our user is a robot or not.

Add FirebaseRecaptchaVerifierModal in our code

Let’s now implement the sendVerification and confirmCode functions.

Implementing the sending of verification code and confirmation of verification code

That’s it! We’re now ready to test our application.

Seeing it in Action

Let’s add our mobile number in the first input field. Let’s also add the country code so that we can definitely receive the SMS. Press the Send Verification button.

Optional: There’s also an option in firebase that we can add test numbers to avoid sending spam messages to the correct number.

Our application screen

After pressing the Send Verification button, in a few seconds, we will receive an SMS from “Phone Code” containing a 6-digit code. We’ll copy that code and add that into our second input field, which is the verification code field. After putting the verification code, press the Send Confirmation button.

A sample SMS message with a verification code

Once done, inside our Firebase console, we will be able to see a newly added user (phone number) into our Users tab.

Newly added user

Congratulations! We were able to implement Firebase phone authentication into our managed Expo project.

Conclusion

Phone authentication is one of the many ways we can verify our users. Implemented properly, it’s also one of the secure ways to validate if our users are not robots. With the release of Expo’s SDK 37, they made it very easy to implement this method of authenticating our users without ejecting.

I’m such a fan of Expo and React Native.

If you wish to take a look at an example, I prepared a small project and you can access it here: https://github.com/arjayosma/expo-firebase-phone-authentication

If you liked this article and wish to receive more articles like this, read my blog at https://arjayosma.com or follow me here and on Twitter.

Thank you and I hope you enjoyed the article! Let me know your thoughts on how we can enhance this further.

You may wish to discuss different tech and business stuff, drop an email to arjay.osma@gmail.com.