How To Integrate Firebase in React Native Apps?

Integrating Firebase into a React Native app can significantly enhance its functionality by adding powerful backend services like authentication, real-time databases, cloud storage, and more. Firebase makes your application better and more efficient to manage and deploy these services, making it easier for developers to focus on building great user experiences.

In this article, we will learn how To Integrate Firebase into React Native Apps.

Prerequisites

• React Native Environment
• Understanding of NPM

These are the following approaches required for integrating Firebase in React native:

Integrate Firebase with Android

Integrating Firebase into your React native application is necessary to secure your website from unauthorized access. You can integrate Firebase with your Android mobile application. You have to create an account with the Google Firebase console to get your Firebase credentials, which will be used in this application. You need to have your React native project and some simple can integrate your application with the Firebase security. To integrate Firebase into React Native apps, you'll need to follow the below steps:

Step 1: Install Node.js

Ensure that you system has NodeJS installed. It is necessary to run the npm commands and create the react-native application.

Step 2: Install React-Native

Use the below command to install the React native in your system.

npm install -g react-native-cli

Step 3: React Native Project

Now create your react-native application with the below command or you can use expo which gives you a integrated template with the react-native.

npx react-native init YourProjectName

Change your directory with below command.

cd YourProjectName

Step 4: Create the Below Files

// App.tsx

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import AuthExample from './AuthExample';

const App: React.FC = () => {
    return (
        <SafeAreaView style={styles.container}>
            <AuthExample />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
});

export default App;

//myApplication/AuthExample.tsx

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import firebase from './firebase';

const AuthExample: React.FC = () => {
    const [email, setEmail] = useState < string > ('');
    const [password, setPassword] = useState < string > ('');

    const handleSignUp = () => {
        firebase.auth().createUserWithEmailAndPassword(email, password)
            .then(user => {
                console.log('User signed up:', user);
            })
            .catch(error => {
                console.error('Error signing up:', error);
            });
    };

    return (
        <View style={styles.container}>
            <TextInput
                placeholder="Email"
                value={email}
                onChangeText={text => setEmail(text)}
                style={styles.input}
                keyboardType="email-address"
                autoCapitalize="none"
            />
            <TextInput
                placeholder="Password"
                value={password}
                onChangeText={text => setPassword(text)}
                secureTextEntry
                style={styles.input}
            />
            <Button title="Sign Up" onPress={handleSignUp} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 16,
    },
    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        marginBottom: 12,
        paddingHorizontal: 8,
    },
});

export default AuthExample;

// myApplication/firebase.ts
import firebase from '@react-native-firebase/app';
import '@react-native-firebase/auth';

import { initializeApp } from "firebase/app";

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}


const app = initializeApp(firebaseConfig);

export default firebase;

Step 5: Install the Dependencies

Install the required dependencies to run the firebase. Below is the command you have to use it one by one.

npm install @react-native-firebase/app

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

Folder Structure

Dependencies

  "dependencies": 
{    
          "@react-native-firebase/app": "^20.1.0",
          "@react-native-firebase/auth": "^20.1.0",    
         "@react-native-firebase/database": "^20.1.0",   
          "firebase": "^10.12.2",    
          "react": "18.2.0",
         "react-native": "0.74.3"  
}

Now you have to go to the firebase console to complete the setup.

Integrating Firebase into Your React Native App

Integrating Firebase with IOS application provide a better protection for your application and your users. This can be achieved using React Native application. Google Firebase console provide credential and authentication file for IOS application also and React Native will create IOS application for your. React Native allow you to create application for IOS also, just you have to follow some steps to do so.Once you have the prerequisites set up, follow these steps to integrate Firebase into your app:

Step 1: Login to Firebase Console

Login to your firebase console to create a project for your react native application.

Step 2: Create Project

Write your project name and click on continue button to create it. This will create a project for you, it is used to integrate with your react native application.

Step 3: Select Default Settings

Click on continue and save the default settings.

Step 4: Select a Account

Configure your google account for analytics tool, this will help to analyze your application more efficiently. Then click on continue button to continue.

Step 5: Project is being Created

Now wait until your project is being created and after that complete all the necessary steps.

Step 6: Create App

Click on android button to create your application for android. You can create for web and IOS also but in this article we are going to make for android.

Step 7: Enter Package Name

Here you need to enter your package name, You will find your package name in your AndroidManifest.xml file. Which is exist in your android/app/src/main directory.

Step 8: Download File

Download the google-services.json file which is used to integrate your application and paste that file in your android/app directory.

Step 9: Add Code to Your App

Open your build.gradle file which is in your android directory and add classpath to your dependencies. The file is present in myApplication/android forlder.

Also apply to that by going to your android/app directory and open build.gradle file apply the following code. This file is present in myApplication/android/app folder.

Step 10: Click on Continue to Console

Now click on continue to complete the setup and go the console.

Additional Points to Consider

• Environment Variables: Store your Firebase config in environment variables to keep your API keys secure.
• Error Handling: Implement robust error handling to manage any issues that may arise during the integration process.
• Testing: Regularly test your app to ensure that Firebase services are working correctly.
• Documentation: Keep your code well-documented to make future updates and maintenance easier.

Output