Implementing Firebase Multi-Factor Authentication in React Native CLI

Modern mobile applications often deal with sensitive user data such as personal information, financial details, or medical records. Relying only on a password for authentication is no longer sufficient to protect user accounts. This is where Multi-Factor Authentication (MFA) becomes essential.

In this article, we’ll explore how to implement Firebase Multi-Factor Authentication with SMS OTP in a React Native CLI application. We will also discuss the security benefits and the authentication flow used in real-world applications.

The Problem with Password-Only Authentication

Traditionally, many applications rely on a simple authentication flow:

User enters email + password

↓

Server validates credentials

↓

User logs into the application

While this approach is simple, it has significant security risks. Passwords can be leaked through phishing attacks, reused across multiple services, or exposed in data breaches.

Multi-Factor Authentication addresses this issue by requiring two or more verification factors before granting access to the user.

For example:

First Factor → Something the user knows (Password)

Second Factor → Something the user has (Phone OTP)

Even if a password is compromised, an attacker still cannot access the account without the second factor.

What is Firebase Multi-Factor Authentication?

Firebase Authentication provides built-in support for Multi-Factor Authentication using SMS verification codes.

When MFA is enabled:

1. The user signs in with a primary authentication method such as Email/Password or Google Sign-In.
2. Firebase sends an OTP (One-Time Password) to the user’s phone number.
3. The user enters the OTP to complete authentication.

This additional verification layer significantly improves application security.

Project Setup

Before implementing MFA in a React Native CLI project, a few prerequisites must be configured.

1. Create a Firebase Project

Go to the Firebase Console and create a new project. Then add your Android and iOS apps to the project.

Download the configuration files:

google-services.json

GoogleService-Info.plist

2. Enable Authentication Providers

In Firebase Console:

Authentication

→ Sign-in method

Enable the following providers:

• Email / Password
• Google Sign-In
• SMS Multi-Factor Authentication

Firebase requires at least one primary authentication provider before enabling MFA.

3. Install Required Libraries

In a React Native CLI project, install Firebase packages:

yarn add @react-native-firebase/app

yarn add @react-native-firebase/auth

These libraries allow React Native applications to interact with Firebase authentication services.

Authentication Flow Design

For this implementation, the following authentication architecture was designed:

New User Flow

Sign Up (Email / Google)

↓

Email Verification

↓

Set Up MFA (Enter Phone Number)

↓

Receive OTP

↓

Verify OTP

↓

Account Ready

Returning User Flow

Login (Email / Google)

↓

MFA Required

↓

Receive OTP

↓

Enter OTP

↓

Login Successful

This ensures all users must complete MFA before accessing the application.

Implementing MFA Enrollment

When a new user registers, the app must enroll a second factor (phone number).

First, obtain the multi-factor user session:

import {

PhoneAuthProvider,

PhoneMultiFactorGenerator,

getAuth,

multiFactor

} from ‘@react-native-firebase/auth’;

const multiFactorUser = await multiFactor(getAuth().currentUser);

const session = await multiFactorUser.getSession();

Next, send a verification code to the user’s phone number.

const verificationId = await new PhoneAuthProvider(getAuth())

.verifyPhoneNumber({ phoneNumber, session });

Finally, verify the OTP and enroll the second factor.

const credential = PhoneAuthProvider.credential(

verificationId,

verificationCode

);

const multiFactorAssertion =

PhoneMultiFactorGenerator.assertion(credential);

await multiFactorUser.enroll(multiFactorAssertion);

This links the user’s phone number as the second authentication factor.

Handling MFA During Login

When an existing user with MFA enabled tries to log in, Firebase throws a special error indicating that additional verification is required.

Example login attempt:

signInWithEmailAndPassword(auth, email, password)

If MFA is required, Firebase returns:

auth/multi-factor-auth-required

Using the resolver provided by Firebase, we can send the OTP to the registered phone number and verify it.

const resolver = getMultiFactorResolver(auth, error);

const verificationId =

await auth.verifyPhoneNumberWithMultiFactorInfo(

resolver.hints[0],

resolver.session

);

Once the user enters the OTP, the authentication process is completed.

Key Security Benefits

Implementing MFA in mobile applications provides several advantages:

Stronger Account Protection

Even if passwords are compromised, attackers cannot access the account without the second factor.

Reduced Risk of Credential Theft

Many cyberattacks rely on stolen credentials. MFA adds another layer of verification.

Industry-Standard Security

MFA is widely used in:

• Banking and fintech applications
• Healthcare systems
• Enterprise platforms
• Applications storing sensitive data

Developer Benefits

Using Firebase MFA also improves the development workflow:

• Built-in authentication infrastructure
• SMS OTP delivery handled by Firebase
• Secure verification mechanisms
• Minimal backend configuration

Developers can focus on application features instead of building authentication systems from scratch.