Firebase is an extremely good software development platform, which gives you access to both authentication, noSQL databases, storage and much more. It’s a true powerhouse, and I love the ease of using Firebase and the database Firestore.
We all know the importance of using the right tool for the job. If you’re developing an app with Firebase, you might run into a situation where cloud functions are not enough, and you need a separate backend server to do some tasks. You might even use Firebase as your main hub, and have other microservices connected to it.
Either way, if you’re moving out of Firebase, you need authentication. It would be weird to have different authentication systems on Firebase and your separate backend server.
Luckily, Google lets us use Firebase authentication outside of Firebase. This works by sending the Firebase authentication token with the payload to the backend server, and validate it there. Let’s look at how we might tackle this.
This will be a step by step tutorial where we set up a simple example application. We will go through each step thoroughly and you don’t need any prior experience with Firebase, React or Express.
Table of Contents
- What we’re building
- Setting up Firebase
- Beginning React Frontend
- Beginning Express backend
- Communicating with the backend
- From the backend to the fronten
- Displaying data in the frontend
- Closing Thoughts
What we’re building
We’ll be building a simple phonebook. The user will be able to add phone numbers and see a list of all phone numbers. We will not use any css styling in this project. Let’s have a look on the technologies we’ll be using.
Firebase
We will only use Firebase for its authentication platform.
React
We will use modern hooks and arrow based React for our frontend.
Express
We will write our backend in NodeJS, and use Express as our backend framework
MongoDB (MongoDB Atlas)
We will use MongoDB Atlas as our database — a cloud based version of MongoDB, hosted by the MongoDB team themself. A regular SQL database would be the most natural choice in regards of this applications functionality. However, with help from the npm module Mongoose, MongoDB will act as a relational database, and provide us with schemas for our data. What’s great about going down this path, is that we can use Mongoose for structured data, and pure MongoDB for non-structured data. We will only use MongoDB through Mongoose in this application.
Github with the complete code
The complete source code for this project can be found at https://github.com/Devalo/Firebase-auth-react-express-mongodb
That’s a lot of moving pieces for such a simple app. We’re going to have a blast!
#mongodb #javascript #react #firebase
