MongoDB Realm - React Quickstart

This guide shows you how to set up a basic React web application that connects to your MongoDB Realm app and authenticates an anonymous user.

We put together a finished version of this quickstart on CodeSandbox. All you have to do is paste in your Realm App ID to connect to your app.

Prerequisites

This guide assumes that you have already created a MongoDB Realm application and enabled anonymous authentication.
To create and run this application you will need npm installed on your machine.
The create-react-app documentation recommends that you install npx to run create-react-app rather than using a version that's installed on your machine.

Procedure

Set up a New React App

Generate a new application template using create-react-app:

Navigate into the new app and install the realm-web package:

cd realm-web-react-quickstart
npm install --save realm-web

Import Dependencies & Connect to Your Realm App

The Realm Web SDK contains everything you need to connect to a MongoDB Realm application from a browser application. In /src/App.js, add the following code to import the Web SDK.

import * as Realm from "realm-web";

Now uses the imported package to instantiate a new Realm.App. The app object represents your Realm app. You'll use it to authenticate and manage the users that interact with your app.

// Add your App ID
const app = new Realm.App({ id: APP_ID });

Create React Components

In /src/App.js, add the following components that display details about a given user and allow users to log in.

Create and Export the App Component

In /src/App.js, overwrite the existing App component with the following component that stores the current user in local state and conditionally renders either details about the current user or a login screen if no user is currently authenticated.

Run the App

You're now ready to connect to your Realm app and log in! Make sure you've saved your changes to /src/App.js and then run the following command from the project root:

yarn start

This starts a local web server that serves your application. If successful, you should see the following output in your shell:

Compiled successfully!
You can now view realm-quickstart-web in the browser.
  Local:  http://localhost:3000

Open http://localhost:3000 in your browser and test that you can successfully log in as an anonymous user.

Summary

If you have successfully completed this guide, you have created a React application that can connect to a MongoDB Realm app and authenticates an anonymous user.

← Realm Web Quick Start Apollo Client (React) →