MongoDB Developer
Atlas
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
Atlaschevron-right

Implement Email/Password Authentication in React

Sourabh BagrechaPublished Aug 24, 2022 • Updated Aug 24, 2022
ReactAtlasJavaScript
Copy Link
facebook icontwitter iconlinkedin icon
random alt
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty

Implement Email/Password Authentication in React

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.
./src/contexts/user.context.js

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.
./src/pages/PrivateRoute.page.js

Create a login page

Next, let’s add a login page.
./src/pages/Login.page.js

Create a signup page

Now our users can log into the application, but how do they sign up? Time to add a signup page!
./src/pages/Signup.page.js

Create a homepage

Our homepage will be a basic page with a title and logout button.
./src/pages/Home.page.js:

Putting it all together in App.js

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

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.

Conclusion

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!

Copy Link
facebook icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty

This is part of a series

Fullstack Web App with MongoDB Atlas App Services, GraphQL, and React
Up Next
CRUD Operations with GraphQL Using Atlas App Services
Continue

More in this series
Related
Article

Coronavirus Map and Live Data Tracker with MongoDB Charts


May 13, 2022
Tutorial

Migrate from Azure CosmosDB to MongoDB Atlas Using Apache Kafka


May 09, 2022
Tutorial

Accessing Atlas Data in Postman with the Data API


Aug 26, 2022
Tutorial

Maintaining a Geolocation Specific Game Leaderboard with Phaser and MongoDB


Sep 23, 2022
Table of Contents