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 back end and the front end 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. The first article can be found here.
- 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.
React Front End
One important note, for the Front End I used Vite to bootstrap the application, but you could easily use Create React App as well.
This is the main entry point into our application. Everything here is pretty standard for React, but one important thing to note is we’re using a library called Easy Peasy. It essentially is a state management library and is very simple to setup, being a wrapper around Redux.
This is our setup for Easy Peasy. We’re tracking just a single state variable, but you could easily add more things to store here. Once we’re logged into Firebase or there’s a change in the auth state, we’ll be using the functions here to update and modify the boolean on if the user is authorized. If Easy Peasy isn’t your speed, you could easily replace this with Redux, Recoil, Mobx, the Context API, or any other state management solution.
Much like our Back End, we have to setup our Firebase service. The firebaseConfig is something you will get when you create a new project and add a web app to your project. I left it blank for a good reason as I didn’t want to share the information on my Firebase project. That being said, all you need to do is copy and paste your information from Firebase and you should be good to go.
In our App.jsx we tackle a few different things. First off we make sure we show a loading indication when the app first renders, because we’re essentially showing certain routes depending on we’re authenticated or not. The authStateListener function monitors through a useEffect the Firebase authentication state. If there’s a user, it sets the global state to true through Easy Peasy, otherwise it’s false.
If we are Authorized through Firebase Authentication, we have access to these routes. Right now it’s a single route with a dashboard page being rendered. One could easily add more routes that can only be seen while logged in, such as a Settings page, or anything that is relevant to the type of app it’s supposed to be.
If we are logged out, we can only Sign Up, Sign In, or see our homepage. Just like with our authorized routes, you could easily add more routes, things like a forgot password route, about page, contact page, and etc….
Our navigation reflects the routes we have while we are authenticated. However, our sign out performs and action through Firebase. This will trickle back up to our App.jsx and kick us out of any authorized routes.
This is our navigation for the unauthorized routes. We can only visit the Sign Up, Sign In, or Home page.
Right now our Home page is a simple header, just to provide an example.
On the Sign In page we have a very simple form where we are collecting the user’s email and password. When they click the button to sign in, it then fires Firebase auth function that alters the state of whether or not we are authorized, and also returns the user. And then the function navigates us away from Sign In to the / route, which should take us to our Dashboard page.
Our Sign Up page also contains a form that gathers information from the user. We are getting their Email, their name, their password and confirming that password. After clicking Sign Up we use axios to make a post request to our API endpoint to add the new user. If there’s any errors, we handle those as well and display them on the screen for the user.
The final page we look at is our Dashboard, which if you remember can only be accessed while you are authorized and authenticated by Firebase. On this page we make a request to our api to get the user data and conditionally display it on the screen.
As you can see through these code examples, in a MERN stack application it’s not very difficult to integrate Firebase auth. We can use it on our Back End to protect our api routes and on our Front End to protect which pages and components we want to render to the user. We can pass our token along in the process each time we make HTTP requests. While it was out of scope for this guide, you could even integrate OAuth providers through Firebase as well, adding even more capabilities to the arsenal. I hope these examples are useful to anyone trying to integrate with Firebase in their MERN stack application.
