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.
Prerequisites
- An Expo managed workflow project. If you don’t have one, follow the instructions here.
- 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.
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.
We’ll also add the reCAPTCHA modal, which will help us validate if our user is a robot or not.
Let’s now implement the sendVerification
and confirmCode
functions.
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.
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.
Once done, inside our Firebase console, we will be able to see a newly added user (phone number) into our Users tab.
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.
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.