What is Firebase and Why should you use it?

Firebase is a NoSQL database that is used for mobile and web apps, provided by Google. There are many useful features in Firebase such as user authentication and a realtime database. Firebase is good for developing your backend quickly and for rapid backend development. In this article, I will be telling you what Firebase is, why you should use it, and a quick tutorial of integrating Firebase Authentication in a React app to show how easy it is to integrate.

What is Firebase?

Firebase is a Backend-as-a-Service (BaaS). It provides developers with a variety of tools and services to help them develop quality apps, grow their user base, and earn profit. It is built on Google’s infrastructure.

Firebase is categorized as a NoSQL database program, which stores data in JSON-like documents. A NoSQL database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases.

Firebase aims to solve three main problems for developers:

• Build an app, fast
• Release and monitor an app with confidence
• Engage users

Firebase is among the top app development platforms relied upon by developers across the globe. Fundamentally, Firebase is a collection of tools developers can depend on.

Some popular websites using Firebase include:

• Alibaba
• Twitch
• Instacart
• New York Times
• And many more…

Why you should use Firebase?

Firebase is a free service that lets users log in with their Google account. Firebase is a good choice if you plan to either write a brand-new application or rewrite an existing one from scratch. Additionally, Firebase helps in the easy storing and retrieval of dynamic content. If you decide to develop the application without any form of custom coding the backend, Firebase makes this easy. Firebase is also serverless which means that Firebase runs on the cloud and you don’t need a physical server that’s constantly running.

Firebase can be used when you do not want to spend a lot of time developing your own backend. It can be used for rapid development. I have been using it in my apps in production. You will not have to take care of servers, etc, Google will take care of it for you. There are also many extensions that you could add to your Firebase project such as running subscription payments with Stripe. This extension allows you to provide subscription payments to users via cloud functions. If you’d want to know how to integrate this, be sure to check out Papa React’s channel and go to the Netflix Challenge. In that, Sonny integrates this extension in his Netflix Clone.

Using Firebase in your project allows you to focus on the frontend and not so much on the backend because Firebase does a lot of things under the hood for you. Firebase also helps keeps costs low and reduces the need for boilerplate backend code. Firebase also helps you monitor errors. Firebase’s Crashlytics is a tool that find and fix issues in an efficient manner. It can monitor fatal and non-fatal errors, and it generates reports on how those errors affect user experience.

After reading through all of this, I think you realize why Firebase is so important and how it can ease the process in the backend. Let’s move onto the tutorial where I show you how to integrate Firebase Authentication with React. This will help to show you how easy it is to create login/logout system using Firebase.

Firebase Auth Tutorial

In this tutorial, I will be showing you how easy it is to create a React App with Firebase Authentication. This tutorial is a beginner-friendly tutorial, so don’t worry if you don’t understand anything because it will come soon enough.

1. Pre-requisites and Installation

Before we begin make sure you have Node installed. For this tutorial I will be using VS Code as my text editor.

After you have installed Node, enter the below command in your terminal window to create your react app.

npx create-react-app firebase-auth-react-tutorial

After the app has been created, you should see a message similar to the one above. For me it will show yarn because I have yarn installed, but if you don’t have it installed, it should show npm.

Now let’s cd into the project by typing the command below.

cd firebase-auth-react-tutorial

Once you are in the folder, type npm start to start up the React app. You should see a window open and it should look similar to the image below.

2. Cleanup

Now we’re going to do some cleanup in our codebase. So go into the src folder and delete the following files: App.test.js, logo.svg, and setupTests.js. Once you have deleted these files, you may see some errors pop up. Don’t worry, we haven’t finished cleaning up.

Next we’re going to delete all the content below the div with the className equaled to App inside of App.js. We’re also going to remove the import of the svg at the top of App.js. In this tutorial, we will be using a BEM naming convention, so we need to remove the className App and replace it with app. Inside of that div, add an h1 saying “Firebase Authentication using React”. We also need to delete everything in App.css before we move on.

Now your folder structure should look similar to the below images.

If you look at the window with your React app running, you see that the text has a margin-top on it. In order to remove the margin, we have to go to index.css and at the top you need to add the below piece of code.

* {
    margin: 0;
}

Once you save your files, you shouldn’t see the top margin anymore. We have now finished cleaning up our code for this project.

3. Setting up our Firebase Project

Before we go to Firebase to set up our project, we need to install the Firebase package into our project. Open another terminal window and type the command below to install the package.

npm install firebase

Or if you’re using yarn

yarn add firebase

