Navigation

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.

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

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
2

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 that imports the Web SDK and uses it to instantiate a new Realm.App object:

The app object represents your Realm app. You'll use it to authenticate and manage the users that interact with your app.

3

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

4

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.

5

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.

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.

Give Feedback