Docs Menu

Docs HomeMongoDB Charts

Embed a Chart Authenticated with Google Sign-In

On this page

  • Prerequisites
  • Procedures
  • Enable Authenticated Embedding for your Chart
  • Create a Google Client ID
  • Configure Charts to use Google Sign-In
  • Create a Web App to Display Your Chart
  • Customize the Node.js App

This tutorial shows you how to configure a sample application to render an embedded, Google-authenticated chart on a web page.

Users must sign in with their Google account to view the chart. If a user doesn't sign in with Google, Charts doesn't render the authenticated chart view.

  • You must be an Atlas Project Owner to configure embedding authentication providers for your linked Charts instance.

  • Create a New Dashboard

  • Create a Chart

Enable authenticated embedding to generate a Charts Base URL and a chart ID. You will need your Charts Base URL and chart ID to display your chart on a web page.


From your dashboard page, select the dashboard containing the chart you wish to embed.


From the dashboard, click at the top-right of the chart to access its embedding information. Select Embed chart from the dropdown menu.


If a chart is on a dashboard that has embedding enabled, the Embed Chart option is automatically enabled. Therefore, you can't select the Embed chart option for charts within dashboards that have embedding enabled.


If you have already enabled external sharing on the data source this chart uses, skip this step. If you haven't yet enabled embedding on the data source, you can do so now. Click the Configure external sharing link.

Embed authenticated chart

You can specify a function to inject a MongoDB filter document for each user who views the chart. This is useful for rendering user-specific charts.


The following filter function only renders data where the ownerId field of a document matches the value of the Embedding Authentication Provider's token's sub field:

function getFilter(context) {
return { ownerId: context.token.sub };


See also:

To learn more about injecting filters per user, see Inject User-Specific Filters.


Specify the fields on which chart viewers can filter data. By default, no fields are specified, meaning the chart cannot be filtered until you explicitly allow at least one field.


See also:

To learn more about filterable fields, see Specify Filterable Fields.


Use these values in your application code together with your Embedded Authentication Provider attributes to embed your chart.

Create a Google API Console project to generate a Google Client ID. You will need your Google Client ID to configure Charts to use Google Sign-In.

To create a Google API Console project, see Integrating Google Sign-In into your web app.

  1. If Charts is not already displayed, click Charts in the navigation bar.

  2. Click Embedding in the sidebar.

  3. Click the Authentication Settings tab.


MongoDB offers a pre-built example app that shows how to use the Embedding SDK to display an embedded chart using Google authentication.

To run the example app, clone the MongoDB Charts Embedding Example - Google Authentication repository from GitHub and follow the instructions in the Readme file to begin using the app. You can run the app as-is with a sample chart, or you can customize it to use an existing chart.

All the lines you need to edit are marked with a comment containing ~REPLACE~.


The file index.html is located in the root directory of the authenticated-google project.


Replace the existing Google Client ID with your Google Client ID.

<!-- Optional: ~REPLACE~ content with your Google Client ID -->

Your Google Client ID is visible after creating a Google API Console project. See Create a Google Client ID for instructions on creating a Google Client ID.


Replace the existing baseUrl with the Base URL of the chart you want to display.

const sdk = new ChartsEmbedSDK({
baseUrl: "", // Optional: ~REPLACE~ with your Charts URL
getUserToken: () => id_token

Your Charts Base URL is visible in the embedding options modal window. See Embedding SDK for detailed instructions on enabling embedding for a chart.


Replace the existing chartId with the ID of the chart you want to display.

const chart = sdk.createChart({
chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID

Your chart ID is visible in the embedding options modal window. See Embedding SDK for detailed instructions on enabling embedding for a chart.

After you finish customizing the app, it's ready to run.

←  Embedding TutorialsEmbed a Chart Authenticated with Atlas App Services →
Share Feedback
© 2023 MongoDB, Inc.


  • Careers
  • Investor Relations
  • Legal Notices
  • Privacy Notices
  • Security Information
  • Trust Center
© 2023 MongoDB, Inc.