How to Create a React app with Firebase Auth, Express Backend and MongoDB Database

How to Create a React app with Firebase Auth, Express Backend and MongoDB Database

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.

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.

https://firebase.google.com/

React

We will use modern hooks and arrow based React for our frontend.

https://reactjs.org/

Express

We will write our backend in NodeJS, and use Express as our backend framework

https://expressjs.com/

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.

https://www.mongodb.com/

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Create Protected Routes in a React app with Firebase and react-router

Using Firebase and react-router to create protected routes in a react app.

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

React Native Firebase Authentication

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.

How to Upload Photos to Firebase Storage in React Native

Uploading photos to Firebase Storage is a common practice in React Native apps. Using React Native you can build a variety of app screens that are cross-platform using JavaScript as the main programming language.