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.

1

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

npx create-react-app realm-web-react-quickstart --template=typescript

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

cd realm-react-quickstart
yarn add 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:

import * as Realm from "realm-web";
const REALM_APP_ID = "<Your App ID>"; // e.g. myapp-abcde
const app: Realm.App = new Realm.App({ id: REALM_APP_ID });

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.

// Create a component that displays the given user's details
const UserDetail: React.FC<{ user: Realm.User }> = ({ user }) => {
return (
<div> <h1>Logged in with anonymous id: {user.id}</h1> </div>
);
}
// Create a component that lets an anonymous user log in
const Login: React.FC<{ setUser: (user: Realm.User) => void }> = ({ setUser }) => {
const loginAnonymous = async () => {
const user: Realm.User = await app.logIn(Realm.Credentials.anonymous());
setUser(user);
};
return <button onClick={loginAnonymous}>Log In</button>;
}
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.

const App: React.FC = () => {
// Keep the logged in Realm user in local state. This lets the app re-render
// whenever the current user changes (e.g. logs in or logs out).
const [user, setUser] = React.useState<Realm.User | null>(app.currentUser);
// If a user is logged in, show their details. Otherwise, show the login screen.
return (
<div className="App"> <div className="App-header"> {user ? <UserDetail user={user} /> : <Login setUser={setUser} />} </div> </div>
);
}
export default App;
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