Quick Start with React - Web SDK

Atlas Device SDKs are deprecated. Refer to the deprecation page for details.

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.

Prerequisites

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.

Procedure

Set up a New React App

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

npx create-react-app realm-web-react-quickstart

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

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

cd realm-web-react-quickstart
npm install --save realm-web

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 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 });

Create React Components

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

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

Create and Export the App Component

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 = () => {
  // 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(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;

const App = () => {
  // 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;

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:

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.

Summary

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.

Welcome to the Atlas Device SDK Docs