Embed a Chart Authenticated with Google Sign-In

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.



Enable Authenticated Embedding for your 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.


Select a dashboard.

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


Select a chart.

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


Enable external sharing on the data source

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.


Select the Authenticated tab in the dialog window.

Embed authenticated chart

Toggle Enable authenticated access to On.


(Optional) Specify a filter function to inject per user.

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.


(Optional) Specify filterable fields for your chart.

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.


Copy the Chart Base URL and Chart ID

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

Create a Google Client ID

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.

Configure Charts to use Google Sign-In


From the Embedding Authentication Providers section, click Add New Provider.


In the Name field, enter a descriptive name for the provider.


From the Provider list, select Google.


In the Google Client Id field, enter the Google Client ID you created.


Click Save.

Create a Web App to Display Your Chart

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.

Customize the Node.js App

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

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


Open the file index.html in a text editor.

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


Enter your Google Client ID

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.


Enter your Charts Base URL

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 Embed Charts with the Embedding SDK for detailed instructions on enabling embedding for a chart.


Enter your chart ID

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 Embed Charts with the Embedding SDK for detailed instructions on enabling embedding for a chart.