Set Up Firebase Phone Authentication in Expo (SDK 37) without Ejecting
Tags: reactnative, javascript, expo, firebase
Published: 2020-08-03 11:14:53

---
title: Set Up Firebase Phone Authentication in Expo (SDK 37) without Ejecting
published: true
description: 2020-08-03 11:30:00 UTC
tags: reactnative, javascript, expo, firebase
canonical_url: https://medium.com/@arjayosma/set-up-firebase-phone-authentication-in-expo-sdk-37-without-ejecting-8a472460b1cf
cover_image: https://cdn-images-1.medium.com/max/3840/1*c7_amBdTMerg3kHCiEd60A.jpeg
---


# 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](https://unsplash.com/@danny144?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/phone-lock?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)](https://cdn-images-1.medium.com/max/3840/1*c7_amBdTMerg3kHCiEd60A.jpeg)*Photo by [Dan Nelson](https://unsplash.com/@danny144?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/phone-lock?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*

## Prerequisites

1. An Expo managed workflow project. *If you don’t have one, follow the instructions [here](https://expo.io/learn).*

1. A Firebase project. *If you don’t have one, just go to your [Firebase Console](https://firebase.google.com/) 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](https://cdn-images-1.medium.com/max/2000/1*UK_3LIfLp2y0s77_RXhJOw.png)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

```js
    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.

<iframe src="https://medium.com/media/5c7c35b0d45c29b646957ac00aa086b3" frameborder=0></iframe>

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

<iframe src="https://medium.com/media/ee89a0b7457b6574fff04919d0b8b98e" frameborder=0></iframe>

Let’s now implement the sendVerification and confirmCode functions.

<iframe src="https://medium.com/media/66d849560e0110d7c177d30af1469676" frameborder=0></iframe>

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](https://cdn-images-1.medium.com/max/2000/1*3NW8i8Rn86Wlyc5R4zLZZw.jpeg)*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](https://cdn-images-1.medium.com/max/2000/1*aSJG2vUNY5utBsJsGzTIew.jpeg)*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](https://cdn-images-1.medium.com/max/2000/1*rRMbH5dFaRoQm3g6iO2pnA.png)*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.

<iframe src="https://medium.com/media/031b3e32e3170d9b2b40f67c80071833" frameborder=0></iframe>

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](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](https://arjayosma.com) or follow** me here and on [Twitter](https://twitter.com/arjayosma).

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.