Level up your React app with Amazon QuickSight: How to embed your dashboard for anonymous access

Using embedded analytics from Amazon QuickSight can simplify the process of equipping your application with functional visualizations without any complex development. There are multiple ways to embed QuickSight dashboards into application. In this post, we look at how it can be done using React and the Amazon QuickSight Embedding SDK.

Dashboard consumers often don’t have a user assigned to their AWS account and therefore lack access to the dashboard. To enable them to consume data, the dashboard needs to be accessible for anonymous users. Let’s look at the steps required to enable an unauthenticated user to view your QuickSight dashboard in your React application.

Solution overview

Our solution uses the following key services:

• Amazon API Gateway
• AWS Identity and Access Management (IAM)
• AWS Lambda
• Amazon QuickSight (with session capacity pricing enabled)

After loading the web page on the browser, the browser makes a call to API Gateway, which invokes a Lambda function that calls the QuickSight API to generate a dashboard URL for an anonymous user. The Lambda function needs to assume an IAM role with the required permissions. The following diagram shows an overview of the architecture.

Prerequisites

You must have the following prerequisites:

• An AWS account
• A QuickSight account with session capacity pricing enabled
• QuickSight dashboards (for setup instructions, refer to Tutorial: Create an Amazon QuickSight dashboard using sample data)
• A sample React application (to get started, refer to Start a New React Project)

Set up permissions for unauthenticated viewers

In your account, create an IAM policy that your application will assume on behalf of the viewer:

1. On the IAM console, choose Policies in the navigation pane.
2. Choose Create policy.
3. On the JSON tab, enter the following policy code:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "quicksight:GenerateEmbedUrlForAnonymousUser"
            ],
            "Resource": [
                "arn:aws:quicksight:*:*:namespace/default",
				"arn:aws:quicksight:*:*:dashboard/<YOUR_DASHBOARD_ID1>",
				"arn:aws:quicksight:*:*:dashboard/<YOUR_DASHBOARD_ID2>"
            ],
            "Effect": "Allow"
        },
        {
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": "*",
            "Effect": "Allow"
        }
    ]
}

Make sure to change the value of <YOUR_DASHBOARD_ID> to the value of the dashboard ID. Note this ID to use in a later step as well.

For the second statement object with logs, permissions are optional. It allows you to create a log group with the specified name, create a log stream for the specified log group, and upload a batch of log events to the specified log stream.

In this policy, we allow the user to perform the GenerateEmbedUrlForAnonymousUser action on the dashboard ID within the list of dashboard IDs inserted in the placeholder.

4. Enter a name for your policy (for example, AnonymousEmbedPolicy) and choose Create policy.

Next, we create a role and attach this policy to the role.

5. Choose Roles in the navigation pane, then choose Create role.

6. Choose Lambda for the trusted entity.
7. Search for and select AnonymousEmbedPolicy, then choose Next.
8. Enter a name for your role, such as AnonymousEmbedRole.
9. Make sure the policy name is included in the Add permissions section.
10. Finish creating your role.

You have just created the AnonymousEmbedRole execution role. You can now move to the next step.

Generate an anonymous embed URL Lambda function

In this step, we create a Lambda function that interacts with QuickSight to generate an embed URL for an anonymous user. Our domain needs to be allowed. There are two ways to achieve the integration of Amazon QuickSight:

1. By adding the URL to the list of allowed domains in the Amazon QuickSight admin console (explained later in [Optional] Add your domain in QuickSight section).
2. [Recommended] By adding the embed URL request during runtime in the API call. Option 1 is recommended when you need to persist the allowed domains. Otherwise, the domains will be removed after 30 minutes, which is equivalent to the session duration. For other use cases, it is recommended to use the second option (described and implemented below).

On the Lambda console, create a new function.

