Secure your data visualizations with Authenticated Embedding in MongoDB Charts

Now that MongoDB Charts has gotten even more embeddable via the general release of our Embedding SDK, it’s time to get secure and make the most of it by utilizing one of the core new features in the release, Authenticated Embedding.

Many users of MongoDB store sensitive information. And many people use MongoDB to make incredible applications that would benefit from integrated data visualizations of that sensitive information. With that in mind, we’ve provided the ability to integrate embedded charts with a site’s existing authentication system. This ensures that only authenticated users are able to view the embedded charts.

Today, we’re the Sales Manager at Made-Up-Company-Name Inc. We’ve got a lot of data we want to show to our regional managers as charts and tables integrated into our home-grown CRM system. This data is sensitive, so we don’t want it visible to anyone outside the sales team. Furthermore, we want to contextualize it by location: for compliance reasons, it’s important our regional managers don’t have access to data from outside their region so that we can ensure our company abides with the new legislation.

Getting Started

Made-Up-Company-Name is already an avid user of Charts, and already has a dashboard populated with data like so.

You can see our dashboard contains the names and addresses of users. We want to

• Make sure this data is secure
• Embed this chart in our CRM
• Make this data relevant to our regional managers.

So let’s do exactly that!

Secure our Data

Setting up Charts to be ready for authenticated embedding is a simple three-step process.

1. Enable authenticated embedding on the Chart
2. Enable authenticated embedding on your Data Source
3. Create an authentication provider in Charts. Our CRM system already employs Google sign-in across our application, so we’ll create a Google authentication provider to unify our security system.

With this configuration in place, our chart will not render for users who fail to authenticate with one of our authentication providers. Users attempting to render the chart regardless will see an error message indicating the chart failed to render. No peeking!

Embed the Chart

The chart rendering logic inside our CRM will look a bit like this. It’s important to call this logic when we successfully sign in with Google, which can be found on the data-onsuccess HTML field. Get more info from Google's documentation.

import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

const id_token = googleUser.getAuthResponse().id_token;

const sdk = new ChartsEmbedSDK({
          baseUrl: "https://charts.mongodb.com/a2e1-f2d3c-pebbp",        
          getUserToken: () => id_token
        });

const chart = sdk.createChart({
  chartId: '6b135aa1-8289-479c-bbe1-81bd2bad91b1',
});
 
// render the chart into a container
chart.render(document.getElementById('chart'))

Making Data Relevant & Compliant

We need to make our application compliant with local data security laws, so we need to restrict regional managers' read access to their local datasets. In order to accomplish this, we’re going to use Injected Filters.

Injected Filters & Google Authentication

With the Google authentication provider, you can protect your Charts via Google sign in. If you have a Google Project Client ID, it’s as simple as sharing that string with Charts and we’ll handle the rest.

And just like that, we’ve made our Chart secure! Now it’s time to make it localized and compliant. Thanks to Charts Injected Filters, you have the power to filter your Charts based on the authentication access token. This is true for any embedding authentication provider.

Made-Up-Company-Name Inc has set up their Google project to utilize custom token fields. More info on that here. For example, let’s create a filter on our Charts data based on the token that’s been authenticated.

This function will take the country field we’ve placed in our Employee’s Google sign-in JWT tokens and use that information to return a filter on the country field in our database. This will remove any document that doesn’t have the same country field as specified in the token.

Now all Charts displayed via this method will have this filter applied! Not only that, but users who lack this custom field in their authorization token won’t be able to see any data. We’ve made our data more secure, and brought value to our regional managers by localizing their data set.

There are hundreds of possible filters and configurations possible by combining Injected Filters and authentication, and that’s just one way our SDK can bring value to your application.

Have a Go

If Made-Up-Company-Name’s challenges are anything like your own, getting started with embedding in MongoDB Charts is easy. You can kick off with Charts for free, simply by signing up for MongoDB Cloud, deploying a free Atlas cluster, and activating Charts. From there, you can learn more by reading our documentation and exploring our embedding example apps, including working examples utilizing Google, Stitch, and JWT authentication providers.

We’d also love to find out more about how our users embed their charts. If you have suggestions on how to improve anything in Charts, use the MongoDB Feedback Engine. We use this feedback to help improve Charts, and figure out where users need help.