While it’s installing, open another window in your browser and go to Firebase. Then click “Go to Console” at the top right of your window. Then you’ll need to click “Add Project”. After you click it, Firebase will ask for a project name enter whatever you’d like, but I will be entering “React Firebase Auth”. You can toggle off Google Analytics because we will not need that in this tutorial. Then click “Create” for Firebase to create your project and click “Continue” when it’s done.

You should be redirected to a page that looks like the one below. Click on the button that I circled in the image below.

Enter in any name for the app, I will be entering “React-Firebase-Auth-Tutorial.” Once you have entered that and clicked Continue, click “Continue to Console” to get back to the dashboard.

Now we’re going to go to the Authentication tab on the left side of the dashboard for the project. We then click “Get Started” and go to the tab “Sign-in method”.

Then click on Email/Password, toggle the first option, and click “Save”. Now you’ve set up Firebase, so you can sign in with an email and password. See how easy and simple that was! It took two clicks to set up an email and password login with Firebase.

Now go to the sidebar on the left and click the gear icon at the top and click on “Project Settings”. Scroll down to “Firebase SDK Snippet” and select “Config”. Copy what’s inside of that box. Now go back to VS Code and create a file called firebase.js inside of your srcfolder and paste the information in there. At the top we need to import firebase, then we need to initialize the app with the below snippet.

firebase.initializeApp(firebaseConfig);

Then we need to enable authentication inside of our app and export it so we can use it throughout the app. Your firebase.js file should look something like the below. I didn’t put my actual keys here because people could hack into my app and I would suggest that you don’t share your keys to anyone.

4. Setting up Authentication

Go into your App.js file and create 3 buttons: one for registering, one for logging in and one for signing out. We also need to input fields for an email and a password. Surround the input fields and buttons in a div with the className “app__wrapper”. Now surround the buttons in a div with the className “app__buttons”. For each button add an id, for register add an id of register and for login add an id of login. The same goes for the logout button. Your App.js file should look like the below.

We’re going to style our app before we integrate the logic. We will also be using flexbox to style our app, so it can be responsive. We are also gonna use glassmorphism which will amp up the frontend for the design of this web app.

Here is the CSS for the app:

Now our app is styled and the only thing left to do is add the logic behind it which is really simple. First, we have to create to useRef variables one for the email and one for the password. If you’re not familiar with the useRef hook, don’t worry and let me explain it. useRef is a hook that points to an input and tells React to get input from this element. useRef is commonly used in forms, so that’s why we’re using it here. We also need to import useRef from react in order to use it.

const emailRef = useRef(null);
const passwordRef = useRef(null);

Now all we need to do is add each reference to a ref attribute in each input element.

<input ref={emailRef} type="text" placeholder="Email" className="app__input" />
<input ref={passwordRef} type="password" placeholder="Password" className="app__input" />

Now we need to create three functions: one for registering, one for logging in, and one for logging out.

For registering, let’s create a function calledregisterUser. Inside of this function, we need to input the following line of code, so we can register the user in Firebase. We also want to check if the user got created by logging it in the console and we want to alert the user if they made any error.

auth.createUserWithEmailAndPassword(emailRef.current.value, passwordRef.current.value)
.then(() => console.log("Created User"))
.catch((err) => alert(err.message));

We also need to import auth from our local firebase file not from the firebase package.

import { auth } from "./firebase";

On our register button, we need to add an arrow function that calls our register function that we just created.

<button id="register" onClick={() => registerUser()}>

See how simple it was to create register a user in Firebase. To use what you have just made, enter an email and a password and click “Register”. You should now see a user in your Firebase project.

We can rinse and repeat this process for logging in and logging out. For the login function, we need to add the following.

auth.signInWithEmailAndPassword(emailRef.current.value, passwordRef.current.value)
.then(() => console.log("Logged in user"))
.catch((err) => alert(err.message));

For the logout function, we need to add the below.

auth.signOut()
.then(() => console.log("Logged out user"))
.catch((err) => alert(err.message));

Your App.js file should look similar to the below.

Congratulations! 🎉 You deserve a pat on the back for creating this project and sticking through the entire thing. Now you have a cool website with authentication that you can show your friends!

What do I do now?

With the skills you learned in this article, integrate firebase authentication in your next project. Be sure to check out some of the other things Firebase provides such as Cloud Firestore where your database is on the cloud, Crashlytics to get stats on where you app will crash and many more.Check out Sonny’s YouTube channel here.

You can also create some clones that I made on the channel. There will be many more builds to come to be on a lookout for those. If you want to take your skills to the next level, be sure to check out “Zero to Full Stack Hero” here.

Share this with anybody you think would benefit from this. If you have any suggestions, feel free to hit me up. If you like my content then don’t hesitate to buy me a coffee by clicking below👇!

Thank You!

Srikar Kusumanchi
(PAPA Team Writer)