React JS with Firebase

Here we will be talking about creating, configuring and using Firebase in React.js application. We will take a look on user authentication basics and firestore collections.

What will be covered in this article

1. Creating a new firebase project

2. Add firebase to the project

3. Set sign-in methods

4. Sign in with email and password

5. Sign in with Google

6. Create a Firestore database

7. Firestore CRUD operations

8. Creating Firebase Storage

9. Adding a Profile image

1. Creating a new firebase project

First of all, we need to create a firebase project, and we can do that by this link https://console.firebase.google.com/.

Type project’s name (you can choose any name you like):

You can Enable/Disable analytics, but if you don’t want to decide, you can change it in the future:

If you Enabled analytics, Firebase will show you a configuration analytics window (“analytics” is not covered in this article, but I will leave screenshots here, just in case, if you are curious):

Wait some time after clicking “Create project”:

Done…

To use firebase in our React app we will need to create a Web app. We can do that by clicking “Project settings”:

And register your new Web-app with some custom-name. After that, you will need to copy-paste configuration values :

that’s my own unique apiKay, in your case it must be something different

2. Add firebase to the project

First, we will need to add firebase npm package to our project:


//using yarn
yarn add firebase

//using npm
npm install firebase

Next, copy-paste configuration from your firebase Web-app:

3. Set sign-in methods

Before adding new users you will need to specify sign-in methods that will be available/activated for your created project:

As you can see from the list, Firebase provides a bunch of sign-in methods, but we will start from the most common one — email and password :

Enable that and Save:

Now, we can see that only one sign-in method is Enabled:

Now you are ready to use firebase in your project. Will will start from a simple example — create a new user with Email and Password :

firebase_app is a firebase instance that is returned after initializing it.

Please, note. When a user is created he is automatically logged in. You can add this function for checking is user logged-in:

For user logout you can use this simple function :


firebase_instance.auth().signOut();

The nice thing is we haven’t written a single line of code for field validation, firebase validated them for us.

5. Sign in with Google

Now, let’s check sign-in method with Google. Just like we did with email and password method — we will need to Enable Google sigh-in method:

after you enable it, you can go to your signin page and import a signInWithPopup method from the auth package, like so :


import { signInWithPopup } from "firebase/auth";
/*don't forget to import also the useNavigate() hook, so we can redirect the user to the 
 home page in case the login was successfull */
import { useNavigate } from "react-router-dom";

Now you should create a method to handle the google sign in, you can call it whatever what you want, and link it to an onClick event like so :


<button type="submit" onClick={handleGoogleSignIn}>Sign in with Google</button>

our handle method will be like that :


const navigate = useNavigate();

const handleGoogleSignIn = () =>{
        signInWithPopup(auth,provider)
        .then((data)=>{
            localStorage.setItem("email",data.user.email)
            navigate("/home")
        })
    }

Now after you click on the Sign in with Google button, a popup window will appear .

you can check the working example on my repo 🤗.

6. Create a Firestore database

Before we will be able to use Firestore database in our React.js project we will need to create it…

Firebase will ask you about the database access rules. You can change them later. Just select production mode for now, and click “Next”:

Next, select location settings:

Press “Enable”. Firestore is ready.

But before we start creating collections and adding some data, we will need to change access rules.

Change false to request.auth != null . This will tell Firestore that we are allowing read and write to/from our database only for authenticated users.

And now we can add some user’s profile information.

7. Firestore CRUD operations

Before you can read/write some data to the document — you’ll need to get a reference to the document: DocumentReference

And after that you can call CRUD methods:

There are four main CRUM firebase methods:

Create → set

Read → get

Update → update

Delete → delete

Create a new document

(on going …..)

Update document

(on going …..)

Delete document

(on going …..)

Now, let’s add the user’s avatar image and add it to the profile data.

(on going …..)

8. Creating Firebase Storage

First, we’ll need to create a Storage exactly as we did with the Firestore:

Next, save access rules (default values are fine for now):

Location setting”:

Press “Done”, wait a moment:

Firebase Storage is ready…

Now we can add some files to our Storage. Let’s do that.

9. Adding a Profile image

to add some file you will need:

Les’st take a look at how it will be stored /images/${userId}/avatar.jpg:

But we will need to get the public URL to the user’s avatar image:


const downloadURL =yield uploadedImage.ref.getDownloadURL();

SetAvatar saga function:

This will create/update profile data:

Result (gif):

GIF image of how uploading avatar works in React.js with Firebase

Those are the basics. Cloud Functions will be covered in next article.

How to work with images in React.js is out of the scope of this article, but, if you are interested I will leave a code snippet of that component, and link to the GitHub of this project.

I’m usingreact-avatar-editor npm package in this project (it is not required, but it is very helpful when it come to editing avatar image)


yarn add react-avatar-editor
//or
npm install react-avatar-editor

And SetProfileImage component looks like this:

Link to a working GitHub project.