React Firebase Authentication

— best authentication combo ever

Creating a Firebase App:

=> Go to Firebase Console

=> Create a New Project

=> Create a New Web App

=> Click the small settings icon at the upper left corner then go to project settings and scroll all the way down to the end of the page

=> Click on the config option and copy the config Object in that code block

Creating a React app:

make sure you have node installed by typing the command else install it here

I am using create-react-app (recommended for beginners) to create my react boilerplate app. Feel free to use Next.js or Gatsby.js

npx create-react-app [your-app-name]

Configuring Firebase:

now change the directory and install firebase npm module by

cd [your-app-name]

npm i firebase react-router-dom

start the development server by running the command

npm start

create a .env file in your project root directory and paste the code like below

this will save all these config strings to the environment as variables which can loaded to any of your project files at any time

the static site generator create-react-app which we are using has an unique way of storing the custom environment variables. We need to start the variable name as REACT_APP_ only then you can load that variables in your app. This is done for some security purpose so that you don’t actually overwrite the old variables which is already there. For more details refer the Official Documentation

Environment Variables are the way usually used by many developers to hide their API keys or any App Secrets while making open source projects so that we can hide our config and still use it. If you are pushing it to your repo in github or any other git clients, you can just include that .env file in your .gitignore file to ignore the file

create a new file base.js in your src folder and paste the config object you copied from the Firebase website

the environment variables can be accessed by process.env as mentioned above

Creating the UI:

here I have made the more simplest way to create the functional component without any styling and using the useState react hook to store the state

create a Login Component and write the code as below

create another component SignUp and paste the following code

alternatively to redirect if there is a user like this, you can make the routes for Login and Sign Up components as Private Routes which you can learn this from this blog post

make the Dashboard Component as per your requirements. You can get the current user details from the auth object as auth.currentUser exported from the base.js file

you can get the user’s name as auth.currentUser.displayName and profile image as auth.currentUser.photoURL. It is recommended to save the user in a context and use the Firebase real-time update on the auth state changes as follows

You can also use Social Logins like Google, Facebook, GitHub, Twitter, and many more… you can see all those options in the authentication tab in the Firebase console.

Thank you for reading