Email and Phone Authentication with Firebase
Implement email/password sign-up and sign-in, add phone number authentication with SMS OTP, and listen to the onAuthStateChanged observer to gate navigation.
Firebase Auth Overview
Firebase Authentication provides ready-made sign-in flows for email/password, phone OTP, and social providers like Google and Apple. All authentication methods are accessed through the auth() singleton from @react-native-firebase/auth.
Firebase Auth manages tokens, refreshes them automatically, and persists the user session in native storage. The onAuthStateChanged observer is the single source of truth for authentication state in your app — always drive navigation from this callback rather than from individual sign-in function results.
Listening to Auth State Changes
Register an onAuthStateChanged observer early in your app's lifecycle, typically in the root layout component. It fires once with the current user on mount, and again whenever the user signs in or out.
The observer returns an unsubscribe function — always call it in the useEffect cleanup to prevent memory leaks. The observer's user parameter is null when no one is signed in and a FirebaseAuthTypes.User object when authenticated.
import auth from '@react-native-firebase/auth';
import { useEffect, useState } from 'react';
export function useFirebaseAuth() {
const [user, setUser] = useState(null);
const [initializing, setInitializing] = useState(true);
useEffect(() => {
const unsubscribe = auth().onAuthStateChanged((user) => {
setUser(user);
if (initializing) setInitializing(false);
});
return unsubscribe; // auto-cleanup on unmount
}, []);
return { user, initializing };
}All lessons in this course
- Connecting React Native Firebase to Your Project
- Email and Phone Authentication with Firebase
- Reading and Writing Firestore Documents
- Real-Time Listeners and Offline Persistence