1. Select Author from scratch.
2. For Function name, enter a name, such as AnonymousEmbedFunction.
3. For Runtime¸ choose Python 3.9.
4. For Execution role¸ choose Use an existing role.
5. Choose the role AnonymousEmbedRole.
6. Choose Create function.
7. On the function details page, navigate to the Code tab and enter the following code:

   import json, boto3, os, re, base64
   
   def lambda_handler(event, context):
   
       try:
           def getQuickSightDashboardUrl(awsAccountId, dashboardIdList, dashboardRegion):
               #Create QuickSight client
               quickSight = boto3.client('quicksight', region_name=dashboardRegion);
               #Construct dashboardArnList from dashboardIdList
               dashboardArnList=[ 'arn:aws:quicksight:'+dashboardRegion+':'+awsAccountId+':dashboard/'+dashboardId for dashboardId in dashboardIdList]
               #Generate Anonymous Embed url
               response = quickSight.generate_embed_url_for_anonymous_user(
                        AwsAccountId = awsAccountId,
                        Namespace = 'default',
                        ExperienceConfiguration = {'Dashboard':{'InitialDashboardId':dashboardIdList[0]}},
                        AuthorizedResourceArns = dashboardArnList,
                        SessionLifetimeInMinutes = 60
                    )
               return response
           
   
           #Get AWS Account Id
           awsAccountId = context.invoked_function_arn.split(':')[4]
       
           #Read in the environment variables
           dashboardIdList = re.sub(' ','',os.environ['DashboardIdList']).split(',')
           dashboardRegion = os.environ['DashboardRegion']
       
           response={} 
       
           response = getQuickSightDashboardUrl(awsAccountId, dashboardIdList, dashboardRegion)
          
           return {'statusCode':200,
                   'headers': {"Access-Control-Allow-Origin": "http://localhost:3000",
                               "Content-Type":"text/plain"},
                   'body':json.dumps(response)
                   } 
   
   
       except Exception as e: #catch all
           return {'statusCode':400,
                   'headers': {"Access-Control-Allow-Origin": "http://localhost:3000",
                               "Content-Type":"text/plain"},
                   'body':json.dumps('Error: ' + str(e))
                   }         

If you don’t use localhost, replace http://localhost:3000 in the returns with the hostname of your application. To move to production, don’t forget to replace http://localhost:3000 with your domain.

9. On the Configuration tab, under General configuration, choose Edit.
10. Increase the timeout from 3 seconds to 30 seconds, then choose Save.
11. Under Environment variables, choose Edit.
12. Add the following variables:
    1. Add DashboardIdList and list your dashboard IDs.
    2. Add DashboardRegion and enter the Region of your dashboard.
13. Choose Save.

Your configuration should look similar to the following screenshot.

14. On the Code tab, choose Deploy to deploy the function.

Set up API Gateway to invoke the Lambda function

To set up API Gateway to invoke the function you created, complete the following steps:

1. On the API Gateway console, navigate to the REST API section and choose Build.
2. Under Create new API, select New API.
3. For API name, enter a name (for example, QuicksightAnonymousEmbed).
4. Choose Create API.

5. On the Actions menu, choose Create resource.
6. For Resource name, enter a name (for example, anonymous-embed).

Now, let’s create a method.

7. Choose the anonymous-embed resource and on the Actions menu, choose Create method.
8. Choose GET under the resource name.
9. For Integration type, select Lambda.
10. Select Use Lambda Proxy Integration.
11. For Lambda function, enter the name of the function you created.
12. Choose Save, then choose OK.

Now we’re ready to deploy the API.

13. On the Actions menu, choose Deploy API.
14. For Deployment stage, select New stage.
15. Enter a name for your stage, such as embed.
16. Choose Deploy.

[Optional] Add your domain in QuickSight

If you added Allowed domains in Generate an anonymous embed URL Lambda function part, feel free to move to Turn on capacity pricing section.

To add your domain to the allowed domains in QuickSight, complete the following steps:

1. On the QuickSight console, choose the user menu, then choose Manage QuickSight.

