Introduction
User authentication is one of the most important parts of any mobile app. Instead of building it from scratch, developers often use Firebase Authentication — a secure and easy-to-use service provided by Google. It allows you to quickly add login, signup, and logout functionality to your React Native app using email/password, phone numbers, or social logins, such as Google and Facebook.
In this guide, we’ll learn how to integrate Firebase login in a React Native app using simple, step-by-step instructions. You’ll also find clear examples and practical explanations to help you get your login system up and running — whether you’re developing for Android, iOS, or both.
1. What is Firebase Authentication?
Firebase Authentication is a part of Google’s Firebase platform that helps developers manage user identities securely. It supports multiple authentication methods:
Email and Password
Google Sign-In
Facebook, Twitter, GitHub
Phone Number Authentication
Anonymous Login
Using Firebase with React Native makes it simple to handle sign-in, sign-out, password resets, and user sessions — all without building a backend from scratch.
2. Setting Up a Firebase Project
Before integrating Firebase with your React Native app, you need to set up a Firebase project.
✅ Steps to Create a Firebase Project
Go to https://console.firebase.google.com
Click Add project and give it a name (e.g., react-native-login-app).
Disable Google Analytics for now (you can enable it later).
Click Create Project.
Once created, click the Web icon (</>) or Android/iOS icon to register your app.
If you are working with React Native, register both Android and iOS apps (if needed).
3. Adding Firebase to Your React Native App
You can use either Expo or React Native CLI. We’ll focus on the React Native CLI method here.
✅ Install Firebase Packages
Run this command inside your project:
npm install @react-native-firebase/app @react-native-firebase/auth
If you’re using Expo, run:
expo install firebase
✅ Configure Firebase for Android
In the Firebase Console, open your project.
Click the Android icon → Enter your package name (e.g., com.myapp)
Download the google-services.json file.
Place it in your app folder: android/app/google-services.json
Add the following lines to your project files:
android/build.gradle:
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}
android/app/build.gradle:
apply plugin: 'com.google.gms.google-services'
✅ Configure Firebase for iOS
In Firebase, add a new iOS app.
Enter your iOS bundle ID.
Download the GoogleService-Info.plist file.
Open Xcode → drag and drop this file into your app folder.
Install CocoaPods dependencies:
cd ios && pod install && cd ..
Now Firebase is connected to your React Native app.
4. Enabling Authentication in Firebase Console
Before writing code, you need to enable sign-in methods in the Firebase Console.
Go to Firebase Console → Authentication → Sign-in Method.
Enable Email/Password (and other methods if needed).
Save your changes.
That’s it — Firebase is ready to authenticate users.
5. Writing the Login and Signup Code
Now let’s write the logic for user registration and login in React Native.
✅ Example: Signup Function
import auth from '@react-native-firebase/auth';
const signupUser = async (email, password) => {
try {
const userCredential = await auth().createUserWithEmailAndPassword(email, password);
console.log('User account created:', userCredential.user);
} catch (error) {
if (error.code === 'auth/email-already-in-use') {
alert('That email address is already in use!');
} else if (error.code === 'auth/invalid-email') {
alert('That email address is invalid!');
} else {
alert('Something went wrong. Please try again.');
}
}
};
✅ Example: Login Function
import auth from '@react-native-firebase/auth';
const loginUser = async (email, password) => {
try {
const userCredential = await auth().signInWithEmailAndPassword(email, password);
console.log('User logged in:', userCredential.user);
} catch (error) {
if (error.code === 'auth/user-not-found') {
alert('No user found with this email.');
} else if (error.code === 'auth/wrong-password') {
alert('Incorrect password.');
} else {
alert('Login failed. Please try again.');
}
}
};
✅ Example: Logout Function
const logoutUser = async () => {
try {
await auth().signOut();
console.log('User signed out successfully!');
} catch (error) {
console.error('Logout error:', error);
}
};
6. Creating a Simple Login UI
Here’s a basic example of how your login screen might look in React Native:
import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import auth from '@react-native-firebase/auth';
export default function LoginScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = async () => {
try {
await auth().signInWithEmailAndPassword(email, password);
alert('Login successful!');
} catch (error) {
alert('Error: ' + error.message);
}
};
return (
<View style={{ padding: 20 }}>
<Text>Email:</Text>
<TextInput
placeholder="Enter your email"
value={email}
onChangeText={setEmail}
autoCapitalize="none"
style={{ borderWidth: 1, marginBottom: 10, padding: 8 }}
/>
<Text>Password:</Text>
<TextInput
placeholder="Enter your password"
secureTextEntry
value={password}
onChangeText={setPassword}
style={{ borderWidth: 1, marginBottom: 20, padding: 8 }}
/>
<Button title="Login" onPress={handleLogin} />
</View>
);
}
This UI can be customized with libraries like React Native Paper or Native Base for a more polished look.
7. Checking if User Is Logged In
Firebase can remember users even after restarting the app. You can check if a user is logged in with the onAuthStateChanged method:
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged(user => {
if (user) {
console.log('User is logged in:', user.email);
} else {
console.log('User is logged out');
}
});
return unsubscribe; // clean up on unmount
}, []);
This helps manage navigation between screens (e.g., Login → Home) automatically.
8. Adding Google Login (Optional)
You can also integrate Google Sign-In for easier authentication.
✅ Install Dependencies
npm install @react-native-google-signin/google-signin
✅ Configure Google Sign-In
Follow the Firebase guide to set up OAuth client ID for Android and iOS, then link it in your Firebase project.
✅ Use with Firebase
import { GoogleSignin } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';
async function onGoogleButtonPress() {
const { idToken } = await GoogleSignin.signIn();
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
return auth().signInWithCredential(googleCredential);
}
Now users can sign in with their Google account.
9. Handling Errors Gracefully
Firebase provides detailed error codes. Always display clear, user-friendly error messages, for example:
auth/email-already-in-use → “This email is already registered.”
auth/invalid-email → “Please enter a valid email.”
auth/user-not-found → “No account found with this email.”
Handling errors well improves user experience and trust.
10. Security Tips
Never store plain-text passwords locally.
Use Firebase’s built-in password reset function.
Enable Email Verification in Firebase Console.
Keep your Firebase configuration and API keys in environment variables.
Test on both Android and iOS devices.
Summary
Integrating Firebase Authentication in React Native allows you to create a secure and scalable login system easily. You can enable multiple sign-in methods, manage sessions, and enhance security using Firebase’s built-in tools. With just a few lines of code, you can implement user registration, login, and logout.