Docs Menu

Docs HomeRealm

Realm - React Quick Start

This guide shows you how to set up a basic React web application that connects to your Atlas App Services backend and authenticates an anonymous user.

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

  • JavaScript CodeSandbox

  • TypeScript CodeSandbox

  • This guide assumes that you have already created an Atlas App Services backend 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 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 });
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 an App Services backend and authenticates an anonymous user.

←  Realm Web Quick StartAtlas App Services →
Give Feedback
© 2022 MongoDB, Inc.

About

  • Careers
  • Investor Relations
  • Legal Notices
  • Privacy Notices
  • Security Information
  • Trust Center
© 2022 MongoDB, Inc.