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

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

Getting Started

Firebase Settings

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

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

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

Conclusion

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

--

--

--

Software Development. Indie Hacker. Startups. Tech.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

07-ElasticSearch-Logs: Stressing day, stressing week, stressing life

Full Stack React Native Development using GraphCool and Apollo Subscriptions + React Navigation

Surviving the JavaScript Apocalypse

JavaScript

Vue + Django: Using .vue Files and the Vue CLI

Different-colored folders

Vue.js: develop with https

Ready, Set( ), Go! Removing Duplicate Elements from Your JS Array

Too Lazy To Flush — Product Design

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.

More from Medium

Flutter vs Native vs React Native — Which One to Choose?

Implementing a dynamic “Terms & Conditions” page with animation and progress tracking in React…

Flutter vs. React Native in 2022: Detailed Framework Comparison

How to add FB SDK in react-native project