MongoDB Realm - React Quickstart¶
Author: MongoDB Documentation Team
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.
Time required: 10 minutes
What You’ll Need¶
This guide assumes that you have already created a MongoDB Realm application and enabled anonymous authentication. For details on how to do this, see Create a Realm App and Enable Anonymous Authentication.
Check Your Environment¶
To create and run this application you will need npm installed on your machine.
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 that imports the Web SDK and uses it to instantiate a new
app object represents your Realm app. You’ll use it to authenticate
and manage the users that interact with your app.
Create React Components¶
/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¶
/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
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:
This starts a local web server that serves your application. If successful, you should see the following output in your shell:
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.