Navigation

Realm Web Quick Start

Overview

This page shows you how to connect the Realm Web SDK to a MongoDB Realm application, authenticate a user, and work with data. Before you begin, you’ll need to create a Realm app for your web app to use.

Check Out the Tutorial

This page contains only the essential information that you need to set up a MongoDB Realm application. If you prefer to follow a guided tutorial that shows you step-by-step how to set up a working app, check out the Web Tutorial where you’ll build a React web app that connects to the Task Tracker backend and uses the GraphQL API.

Install the Web SDK

npm install realm-web
yarn add realm-web

To load the Realm Web SDK from a content delivery network as a global variable, add the following <script> tag to the <head> of your HTML file:

<script src="https://unpkg.com/realm-web@0.8.0/dist/bundle.iife.js"></script>

Import the Web SDK

Near the top of any JavaScript or TypeScript file that uses Realm, add the following import statement:

import * as Realm from "realm-web";
import * as Realm from "realm-web";

Note

If you loaded the SDK using a <script> tag then you don’t need to import the SDK to use it. Instead, you can access it using the global Realm variable.

Initialize the App

To use MongoDB Realm features such as user authentication and functions, you must access your Realm app using your App ID. You can find your App ID in the Realm UI.

const app: Realm.App = new Realm.App({ id: "<Your App ID>" });
const app = new Realm.App({ id: "<Your App ID>" });

Authenticate a User

When anonymous authentication is enabled, users can log into your app without providing any identifying information:

// Create an anonymous credential
const credentials = Realm.Credentials.anonymous();
try {
  // Authenticate the user
  const user: Realm.User = await app.logIn(credentials);
  // `App.currentUser` updates to match the logged in user
  assert(user.id === app.currentUser.id)
  return user
} catch(err) {
  console.error("Failed to log in", err);
}
// Create an anonymous credential
const credentials = Realm.Credentials.anonymous();
try {
  // Authenticate the user
  const user = await app.logIn(credentials);
  // `App.currentUser` updates to match the logged in user
  assert(user.id === app.currentUser.id)
  return user
} catch(err) {
  console.error("Failed to log in", err);
}

Realm provides many additional ways to authenticate, register, and link users.

Call a Function

To call a function, use the App.functions interface to call your serverless functions as if they were a regular JavaScript function defined on the object.

const summed: number = await app.functions.sum(2,3);
assert(summed === 5);
const summed = await app.functions.sum(2,3);
assert(summed === 5);

Use the GraphQL API

To execute CRUD operations and call custom resolvers through the GraphQL API, we recommend that you use a third-party GraphQL library such as Apollo Client. To authenticate your GraphQL request, include a valid user token in the Authorization header of the request.