How to authenticate users using React and Firebase

Authenticating users is very hard to implement from scratch and you’ll have to write long lines of code in order to implement it but firebase makes it simple. In this article we will learn how to authenticate email and password using Firebase. We will start by setting up a project. After that, we will register a user and then we will log in with the same credentials to demonstrate the authentication.

Firebase project setup

Let’s start by creating a project in firebase. Open your browser and search Firebase by Google (or navigate using given url). If you haven’t signed in, you’ll see the home page like in the image below.

Firebase home page unsigned

Sign up before proceeding further. After signing in with your google account, click on Go to console in the top right corner of the page. If you have no projects in your account yet, get started by clicking Create a project.

If you already have existing projects, click on Add project to create a new project.

                                   

After that, enter a name for your project. I have named my project as “auth-example”. The text which is covered with a blue line in the image below is the project ID. Click on Continue to proceed further.

You can turn off google analytics by pressing on the toggle switch beside the ‘Enable google analytics for the project’ shown in the image below. Google Analytics enables the features present in the image. Click on Continue.

It’ll take few second to load your project. After sometime, you’ll see the following page.

Click on Continue. Your project will be created and you’ll see a page similar to the following image.

 

Discussion