How to Implement Firebase Authentication in React Native Apps

Install Firebase in Your React Native Project

• Ensure you have React Native CLI installed and your environment setup correctly for React Native development.
• Install the necessary Firebase libraries using npm or yarn:

npm install @react-native-firebase/app @react-native-firebase/auth

Configure Firebase for Your App

• Download the `google-services.json` file from the Firebase console and place it in your `android/app` directory.
• Edit the `android/build.gradle` file to add the Google services classpath:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.3' // Add this line
    }
}

• Apply the `google-services` plugin in the `android/app/build.gradle` file:

apply plugin: 'com.google.gms.google-services'

Set Up Firebase Authentication in Your App

• Import Firebase Auth in your React Native components where authentication is needed:

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

• Create functions for user actions such as signing up, signing in, and signing out.
• For example, create a sign-up function using email and password:

function signUp(email, password) {
  auth()
    .createUserWithEmailAndPassword(email, password)
    .then(() => {
      console.log('User account created & signed in!');
    })
    .catch(error => {
      if (error.code === 'auth/email-already-in-use') {
        console.error('That email address is already in use!');
      }

      if (error.code === 'auth/invalid-email') {
        console.error('That email address is invalid!');
      }

      console.error(error);
    });
}

• Implement a sign-in function as follows:

function signIn(email, password) {
  auth()
    .signInWithEmailAndPassword(email, password)
    .then(() => {
      console.log('User signed in!');
    })
    .catch(error => {
      console.error(error);
    });
}

Listen to Authentication State

• It's critical to handle user sign-in state changes in your app, to show them the appropriate content based on their status.
• Set up a listener to the authentication state:

useEffect(() => {
  const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
  return subscriber; // unsubscribe on unmount
}, []);

function onAuthStateChanged(user) {
  setUser(user);
}

Sign Out Users

• Finally, implement a sign-out functionality so users can log out securely:

auth()
  .signOut()
  .then(() => console.log('User signed out!'));

Testing and Error Handling

• Test all authentication functionalities to ensure they work as expected.
• Implement comprehensive error handling to deal with issues like network errors and incorrect credentials gracefully.