How to Use Firebase Authentication in React Native

To use Firebase Authentication in React Native, first install @react-native-firebase/app and @react-native-firebase/auth. Then initialize Firebase and call auth methods like signInWithEmailAndPassword or createUserWithEmailAndPassword to handle user login and registration.

Syntax

Firebase Authentication in React Native uses the @react-native-firebase/auth module. You import auth from it and call methods to sign in, sign up, or sign out users.

Key methods include:

• auth().createUserWithEmailAndPassword(email, password) - to register a new user
• auth().signInWithEmailAndPassword(email, password) - to log in an existing user
• auth().signOut() - to log out the current user

javascript

import auth from '@react-native-firebase/auth';

// Register user
await auth().createUserWithEmailAndPassword(email, password);

// Login user
await auth().signInWithEmailAndPassword(email, password);

// Logout user
await auth().signOut();

Example

This example shows a simple React Native component that lets a user sign up with email and password using Firebase Authentication.

javascript

import React, {useState} from 'react';
import {View, TextInput, Button, Text} from 'react-native';
import auth from '@react-native-firebase/auth';

export default function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleSignup = async () => {
    try {
      await auth().createUserWithEmailAndPassword(email, password);
      setMessage('User registered successfully!');
    } catch (error) {
      setMessage(error.message);
    }
  };

  return (
    <View style={{padding: 20}}>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        style={{borderWidth: 1, marginBottom: 10, padding: 8}}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{borderWidth: 1, marginBottom: 10, padding: 8}}
      />
      <Button title="Sign Up" onPress={handleSignup} />
      {message ? <Text style={{marginTop: 10}}>{message}</Text> : null}
    </View>
  );
}

Output

A screen with email and password input fields, a 'Sign Up' button, and a message area showing success or error messages after pressing the button.

Common Pitfalls

• Not installing or linking @react-native-firebase/auth properly causes runtime errors.
• Forgetting to enable Email/Password sign-in in the Firebase Console will block authentication.
• Not handling errors from auth methods leads to app crashes or silent failures.
• Using plain text passwords without secureTextEntry on inputs risks user privacy.

javascript

/* Wrong: No error handling and no secure text entry */
<TextInput placeholder="Password" value={password} onChangeText={setPassword} />

/* Right: Add error handling and secure text entry */
<TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />

try {
  await auth().signInWithEmailAndPassword(email, password);
} catch (error) {
  console.error(error.message);
}

Quick Reference

Here is a quick summary of common Firebase Auth methods in React Native:

Method	Description
auth().createUserWithEmailAndPassword(email, password)	Register a new user with email and password
auth().signInWithEmailAndPassword(email, password)	Sign in an existing user
auth().signOut()	Sign out the current user
auth().currentUser	Get the currently signed-in user
auth().onAuthStateChanged(callback)	Listen for user sign-in state changes

Key Takeaways

Install and import @react-native-firebase/auth to use Firebase Authentication in React Native.

Use createUserWithEmailAndPassword and signInWithEmailAndPassword for user registration and login.

Always enable Email/Password sign-in in Firebase Console before using it in your app.

Handle errors from auth methods to provide feedback and avoid crashes.

Use secureTextEntry on password inputs to protect user privacy.