Configure Email/Password Authentication in MongoDB Atlas App Services
Rate this tutorial
One of the things I like the most is building full-stack apps using Node.js, React, and MongoDB. Every time I get a billion-dollar idea, I immediately start building it using this tech stack. No matter what app I’m working on, there are a few features that are common:
- Authentication and authorization: login, signup, and access controls.
- Basic CRUD (Create, Read, Update, and Delete) operations.
- Data analytics.
- Web application deployment.
And without a doubt, all of them play an essential role in any full-stack application. But still, they take a lot of time and energy to build and are mostly repetitive in nature. Therefore, we are left with significantly less time to build the features that our customers are waiting for.
In an ideal scenario, your time as a developer should be spent on implementing features and not reinventing the wheel. With MongoDB Atlas App Services, you don’t have to worry about that. All you have to do is connect your client app to the service you need and you’re ready to rock!
Throughout this series, you will learn how to build a full stack web application with MongoDB Atlas App Services, GraphQL, and React. We will be building an expense manager application called Expengo.
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.
In this blog, we’ll configure email/password authentication on Atlas App Services. In the subsequent part of this series, we’ll integrate this with our React app.
MongoDB Atlas is a developer data platform integrating a multi-cloud database service with a set of data services. Atlas App Services provide secure serverless backend services and APIs to save you hours of coding.
For authentication, you can choose from many different providers such as email/password, API key, Google, Apple, and Facebook. For this tutorial, we’ll use the email/password authentication provider.
If you haven’t already, deploy a free tier MongoDB Atlas cluster. 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 create an App Service and link to it.
Now, click on the “App Services” tab as highlighted 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 App Service.”
Click on “Close Guides” in the next pop-up screen.
Now click on “Authentication” in the side-bar. 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.
On this page, we may also configure the user confirmation settings and the password reset settings for our application. For the sake of simplicity of this tutorial, we will choose:
- User confirmation method: “Automatically confirm users.”
- Password reset method: “Send a password reset email.”
- We're not going to implement a password reset functionality in our client application. With that said, the URL you enter here doesn't really matter. If you want to learn how to reset passwords with App Services, check out the dedicated documentation.
- Click “Save Draft.”
Once your Draft has been saved, you will see a blue pop-up at the top, with a “Review Draft & Deploy” button. Click on it and wait for a few moments.
You will see a pop-up displaying all the changes you made in this draft. Click on “Deploy” to deploy these changes:
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 August 2022. Some UX details may have changed in more recent releases.
In the next article of the series, we will learn how we can utilize this email/password authentication provider in our React app.