Atlas Device SDK for the Web
GraphQL is deprecated. Learn More.
The Atlas Device SDK for the Web lets browser-based applications access data stored in Atlas and interact with App Services services like Functions and authentication. The Web SDK supports both JavaScript and TypeScript.
Web apps built with the SDK can query Atlas using the following methods:
The standard MongoDB query API with the MongoDB client
Unlike the other SDKs, the Web SDK only supports creating an in-memory database, not one persisted to disk.
Get Started with the Web SDK
![Functions Icon](/docs/atlas/device-sdks/images/icons/branding_2022/Technical_ATLAS_Functions3x.png)
![Atlas Device SDK Mobile Icon](/docs/atlas/device-sdks/images/icons/branding_2022/Technical_REALM_Mobile3x.png)
Working Example App
Learn by example through dissecting a working React app that uses the Web SDK and Atlas GraphQL API.
Develop Apps with the SDK
Use the Web SDK with Atlas App Services to query MongoDB directly, query a GraphQL API, invoke serverless functions, manage user authentication, and more.
Configure Atlas App Services
You can use the Web SDK to query MongoDB Atlas data directly from the browser. Perform CRUD, aggregation, and listen for database changes.
First, you must create an App Services App, set up database rules, and enable user authentication.
Connect to an Atlas App Services App
To access your App Services App from the browser, initialize the App client.
Authenticate a User
To authenticate a user, usee one of the App Services authentication providers. App Services includes custom JWT, Facebook, Google, Apple, anonymous, and built-in email/password authentication providers.
Query MongoDB
Query MongoDB directly from the browser using your authenticated user. The user can only access data that they're authorized to.
For more information, refer to Query MongoDB.
![Query MongoDB Illustration](/docs/atlas/device-sdks/static/df35a0ccd4b7c42dfd625b6974d775a7/241a1/Technical_SOFTWARE_Application_Spot.webp)
Configure Atlas GraphQL API
The Atlas GraphQL API automatically generates a hosted endpoint with GraphQL queries and mutations based on JSON schemas for the documents in your database.
Configure App Services Authentication with data access rules to control which users have access to what data. Configure the GraphQL API in Atlas App Services.
Connect to Atlas App Services
To access your App Services App from the browser, initialize the App client.
Authenticate a User
To authenticate a user, usee one of the App Services authentication providers. App Services includes custom JWT, Facebook, Google, Apple, anonymous, and built-in email/password authentication providers.
Query the GraphQL API
Query the GraphQL API using a GraphQL client from the browser. Authenticate requests with user credentials.
Learn how to query the GraphQL API with the Apollo Client.
![API Integration Image](/docs/atlas/device-sdks/static/ced825a70ae1817ef61faf4234b9ba32/241a1/Technical_ACTION_ConnectSettings_Spot.webp)
Call Serverless Functions
You can call serverless Functions from your client application that run in an App Services backend.
Authenticate Users
Authenticate users with built-in and third-party authentication providers. Use the authenticated user to access App Services.
![App Services Illustration](/docs/atlas/device-sdks/static/292f9c683e68aeabfeae94ade95b9dba/241a1/Technical_ACTION_WrenchSettings_Spot.webp)
Recommended Reading
![Reference Icon](/docs/atlas/device-sdks/images/icons/branding_2022/General_CONTENT_Tutorial3x.png)
![React Logo Icon](/docs/atlas/device-sdks/images/icons/react-logo-icon.png)
Quick Start with React
Learn how to add the Web SDK to your React application.
![Next.js Logo Icon](/docs/atlas/device-sdks/images/icons/nextjs-logo-icon.png)
Next.js Integration Guide
Learn all the ways that you can use the Web SDK with your Next.js application.
Example Projects
Explore engineering and expert-provided example projects to learn best practices and common development patterns using the Web SDK. Check out the Example Projects page for more sample apps.
![Atlas Device SDK Offline Icon](/docs/atlas/device-sdks/images/icons/branding_2023/Technical_REALM_Offline10x.png)
Offline Login and Database Access
Log in a Device Sync user and open a synced database offline.
![Users Icon](/docs/atlas/device-sdks/images/icons/branding_2023/General_CONTENT_Users10x.png)