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

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

Getting Started

Firebase Settings

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

Enabled Phone Sign-In Method
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;

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.

Input forms for both phone number and verification code
Add FirebaseRecaptchaVerifierModal in our code
Implementing the sending of verification code and confirmation of verification code

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.

Our application screen
A sample SMS message with a verification code
Newly added user

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arjay

Arjay

Software Development. Indie Hacker. Startups. Tech.