Authentication is one of those things you can’t afford to get wrong in a mobile app. It decides who gets in, what they can access, and how secure their experience is. I’ve worked on apps where skipping proper auth flow early led to issues later—broken sessions, exposed data, even user frustration.
Firebase makes this easier. It takes care of most of the backend work so you can focus on building the actual app. In this post, I’ll walk you through how to set up user authentication in a React Native app using Firebase. It includes email and password login, phone verification, social sign-in, and a few ways to lock things down a bit more.
If you’re building an app that needs login, this should help you get started with a clean and secure setup.
Why Firebase for Authentication?
Firebase handles the hard parts of authentication so you don’t have to build everything from scratch. It supports common login methods like email, phone number, Google, and Apple. The setup is straightforward, and the SDKs are reliable on both iOS and Android.
For React Native, there’s a dedicated Firebase library that works with native modules. You don’t need to write platform-specific code to manage login, sessions, or token handling. The integration is smooth and doesn't add much overhead to the project. That’s partly because of how flexible core React Native features are when working with native modules like Firebase.
Firebase also takes care of user session management, password resets, and security rules. It’s easier to get something solid in place early without needing to spin up your own auth server or manage token logic manually.
If you’re working on a project that needs login, Firebase can help you get a secure flow running quickly while still giving you control over how things work.
Prerequisites
This setup uses React Native CLI, not Expo, since native Firebase modules work best in that environment. If you're still setting up your project environment, these React Native development tools might help keep things organized.
Make sure Firebase is already added to your project. You’ll need @react-native-firebase/app and @react-native-firebase/auth installed and linked.
npm install @react-native-firebase/app
npm install @react-native-firebase/auth
If you're using iOS, run npx pod-install. For Android, just rebuild the project. You should also have the config files (google-services.json and GoogleService-Info.plist) already in place. Use environment variables to keep these credentials out of your codebase.
That’s all you need before jumping into the implementation.
Step-by-Step: Setting Up Firebase Authentication
Let's start with email and password login. This is usually the easiest way to get authentication working before adding anything like phone or social login.
First, make sure email and password sign-in is enabled in the Firebase console. You'll find it under the Authentication section in the Sign-in methods tab.
Now you can start writing the logic.
Setting up signup and login
Import the Firebase auth module:
import auth from '@react-native-firebase/auth';
To create a new user:
auth()
.createUserWithEmailAndPassword(email, password)
.then(userCredential => {
// user account created
const user = userCredential.user;
})
.catch(error => {
// handle error
});
For login:
auth()
.signInWithEmailAndPassword(email, password)
.then(userCredential => {
// user signed in
})
.catch(error => {
// handle error
});
Handling sign out
To log out a user:
auth().signOut();
Managing auth state
To track whether a user is signed in or not, use this observer:
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
if (user) {
// user is logged in
} else {
// user is logged out
}
});
return unsubscribe;
}, []);
This runs once when the app starts and again whenever the login state changes.
Implementing Phone Number Authentication with Firebase
Phone number sign-n works a bit differently from email login. It involves two steps: sending a verification code to the user's phone and confirming that code to complete the login.
Before using it, make sure phone authentication is enabled in the Firebase console. You'll find it under the same sign-in methods section where email login was.
Step 1: Send the verification code
Start by asking the user for their phone number. Then call the signInWithPhoneNumber method.
import auth from '@react-native-firebase/auth';
auth()
.signInWithPhoneNumber('+919999999999')
.then(confirmResult => {
// save confirmResult and ask user for the OTP
})
.catch(error => {
// handle error
});
This sends the code to the phone number. The confirmResult object will be used to verify the code in the next step.
Step 2: Confirm the code
Once the user enters the code they received, call the confirm method.
confirmResult
.confirm(code)
.then(userCredential => {
// user is signed in
})
.catch(error => {
// invalid code or expired session
});
If the code is valid, the user is signed in and Firebase will treat it like any other login session.
Things to watch out for
Firebase automatically handles sending and verifying OTPs, but you need to make sure the same confirmResult object is available when the user enters the code
Rate limits apply, so don’t trigger OTP requests repeatedly without user action
For iOS, phone auth will not work on a real device unless the app is set up with a valid APN key
Securing Your Firebase Authentication Flow
Getting users logged in is one part of the job. Making sure that access stays limited, safe, and abuse-resistant is the next step. Firebase handles some of this under the hood, but there are a few things you should set up on your side.
1. Use App Check to Block Unauthorized Access
Firebase App Check helps you make sure that only your app is talking to your backend. It adds a safety layer that prevents third-party scripts or modified apps from calling your Firebase services.
To enable it, go to App Check in the Firebase console and turn it on for the services you’re using like Firestore, Storage, and Functions.
If you’re using React Native, App Check requires some native setup. For Android, you can use Play Integrity or SafetyNet. For iOS, use DeviceCheck. Once it’s in place, Firebase will block requests from apps that don’t pass the check.
2. Lock Down Access with Firebase Security Rules
Authentication is only the first step. After that, you still need to make sure users can only access the data they’re allowed to see or write.
Here’s a simple Firestore rule that lets only the signed-in user access their own document:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}
Without this kind of check, any signed-in user could potentially access other users’ data.
3. Reauthenticate Before Sensitive Actions
Some actions, like deleting an account or changing a password, should require the user to confirm their identity again. Firebase allows reauthentication to make sure the request is fresh.
Here’s how you can trigger it:
const credential = auth.EmailAuthProvider.credential(email, password);
auth().currentUser.reauthenticateWithCredential(credential)
.then(() => {
// proceed with sensitive action
});
This helps protect against session hijacking or unintended changes from stale sessions.
4. Let Firebase Handle Tokens, But Know the Basics
Firebase manages access tokens internally. You don’t have to refresh them manually, but it helps to know that each token has a short lifespan and is refreshed behind the scenes.
If you’re working with other APIs or want to verify the user on your backend, you can get the current token like this:
auth().currentUser.getIdToken(true)
.then(token => {
// send token to backend
});
You can then verify that token on your server using Firebase Admin SDK.
Handling Authentication State in React Native
After setting up authentication, you need a way to know whether the user is signed in or not. This helps the app decide what to show on launch, like whether to send someone to the login screen or straight to the home screen.
Firebase gives you a listener that watches the user's authentication state in real time. In React Native, this is usually handled with a hook or some global state.
A simple way is to set up a listener using onAuthStateChanged from Firebase and wrap it inside a context or state manager. That way, your entire app knows if someone is signed in.
Here’s a basic idea of how it works:
The app starts
The listener checks Firebase for the current user
If the user exists, you show the main app
If not, you show the login or signup flow
This avoids unnecessary screens and gives users a smoother experience. It also lets you protect certain routes or screens behind authentication, which is important if your app deals with sensitive or private data.
Let me know if you want to show code snippets here or want to keep going to the next section.
Wrapping Up
Getting Firebase Authentication up and running in a React Native app doesn’t take much. With just a few steps, you get email password login, social sign ins, real time auth state tracking and built in security features that work well across platforms. This makes it a solid choice for projects where you want to move fast without managing everything from scratch.
As your app grows, you’ll likely need to refine the user flows, add proper error handling and maybe manage auth state with context or Redux. But the foundation you just built gives you a good starting point.
If you’re building a React Native app and care about secure, reliable user sign in, Firebase gets the job done.
Top comments (0)