Implement Email-Password Authentication in React using MongoDB Realm

Build a full-stack app using MongoDB Realm GraphQL (without worrying about servers at all)

Today, we will learn how to implement Full-Stack Email-Password Authentication in React by leveraging MongoDB Realm by typing a single line of server-side code.

Setup your React App

1. 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:

npx create-react-app expengo

Make sure you have Node.js & npm installed on your machine.

1. Let’s install Realm-web into our React app:

The MongoDB Realm Web SDK enables browser-based applications to access data stored in MongoDB Atlas and interact with MongoDB Realm services like Functions, authentication & GraphQL.

npm install realm-web

Let’s install a few other npm packages to make our lives easier:

1. React-router-dom to manage navigation-related requirements in our app, run:

npm install react-router-dom

2. Material UI to help us in building beautiful components without writing a lot of CSS, run:

npm install @mui/material @emotion/styled @emotion/react

Now, let’s create 3 new directories with the following files as below:

1. ./src/pages:
2. ./src/pages/Home.page.js
3. ./src/pages/PrivateRoute.page.js
4. ./src/pages/Login.page.js
5. ./src/pages/SignUp.page.js
6. ./src/contexts
7. ./src/contexts/user.context.js
8. ./src/realm
9. ./src/realm/constants.js

Let’s open this expengo folder in our code editor, if everything has worked fine, our folder should have the following structure:

├── README.md
└──node_modules/
├── …
├── package-lock.json
├── package.json
└── public/
 ├── …
└──src/
 └──contexts/
  ├──user.context.js
 └──pages/
  ├──Home.page.js
  ├──PrivateRoute.page.js
  ├──Login.page.js
  ├──Signup.page.js
 └── realm/
  ├──constants.js
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── reportWebVitals.js
 └── setupTests.js

Connect your React App with Realm & handle user management

In this section, we will be creating functions & React components in our app to give our users the ability to Login, Signup and Logout.

• Copy your Realm App ID:

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

And paste the following code and replace the placeholder with your App Id:

export const APP_ID = “<-- 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 while using it in our ./src/App.js file.

./src/pages/PrivateRoute.page.js

Create a Login Page

./src/pages/Login.page.js

Create a Signup Page

./src/pages/Signup.page.js

Create a Homepage

A basic page with just a title and Logout button.

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

Putting it all together in App.js

./src/App.js

Launch your React app:

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

npm start

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 Login and Signup 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. Now in the next part of this blog series, we will be leveraging Realm GraphQL to perform CRUD operations. I am 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 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 for this tutorial series.