My favorite stack to use is the MERN stack. For those of you who aren’t sure what the acronym stands for its MongoDB, Express, React, and Node. These are frameworks and libraries that offers a powerful way to bootstrap a new application. Paired with Firebase it’s relatively simple to deliver a safe authentication system that you can use both on the backend and the frontend of your application.
This article series will cover the following things:
- Creating an Express server with a MongoDB database connected and using Firebase Admin SDK
- Setting up a client side React App that uses Firebase for authentication.
If you just want take a look at the code and can divine more from that, check out the public repo I created.
We start by importing all of our dependencies to get the server setup. Initialize that app and call our database function to connect to MongoDB. Then we connect the middleware we’re going to be using and begin listening on our PORT, a pretty standard Express app setup.
We use dotenv to pull in our environmental variables, of which includes our port, our MongoDB URI, and all of Firebase certificate information we need to use the Firebase Admin SDK.
This is our db function that we called inside of our server.mjs to connect us to MongoDB. We then attach it to our app as a variable under app.locals.db. This will allow us to quickly access the database from any of our endpoints under req.app.locals.db.
To setup our Firebase Admin SDK to be used, we pass in the certificate information from Firebase that we stored within config file and .env. And then we export the service with invoking auth so its ready to be consumed where ever we import it.
This workhorse function will help us validate the Firebase tokens sent from the frontend. Once validated we tack on the user document we fetched from MongoDB onto our request as req.user. On the endpoints we use this middleware, we can always ensure that there’s an authorized user by checking req.user.
For this example, we are creating two routes in our user.mjs file. The first one gets a user from req.user, which we added in the authentication middleware and sends the document back.
The second one is our sign up route, which creates a new user and adds them to the collection. We do very simple validation on the request body to make sure the fields necessary are there. Much more expansive validation can be done if you want, a good library for that is express-validator. For the sake of this example, we’re not going to use and keep things simple. After validating the body, we then use the Firebase Admin SDK to create the user. This is something that can be done on the frontned, but the reason we do it on the backend is the next piece, relating the Firebase account to our user document in MongoDB. We then return a message to the frontend saying the user was created, or if there’s any errors we send those instead.
Moving on from here, we will take a look at the frontend implementation and how we consume our endpoints and use Firebase to login and protect the information inside our app from those that are unauthorized.