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. We’ll create a simple phonebook with React, Firebase Auth, Express and MongoDB to discuss how to use of Firebase Auth outside of Firebase.
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.
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.
We will only use Firebase for its authentication platform.
We will use modern hooks and arrow based React for our frontend.
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.
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!
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Using Firebase and react-router to create protected routes in a react app.
ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...
Using React Native we and Firebase we will perform some React Native Firebase login with Google, as well as phone, password with email and even anonymous logins.