How to use firebase Authentication with React (part-1)

5 min readMar 23, 2020

Hello world!

This article is about serverless Authentication with firebase authentication in react .

So what is firebase ?

firebase a cloud service by Google .. which have some features like Realtime database, Hosting, Auth, cloud functions etc . Which widely used by mobile and web application developers .

So in the article we are going to use one of important feature of firebase that is firebase auth to add user authentication features to our react app .

So let’s jump to work…

First of all let’s land on https://firebase.google.com/

Without further delay, let’s get started by clicking the Get started Button, it will ask you to Sign in with your google account , do that without hesitation .

you might be redirected to firebase console . Now your time is to find out “Create a Project”/ “Add a project”

here i got in front of eyes … let’s jump into it …

Here , it will ask you to provide your Project name , and it will automatically generate your project ID, don’t forget to check the firebase Terms checkbox and clicking on the continue button …

So here we go… They are offering us to use Google Analytics in our project.. let scroll down

So here I found the Enable/Disable button , currently I’m not focusing on this that’s why turning off , but you may enable if you need to . I can’t wait to click on the “Create Project” button … They are saying they are creating my app , okay I’m waiting … when ever I got the continue button then who hold me to click on that !

Here we go… I found the thing for what I had came in …

Here I had jumped over to Sign In Method tab , here you will see some hot sign in method, enable whatever you want , for now I would like to enable Email/password and the Google Sign in method …

Now …

Now lookover the gear/settings Icon and click on project setting … we will do something with it …

By then I had scrolled down and found this , they are saying There is no app in our project … so we will set up our project app type , in this case we are like to use for our web app so I should select the Code Icon , it’s mean Web …

Here they asked for app name , and they have also a check box on Firebase hosting , if you want to use firebase hosting then then you may checked that,

I’m Just Clicking on register App

And the 2nd step : I’m not looking on the code now I’m just going to click on “Continue to Console”

And again I had scrolled down and changed the radio button from “CDN” to “Config” , that’s the code we will need to use into our react app …

So it’s time to install firebase and configure it in our react app .

If you are using NPM then your command will be :

npm install — save firebase

So when it’s done … We will go through our react project directory and on the src folder we will create a file to paste the firebase config file … let’s named it as firebase.config.js

I had paste the config code and exported it for the further use … don’t forget to export it , we will need to import from another file/component

export default firebaseConfig;

I had saved the file and got out of that …

Now the time have come …

Now we will use firebase and firebase auth in our react component, if you want you can create a Custom Hook for Authentication stuff I’m not going to do that in this article (I will write an article on it , later) …For now I would like to use firebase auth in my App.js … for that I have to import something from firebase .

1st one is :