Firebase: Firebase Auth and Firestore Methods

Published on 14 Nov 2020 by Dave Regg

I had just spent the past month building two new projects

  1. Auth - A fullstack Authentication project with a handwritten Node and Express backend using JWT to authenticate users.

  2. Reddit Clone - A fullstack social media project using Firebase Auth for authentication and Firebase Firestore methods for backend communcation.

For my Auth project, I barely had a frontend because all I wanted to do was practice authenticating users after they sign up with a username and password. Meanwhile, I barely wrote a backend for my Reddit Clone simply because Firebase Firestore took care of everything for me.

After thinking about learning Firebase (or some kind of function based backend), I watched this Coding Garden video to see what it's all about. The creator, CJ, made Firebase look so simple that I was inspired to make my own application based on his backend design. Not only that, but since he created the project with Vue, I could build mine in React and call the project my own.

Firebase?

Honestly, I had no idea what Firebase really was when I first started watching the video. After the video began, CJ never really explained it either, he just jumped into the project (probably because it was a livestream).

Essentially, Firebase is a service provided by Google which can connect with developer applications and assist the developer with backend methods. The backend includes SEO information and analytics, a full database service, and authentication, to name a few. It took me a while to realize that Firestore is a subset of Firebase. Firestore is the actual database that a developer is using, like MongoDB.

To setup Firebase, a developer simply needs to log into a Firebase account and follow the steps to create a project. Then bring that project into your application with a firebase.js, pop the Firebase configs in that bad boy, and initialize Firebase. Google lays out all of this code for the devleoper, and the developer simply has to copy and paste the information into the file.

Firebase Authentication

I mentioned the two projects I built on the top because building my own authentication app was a chore in itself. With Firebase, a developer can setup Google Auth with just a few steps (note: I used Redux to control the frontend store so my actions went into its own folder and inside an auth.js file)

  1. Allow Auth within the Firebase app by setting one of its Sign-in Methods to enabled

  2. Create a login() action

  3. login() first needs to bring in the Auth provider with one simple line- const provider = new firebase.auth.GoogleAuthProvider();

  4. Next, get the signed in user with another line of code- const { user } = await firebase.auth().signInWithPopup(provider);

  5. It's at this point that the developer can create the user that will be saved to the store and / or the database.

Not only that, but logging out is even easier await firebase.auth().signOut();

The third, and, for me, typically the most difficult part of Auth is managing the user throughout different Components of the React app. With JWT, I would need to create a function which would detect if a user if logged in, and if the user is logged in, set the user token to the jwt token of the user. Blah blah blah.

firebase-auth-1

Yep. Firebase handles all of that for you. The one method I made, getUser(), is an auth action that gets the user from the redux store.

I spent weeks building an Auth project, and Firebase methods help me do the exact same thing in just a few lines.

Firestore Database

I love programming and developing, but if I had one weakness, it is designing and developing the backend. Express, Node, and MongoDB have tedious steps that need to be followed, it takes a long time to write out all the code, and if I design a model incorrectly, I need to go back and write, and re-write, and so on.

Firebase helps with some aspects of that. First of all, Models and Schemas aren't needed. Routes aren't needed. Connecting the frontend to the backend is, again, just a couple lines of code.

The most difficult part that I found? References from one model to another isn't as straightforward as MongoDB so sifiting through one collection for a referenced model bloated my code.

Overall though? I can't complain when I don't need to write CRUD routes for Users, Subreddits, Posts, and Votes over and over again. All I had to do was use some built-in methods provided by Google.

Want to create a comment? await db.collection('comments').doc(newComment.id).set(newComment);

Reading a document or collection? After getting it, the developer just needs to return the doc.data() by looping through the returned data. I typically stored it in an already created array. res.forEach(doc => { payload.push(doc.data()); });

Updating a doc is just as easy as creating a new doc. await db.collection('comments').doc(updatedComment.id).update(updatedComment);

Deleting a document? Sure! await db.collection('comments').doc(comment_id).delete();

Replacing MERN?

Firebase makes backend data management so much easier, but there are still cons to creating with it (or any similar service, like Amazon's AWS).

I have already glossed over the fact that it is hard to reference different models in the Firestore. CJ on Coding Garden had a workaround with getters on his Vue app, but I had to continually read all the documents, and then filter through each array until I found the matching document. Like I mentioned earlier, this bloated my frontend.

firebase-firestore-1

With so many moving parts like in a social media app, filtering through continuous calls to all the collections became tedious.

The developer also cannot control the returns of the database calls. Going back to the read call, instead of having to return the array of data from doc.data(), if I had my own routes, I could simply return the array from there. When writing a backend, the developer can also write the errors that are returned from the database, giving the frontend developer useful information.

There are different circumstances for each technology, and MERN vs Firebase is no different. I would never want to keep all of my databases on a Google service, but, as just someone who does this as a hobby, I would also not want to build my own Reddit database either. It's nice to have options, and I encourage everyone to take the opportunity to learn a service like Firebase.