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-apprather than using a version that's 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:
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.