UI Development

Building and integrating Firebase authentication with React App

React.js is one of the fastest growing front-end JS library and it needs reliable backend service. Firebase is a good choice. Firebase is the entire backend service provider with many different features that can be used right into our projects like real-time database, cloud storage, hosting and authentication.  

The first step is to create a React app.

Open cmd and type these commands:

  1. npx create-react-app react-firebase-auth – create-react-app provides easy and best way to create a react app.
  1. npm install –save firebase – this will Install firebase module in react project

Now, we have a skeleton react project. Now under the folder src , we create a folder config and under it a file fire.js where we can store all the firebase configurations.

To get the configurations:

Go to the link –  https://console.firebase.google.com/ . Click on add project button. Enter your unique application name and press continue.

To Add Firebase to your web app, click on the web icon and add the name of the project. 

Copy and paste in fire.js file 

Firebase.initializeApp: initializeApp is a function which creates and initialises a Firebase app instance.

We have now added the configuration to connect our React project with Firebase. For our React application we need 2 pages –  login page and home page

Now In your app.js file, write down the following code

fire.auth().onAuthStateChanged – this function is called when the authenticated state of a user is changed that is when the user logs in or log out from the account. In componentDidMount() we are calling this function which gives null value if the user is not logged in and an object if user is loggedin. Depending on this state we can toggle our views. 

Home.js 

Home.js is a view when a user is already logged in. Firebase provides a way to log out using its predefined methods. 

fire.auth().sighOut()– signs out the current user. 

Login.js

On the login page, we have a form which accepts email id, password of a user and 2 buttons – a signup button and login button., we have a form with email id, password, a signup button and login button. Sign up button is for new users and login for existing users in the database.

fire.auth().signInWithEmailAndPassword() – firebase provides a method to login signInWithEmailAndPassword which accepts two parameter email and password and returns a promise and Asynchronously signs in a user.

fire.auth().createUserWithEmailAndPassword() – Already existing user can sign up using  createUserWithEmailAndPassword which accepts two parameter email and password and returns a promise and creates  a new user account associated with the specified email address and password.

Sandbox link: 

https://codesandbox.io/s/react-firebase-auth-bs509

About The Author