Integrate Firebase with React App

Integrate Firebase with React App

23 February 2022

First, we need to create a Firebase Project for our React Application.

Create a Firebase Project

  • Go to the Firebase Console
  • Click on Create a project/Add a Project.


  • Enter the Project name and click on the continue button.


  • You can enable or disable Google Analytics for your project.


  • Click on the continue, once setup is done you will be redirected to the dashboard.


  • Open the Project settings.


  • Select the web icon, under Your Apps.


  • Enter a name for your project and register the app.


  • Save the configuration details.


  • Click on the Continue to console to complete the registration.
  • Click on the Firestore Database and Create a database.


  • And set the security rules.


Steps to Integrate Firebase in the React JS Application

  • Install Firebase using the following command in your React app.
yarn add firebase

# Or

npm i firebase
  • Set your Firebase config, it should look like this:


  • Now we can use firebase by importing it in our components.
import firebase from ‘../../config’
  • Lets create a collection named ‘employee’.

const empRef = firebase.firestore().collection(‘employee’)

  • Now we can store employees’ records by creating documents within the collection.
const empInfo = {

name: ‘Peter’,

empId: ‘12321343’,

dept: ‘HR’



Here, we have created a document using the empId and set the employee details in the document. You can check the data in the firestore database.

  • We can fetch the data by following ways:-
    • If we need to update the UI in real time, we can use the onSnapshot method. onSnapshot executes every time whenever it detects any changes.
empRef.doc(‘12321343’).onSnapshot(doc => {


    • If we need data at specific event then
const empDetailsRef = firestore().collection(‘employee’).doc(‘12321343’)

empDetailsRef.get().then(doc => {

if(doc.exists) {


}else {

console.log(‘No document found’)


}).catch(error => {

console.log(‘Error in getting document’)


Request a quote