Implement Email/Password Authentication in React

Sourabh BagrechaPublished Aug 24, 2022 • Updated Aug 24, 2022

React Atlas JavaScript

Rate this tutorial

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:

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:

Code Snippet

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:

Code Snippet

The process may take up to a minute to complete. After it’s finished, navigate to your new project:

Code Snippet

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.

Code Snippet

We’ll also install a few other npm packages to make our lives easier:

React-router-dom to manage navigation in our app:
Code Snippetnpm install react-router-dom
Material UI to help us build beautiful components without writing a lot of CSS:
Code Snippetnpm install @mui/material @emotion/styled @emotion/react

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.

Code Snippet

Open the expengo directory in your code editor. The project directory should have the following structure:

Code Snippet

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:

Now open this file: ./src/realm/constants.js

Paste the following code and replace the placeholder with your app Id:

Code Snippet

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

Code Snippet

import { createContext, useState } from "react";
import { App, Credentials } from "realm-web";
import { APP_ID } from "../realm/constants";
 
// Creating a Realm App Instance
const app = new App(APP_ID);
 
// Creating a user context to manage and access all the user related functions
// across different components and pages.
export const UserContext = createContext();
 
export const UserProvider = ({ children }) => {
 const [user, setUser] = useState(null);
 
 // Function to log in user into our App Service app using their email & password
 const emailPasswordLogin = async (email, password) => {
   const credentials = Credentials.emailPassword(email, password);
   const authenticatedUser = await app.logIn(credentials);
   setUser(authenticatedUser);
   return authenticatedUser;
 };
 
 // Function to sign up user into our App Service app using their email & password
 const emailPasswordSignup = async (email, password) => {
   try {
     await app.emailPasswordAuth.registerUser(email, password);
     // Since we are automatically confirming our users, we are going to log in
     // the user using the same credentials once the signup is complete.
     return emailPasswordLogin(email, password);
   } catch (error) {
     throw error;
   }
 };
 
 // Function to fetch the user (if the user is already logged in) from local storage
 const fetchUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.refreshCustomData();
     // Now, if we have a user, we are setting it to our user context
     // so that we can use it in our app across different components.
     setUser(app.currentUser);
     return app.currentUser;
   } catch (error) {
     throw error;
   }
 }
 
 // Function to logout user from our App Services app
 const logOutUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.logOut();
     // Setting the user to null once loggedOut.
     setUser(null);
     return true;
   } catch (error) {
     throw error
   }
 }
 
 return <UserContext.Provider value={{ user, setUser, fetchUser, emailPasswordLogin, emailPasswordSignup, logOutUser }}>
   {children}
 </UserContext.Provider>;
}

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

Code Snippet

Next, let’s add a login page.

./src/pages/Login.page.js

Code Snippet

import { Button, TextField } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Login = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // We are consuming our user-management context to
 // get & set the user details here
 const { user, fetchUser, emailPasswordLogin } = useContext(UserContext);
 
 // We are using React's "useState" hook to keep track
 //  of the form values.
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // This function will be called whenever the user edits the form.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 // This function will redirect the user to the
 // appropriate page once the authentication is done.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // Once a user logs in to our app, we don’t want to ask them for their
 // credentials again every time the user refreshes or revisits our app, 
 // so we are checking if the user is already logged in and
 // if so we are redirecting the user to the home page.
 // Otherwise we will do nothing and let the user to login.
 const loadUser = async () => {
   if (!user) {
     const fetchedUser = await fetchUser();
     if (fetchedUser) {
       // Redirecting them once fetched.
       redirectNow();
     }
   }
 }
 
 // This useEffect will run only once when the component is mounted.
 // Hence this is helping us in verifying whether the user is already logged in
 // or not.
 useEffect(() => {
   loadUser(); // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 
 // This function gets fired when the user clicks on the "Login" button.
 const onSubmit = async (event) => {
   try {
     // Here we are passing user details to our emailPasswordLogin
     // function that we imported from our realm/authentication.js
     // to validate the user credentials and log in the user into our App.
     const user = await emailPasswordLogin(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
       if (error.statusCode === 401) {
          alert("Invalid username/password. Try again!");
      } else {
          alert(error);
      }
 
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Login</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Login
   </Button>
   <p>Don't have an account? <Link to="/signup">Signup</Link></p>
 </form>
}
 
export default Login;

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

Code Snippet

import { Button, TextField } from "@mui/material";
import { useContext, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Signup = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // As explained in the Login page.
 const { emailPasswordSignup } = useContext(UserContext);
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // As explained in the Login page.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 
 // As explained in the Login page.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // As explained in the Login page.
 const onSubmit = async () => {
   try {
     const user = await emailPasswordSignup(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
     alert(error);
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Signup</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Signup
   </Button>
   <p>Have an account already? <Link to="/login">Login</Link></p>
 </form>
}
 
export default Signup;

Create a homepage

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

./src/pages/Home.page.js:

Code Snippet

Putting it all together in App.js

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

./src/App.js

Code Snippet

Launch your React app

All have to do now is run the following command from your project directory:

Code Snippet

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!

Rate this tutorial

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

Tutorial

How to Write Unit Tests for MongoDB Atlas Functions

Sep 23, 2022

Tutorial

Application Deployment in Kubernetes with the MongoDB Atlas Operator

Sep 21, 2022

Tutorial

Microsoft Blazor Tutorial (1/5): Building a Status Page

Sep 07, 2022

Code Example

myLeG

Jul 07, 2022

Implement Email/Password Authentication in React
Set up your React web application
Connect your React app with App Services and handle user management
Create a PrivateRoute page
Create a login page
Create a signup page
Create a homepage
Putting it all together in App.js
Launch your React app
Conclusion

Atlas

Implement Email/Password Authentication in React

Implement Email/Password Authentication in React

Set up your React web application

Create the React app

Add required dependencies

Scaffold the application structure

Connect your React app with App Services and handle user management

Create a React Context for user management

Create a PrivateRoute page

Create a homepage

Putting it all together in App.js

Launch your React app

Conclusion

This is part of a series

Fullstack Web App with MongoDB Atlas App Services, GraphQL, and React

Up Next

More in this series

Related

How to Write Unit Tests for MongoDB Atlas Functions

Application Deployment in Kubernetes with the MongoDB Atlas Operator

Microsoft Blazor Tutorial (1/5): Building a Status Page

myLeG

Table of Contents

Atlas

Implement Email/Password Authentication in React

Implement Email/Password Authentication in React

Set up your React web application

Create the React app

Add required dependencies

Scaffold the application structure

Connect your React app with App Services and handle user management

Create a React Context for user management

Create a PrivateRoute page

Create a login page

Create a signup page

Create a homepage

Putting it all together in App.js

Launch your React app

Conclusion

This is part of a series

Fullstack Web App with MongoDB Atlas App Services, GraphQL, and React

Up Next

More in this series

Related

How to Write Unit Tests for MongoDB Atlas Functions

Application Deployment in Kubernetes with the MongoDB Atlas Operator

Microsoft Blazor Tutorial (1/5): Building a Status Page

myLeG

Table of Contents