4 steps to add firebase in react project

Let’s connect react with firebase in less than 5 minutes

Steps to install !!

1. Add a Firebase package using yarn in your repository.

2. Create a file called Firebase in your repository.

3. Create a project in your Firebase Console named accordingly.

4. Add your Firebase project credentials in the next.config.js file or env file of your repository.

5. The Last step is to initialise the firebase inside your firebase folder by importing all the credentials from the config file or env file.

Process!!!

Create a project inside the Firebase console and after adding project details like name etc click “Continue”. You will send it directly to the page you can view in the image below.

Project details home page

Next, click on the Settings button on the left corner to reach out to a drop-down and then click on “Project settings”.

Home Page → Settings → Project Settings

You will reach the page shown on the left-hand side of the image, then scroll down and click on the web icon from the list of three icons.

Click on the web icon among three blue colour icons.

Enter the new app name inside the project

Enter the app you want to create inside this project, NOTE — you can create multiple apps within a single project, I will tell you the importance of multiple apps in Firebase later on.

After clicking on “register app” you will get the Firebase app credentials like databaseURL, storageURL etc. Copy the whole credentials and save them somewhere we will use them later on.

Now, your Firebase setup is completed in the console. Time to move back to your repository. Add the credentials you have copied into the env file or the next.config.js file like this.

Credentials inside next config file

Please use your credentials otherwise it will not connect your client with Firebase.

Inside utils, the section adds a new file firebase.js. This file will initialize the Firebase app for your whole frontend this will connect your frontend with the Firebase project you have just created.

Initializing firebase in firebase.js inside utils

Now your Firebase setup is completed on the client side.

The last step is to test the setup. For testing, I am using the real-time database for I have created my testing real-time database with just users as a database.

Go to Realtime Database and create the sample database. It will look like this as shown in the image.

Users real-time database.

Fetching user’s collections!!!

The next step is to fetch this user's collection from Firebase to our client side.

First, we will import the initialized Firebase from our utils folder and then we will use the Firebase methods to fetch data. Second, we will connect our client with a Firebase real-time database to our database collections.

Here one collection among the real-time database collections we have is “users”. Then we will simply fetch the list of users from the user collection.

I have added the code inside the index.js file in the pages section only.

Still, there is an issue in fetching users, the real-time database you have created in the Firebase console is in the testing mode it set the rules by default as false, which means no users can fetch the real-time data from that database.

For development usage, change those rules to true.

Rules section in Firebase real-time database

Now, the database is connected and installed properly on the client side.

Fetching the users list and displaying it on the client side.

core repository

That’s it for today, see you in the next one

Shrey