EventGet 50% off your ticket to MongoDB.local NYC on May 2. Use code Web50!Learn more >>
MongoDB Developer
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right

Implement Email/Password Authentication in React

Sourabh Bagrecha8 min read • Published Aug 24, 2022 • Updated Apr 02, 2024
Facebook Icontwitter iconlinkedin icon
Rate this tutorial
Note: GraphQL is deprecated. Learn more.
Welcome back to our journey building a full stack web application with MongoDB Atlas App Services, GraphQL, and React!
In the first part of the series, we configured the email/password authentication provider in our backend App Service. In this second article, we will integrate the authentication into a web application built with React. We will write only a single line of server-side code and let the App Service handle the rest!
We will also build the front end of our expense management application, Expengo, using React. By the end of today’s tutorial, we will have the following web application:
Expengo application walkthrough

Set up your React web application

Make sure you have Node.js and npm installed on your machine. You can check if they’re correctly set up by running the following commands in your terminal emulator:

Create the React app

Let’s create a brand new React app. Launch your terminal and execute the following command, where “expengo” will be the name of our app:
The process may take up to a minute to complete. After it’s finished, navigate to your new project:

Add required dependencies

Next, we’ll install the Realm Web SDK. The SDK enables browser-based applications to access data stored in MongoDB Atlas and interact with Atlas App Services like Functions, authentication, and GraphQL.
We’ll also install a few other npm packages to make our lives easier:
  1. React-router-dom to manage navigation in our app:
  2. Material UI to help us build beautiful components without writing a lot of CSS:

Scaffold the application structure

Finally, let’s create three new directories with a few files in them. To do that, we’ll use the shell. Feel free to use a GUI or your code editor if you prefer.
Open the expengo directory in your code editor. The project directory should have the following structure:

Connect your React app with App Services and handle user management

In this section, we will be creating functions and React components in our app to give our users the ability to log in, sign up, and log out.
  • Start by copying your App Services App ID:
Atlas App Services Screen highlight the Copy App ID button.
Now open this file: ./src/realm/constants.js
Paste the following code and replace the placeholder with your app Id:

Create a React Context for user management

Now we will add a new React Context on top of all our routes to get access to our user’s details, such as their profile and access tokens. Whenever we need to call a function on a user’s behalf, we can easily do that by consuming this React Context through child components. The following code also implements functions that will do all the interactions with our Realm Server to perform authentication. Please take a look at the comments for a function-specific description.

Create a PrivateRoute page

This is a wrapper page that will only allow authenticated users to access our app’s private pages. We will see it in action in our ./src/App.js file.

Create a login page

Next, let’s add a login page.

Create a signup page

Now our users can log into the application, but how do they sign up? Time to add a signup page!

Create a homepage

Our homepage will be a basic page with a title and logout button.

Putting it all together in App.js

Let’s connect all of our pages in the root React component—App.

Launch your React app

All have to do now is run the following command from your project directory:
Once the compilation is complete, you will be able to access your app from your browser at http://localhost:3000/. You should be able to sign up and log into your app now.


Woah! We have made a tremendous amount of progress. Authentication is a very crucial part of any app and once that’s done, we can focus on features that will make our users’ lives easier. In the next part of this blog series, we’ll be leveraging App Services GraphQL to perform CRUD operations. I’m excited about that because the basic setup is already over.
If you have any doubts or concerns, please feel free to reach out to us on the MongoDB Community Forums. I have created a dedicated forum topic for this blog where we can discuss anything related to this blog series.
And before you ask, here’s the GitHub repository, as well!

Facebook Icontwitter iconlinkedin icon
Rate this tutorial

This is part of a series

Fullstack Web App with MongoDB Atlas App Services, GraphQL, and React
More in this series
  • Configure Email/Password Authentication in MongoDB Atlas App Services

MongoDB Atlas With Terraform - Cluster and Backup Policies

Mar 04, 2024 | 22 min read

Using the Confluent Cloud with Atlas Stream Processing

Feb 13, 2024 | 5 min read

UDF Announcement for MongoDB to BigQuery Dataflow Templates

Apr 02, 2024 | 4 min read

Getting Started with Atlas and the MongoDB Query API

Feb 13, 2023 | 11 min read
Table of Contents