Configure Email-Password Authentication using MongoDB Atlas App Services

In less than 6 small steps, learn how to set up Authentication and allow your users to Login and Signup to your app without writing a single line of server code

Hi there, I am Sourabh Bagrecha from the city of lakes Udaipur, currently working as a Software Engineer at MongoDB. One of the things I enjoy the most is building full-stack apps using React.js, Node.js, and MongoDB. And every time I start a new project I find myself spending a lot of time on a very basic and common feature you will find in every other application out there: Authentication.

How hard it is to implement and maintain authentication on our own?

Implementing authentication in your app usually requires you to create and deploy a server while making sure that emails are unique, passwords are encrypted and sessions/tokens are managed securely.

But in an ideal scenario, your time as a developer should be spent on implementing features that matter to your customer and not reinventing the wheel on your own.

With Atlas App Services, you don’t have to worry about that. All you have to do is just plug Realm Web into your React app and you are all set to rock!

This blog is a part of the series where we will get introduced to the world of Atlas App Services by building an expense manager application called Expengo.

In particular, this blog would be a walkthrough on how you can configure Email Password Authentication on Atlas App Services. In the subsequent part of this series, we will be taking a look at how to integrate this with our React App.

How can MongoDB Realm and Atlas help us?

MongoDB Atlas is a multi-cloud database service that simplifies deploying and managing MongoDB databases.

However, MongoDB’s Atlas App Services are integrated with Atlas and provide secure serverless backend services and APIs to save you hours of coding.

It provides several authentication providers such as Google, Apple, Facebook, etc. For this tutorial, we will be choosing the Email/Password, authentication provider.

Deploy your free tier Atlas cluster

If you haven’t already, deploy a free tier MongoDB Atlas Cluster by following the steps mentioned here. This will allow us to store and retrieve data from our database deployment. You will be asked to add your IP to the IP access list and create a username/password to access your database. Once a cluster is created, you can now create an app and link to it.

Setup your Realm app

Now, click on the “Realm” tab as mentioned in the image below:

There are a variety of templates one can choose from. For this tutorial, we will continue with the “Build your own App” template and click “Next”.

Add application information in the next pop-up and click on “Create Realm Application”

Now click on “Authentication” in the side-bar and then click on the “Edit” button on the right side of Email/Password in the list of Authentication Providers

Make sure the Provider Enabled toggle is set to On, for the sake of simplicity of this tutorial we will choose:

1. User confirmation method: “Automatically confirm users”
2. Password Reset Method: “Send a password reset email”
3. Password Reset URL: “http://localhost:3000/resetPassword”
4. And then click “Save Draft”

Once your Draft has been saved. You will see a blue popup at the top, with a “Review Draft & Deploy” button, click on it and wait for a few moments.

You will see a “Deployment was successful” message in green at the top if everything goes fine. Yay!

Please note that all the screenshots were last updated in May 2022. Some UX details may have changed in more recent releases.

In the next part, we will see how we can utilize this Email Password Authentication setup in our React App:

Implement Email-Password Authentication in React using MongoDB Realm