2. Choose Domains and Embedding in the navigation pane.
3. For Domain, enter your domain (http://localhost:<PortNumber>).

Make sure to replace <PortNumber> to match your local setup.

4. Choose Add.

Make sure to replace the localhost domain with the one you will use after testing.

Turn on capacity pricing

If you don’t have session capacity pricing enabled, follow the steps in this section. It’s mandatory to have this function enabled to proceed further.

Capacity pricing allows QuickSight customers to purchase reader sessions in bulk without having to provision individual readers in QuickSight. Capacity pricing is ideal for embedded applications or large-scale business intelligence (BI) deployments. For more information, visit Amazon QuickSight Pricing.

To turn on capacity pricing, complete the following steps:

1. On the Manage QuickSight page, choose Your Subscriptions in the navigation pane.
2. In the Capacity pricing section, select Get monthly subscription.
3. Choose Confirm subscription.

To learn more about capacity pricing, see New in Amazon QuickSight – session capacity pricing for large scale deployments, embedding in public websites, and developer portal for embedded analytics.

Set up your React application

To set up your React application, complete the following steps:

1. In your React project folder, go to your root directory and run npm i amazon-quicksight-embedding-sdk to install the amazon-quicksight-embedding-sdk package.
2. In your App.js file, replace the following:
   1. Replace YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME with your API Gateway invoke URL and your resource name (for example, https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed).
   2. Replace YOUR_DASHBOARD1_ID with the first dashboardId from your DashboardIdList. This is the dashboard that will be shown on the initial render.
   3. Replace YOUR_DASHBOARD2_ID with the second dashboardId from your DashboardIdList.

The following code snippet shows an example of the App.js file in your React project. The code is a React component that embeds a QuickSight dashboard based on the selected dashboard ID. The code contains the following key components:

• State hooks – Two state hooks are defined using the useState() hook from React:
  • dashboard – Holds the currently selected dashboard ID.
  • quickSightEmbedding – Holds the QuickSight embedding object returned by the embedDashboard() function.
• Ref hook – A ref hook is defined using the useRef() hook from React. It’s used to hold a reference to the DOM element where the QuickSight dashboard will be embedded.
• useEffect() hook – The useEffect() hook is used to trigger the embedding of the QuickSight dashboard whenever the selected dashboard ID changes. It first fetches the dashboard URL for the selected ID from the QuickSight API using the fetch() method. After it retrieves the URL, it calls the embed() function with the URL as the argument.
• Change handler – The changeDashboard() function is a simple event handler that updates the dashboard state whenever the user selects a different dashboard from the drop-down menu. As soon as new dashboard ID is set, the useEffect hook is triggered.
• 10-millisecond timeout – The purpose of using the timeout is to introduce a small delay of 10 milliseconds before making the API call. This delay can be useful in scenarios where you want to avoid immediate API calls or prevent excessive requests when the component renders frequently. The timeout gives the component some time to settle before initiating the API request. Because we’re building the application in development mode, the timeout helps avoid errors caused by the double run of useEffect within StrictMode. For more information, refer to Updates to Strict Mode.

See the following code:

import './App.css';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

 function App() {
  const dashboardRef = useRef([]);
  const [dashboardId, setDashboardId] = useState('YOUR_DASHBOARD1_ID');
  const [embeddedDashboard, setEmbeddedDashboard] = useState(null);
  const [dashboardUrl, setDashboardUrl] = useState(null);
  const [embeddingContext, setEmbeddingContext] = useState(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      fetch("YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME"
      ).then((response) => response.json()
      ).then((response) => {
        setDashboardUrl(response.EmbedUrl)
      })
    }, 10);
    return () => clearTimeout(timeout);
  }, []);

  const createContext = async () => {
    const context = await createEmbeddingContext();
    setEmbeddingContext(context);
  }

  useEffect(() => {
    if (dashboardUrl) { createContext() }
  }, [dashboardUrl])

  useEffect(() => {
    if (embeddingContext) { embed(); }
  }, [embeddingContext])

  const embed = async () => {

    const options = {
      url: dashboardUrl,
      container: dashboardRef.current,
      height: "500px",
      width: "600px",
    };

    const newEmbeddedDashboard = await embeddingContext.embedDashboard(options);
    setEmbeddedDashboard(newEmbeddedDashboard);
  };

  useEffect(() => {
    if (embeddedDashboard) {
      embeddedDashboard.navigateToDashboard(dashboardId, {})
    }
  }, [dashboardId])

  const changeDashboard = async (e) => {
    const dashboardId = e.target.value
    setDashboardId(dashboardId)
  }

  return (
    <>
      <header>
        <h1>Embedded <i>QuickSight</i>: Build Powerful Dashboards in React</h1>
      </header>
      <main>
        <p>Welcome to the QuickSight dashboard embedding sample page</p>
        <p>Please pick a dashboard you want to render</p>
        <select id='dashboard' value={dashboardId} onChange={changeDashboard}>
          <option value="YOUR_DASHBOARD1_ID">YOUR_DASHBOARD1_NAME</option>
          <option value="YOUR_DASHBOARD2_ID">YOUR_DASHBOARD2_NAME</option>
        </select>
        <div ref={dashboardRef} />
      </main>
    </>
  );
};

export default App

Next, replace the contents of your App.css file, which is used to style and layout your web page, with the content from the following code snippet:

body {
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

h1 {
  margin: 0;
}

main {
  margin: 20px;
  text-align: center;
}

p {
  margin-bottom: 20px;
}

a {
  color: #000000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

i {
  color: orange;
  font-style: normal;
}

Now it’s time to test your app. Start your application by running npm start in your terminal. The following screenshots show examples of your app as well as the dashboards it can display.

Conclusion

In this post, we showed you how to embed a QuickSight dashboard into a React application using the AWS SDK. Sharing your dashboard with anonymous users allows them to access your dashboard without granting them access to your AWS account. There are also other ways to share your dashboard anonymously, such as using 1-click public embedding.

Join the Quicksight Community to ask, answer and learn with others and explore additional resources.

Please take this survey about QuickSight Embed to help us understand what we need to improve.

About the Author

Adrianna is a Solutions Architect at AWS Global Financial Services. Having been a part of Amazon since August 2018, she has had the chance to be involved both in the operations as well as the cloud business of the company. Currently, she builds software assets which demonstrate innovative use of AWS services, tailored to a specific customer use cases. On a daily basis, she actively engages with various aspects of technology, but her true passion lies in combination of web development and analytics.