Embed Quick Sight visuals using Cognito user authentication

Embedding analytics into a React application introduces complexity when you need per-user authentication. Building the identity layer that bridges Amazon Cognito and Amazon Quick Sight so that each person sees only the data their role permits adds layers of complexity that most tutorials skip. With a dedicated identity layer, you can implement fine-grained access governance for every embedded visual.

Amazon Quick is the unified analytics service from AWS. It combines business intelligence, advanced analytics capabilities, and enterprise search into a single service. Amazon Quick Sight is the business intelligence engine within Amazon Quick that powers the embedded analytics experience in your application.

This post shows you how to embed individual Amazon Quick Sight visuals into React applications with registered user authentication through Amazon Cognito. Embedding at the visual level, rather than full dashboards, gives you granular control over layout and user experience. You integrate specific charts, graphs, and metrics directly into your application interface, reusing existing dashboard visuals without building standalone dashboards for each use case.

The solution is lightweight by design. The AWS Lambda function generates scoped embed URLs quickly, including first-time user provisioning. The solution can deploy rapidly using a single AWS CloudFormation stack. Each embed URL remains valid for an extended period, minimizing re-authentication friction during sessions. By the end of this post, you will have built the full pipeline from Cognito user creation through Lambda-based URL generation to a working React front end that renders individually embedded Quick Sight visuals with per-user access control.

The solution follows a four-layer serverless architecture:

Figure 1: Architecture diagram showing the complete request flow

User synchronization and role-based access control

Each Amazon Cognito user who needs to view an embedded visual must also exist as a registered user inside Amazon Quick Sight. The Lambda function handles this synchronization on every embed URL request. When a user signs in through Cognito, the React application requests an embed URL. The Lambda function receives the user’s email address from the validated JWT and calls describe_user to check whether the user already exists in Amazon Quick Sight. If Amazon Quick Sight does not find the user, a ResourceNotFoundException is raised. The function then calls register_user to create the user as a READER, the least privileged role that supports visual embedding. This approach provisions each new Cognito user in Amazon Quick Sight on first access with no manual intervention.

Access control in this solution operates at multiple levels to enforce least privilege. API Gateway validates the Cognito JWT token before any request reaches AWS Lambda, so only authenticated users can request embed URLs. The Lambda function then registers every new user in Amazon Quick Sight with UserRole='READER' to grant the minimum permissions required for embedded visual consumption. However, registration alone doesn’t grant access to any dashboard. You can handle this permission step in one of two ways. The first approach is to have an administrator share the target dashboard with the new user through the Quick Sight console and assign Viewer permissions before the user logs in. The second approach extends the Lambda function to also call update_dashboard_permissions after register_user to grant Viewer access at registration time. This way, the user sees the visual on first login without manual intervention. After the user has Viewer permissions, the embed URL further narrows access by scoping it to a specific DashboardId, SheetId, and VisualId. A user can only view visuals explicitly shared with them through Viewer permissions on the parent dashboard. For data-level restrictions, you can layer Quick Sight Row-Level Security to control which rows each user sees based on their username or group membership.

Before you begin, confirm that you have the following:

This solution uses the registered user embedding method. You restrict access to dashboards and visuals that you explicitly share with your authenticated users.

Generating the embed URL with AWS Lambda

The Lambda function is the core of the backend. It receives the authenticated user’s email and the visual identifiers (dashboard_id, sheet_id, visual_id). It then confirms the user exists in Amazon Quick Sight and generates a scoped embed URL using the GenerateEmbedUrlForRegisteredUser API.

The following snippet highlights two key operations:

Rendering visuals in React with the embedding SDK

The React component fetches the embed URL from the Lambda backend and uses the amazon-quicksight-embedding-sdk to render the visual inside a container element. The two key SDK calls are createEmbeddingContext(), which initializes the embedding context, and embedVisual(), which renders a single visual (not a full dashboard) into the specified container.

After visuals are embedded, you can connect your application’s existing filter controls directly to the Amazon Quick Sight visuals. The Quick Sight Embedding SDK exposes runtime methods to apply, update, remove, and query filter groups programmatically. A React menu or date picker in your UI can trigger a filter on the embedded visual without any page reload. Users interact with your branded components while Quick Sight handles the data processing and rendering behind the scenes. You can also chain multiple filter groups to create complex multi-dimension filter combinations from a single UI event. The result is an analytics experience that feels native to your application rather than a third-party widget dropped into the page.

The Amazon Quick Sight Embedding SDK (v2.5.0+) exposes the following runtime filtering methods on the embedded visual object:

The following snippet shows how a React menu’s change handler applies a category filter to the embedded visual:

This pattern gives your application control over the filtering UX. Users interact with your branded components while Amazon Quick Sight handles all the data processing and rendering behind the scenes. You can chain multiple filter groups to create complex, multi-dimension filter combinations, all triggered from your own UI events.

Follow these steps to deploy and configure the solution in your AWS environment. You will start by deploying the backend infrastructure through AWS CloudFormation. Then you will configure the React front end and create your first Cognito user. Each step builds on the previous one, so that by the final step your application renders a live Quick Sight visual scoped to an authenticated user.

Deploy the AWS CloudFormation stack to provision all backend resources. This approach verifies all resources are provisioned with correct IAM permissions and cross-service references from the start, helping to reduce manual wiring errors.

Figure 2: Create a new CloudFormation stack and upload the template file

Figure 3: Context menu showing embed options for the selected visual

Figure 4: Embed visual panel displaying IDs for developers

To set up your local React environment and link it to AWS resources, create an .env file in the my-app/ folder of your local GitHub repository. Populate the file with:

The following example shows the required contents of the .env file:

To get authenticated user access to embedded Amazon Quick visuals, first create users in Amazon Cognito:

Run the following commands from the React application directory to generate optimized production files:

Upload all the files from the my-app/dist/ directory to the Amazon S3 bucket provisioned by AWS CloudFormation. Do not upload the directory itself.

Open the CloudFront console and select your distribution. Choose the Invalidations tab and then choose Create invalidation. Enter /* as the object path and submit the request. This clears all cached content so that CloudFront serves the latest version of your React application from S3.

Add the Amazon CloudFront domain to the Amazon Quick allowlist:

Figure 5: Manage account from the Amazon Quick console

Figure 6: Manage domains page with the CloudFront domain added to the allowlist

With the front end deployed and the allowlist configured, open the React application using your CloudFront domain URL and sign in with your Cognito credentials. On this first login, the embedded visuals will not render. The newly registered user doesn’t yet have Viewer permissions on the target dashboard. This is expected behavior. Behind the scenes, the initial API call triggers the Lambda function’s register_user logic to automatically provision your Cognito-authenticated identity as a READER in Amazon Quick Sight. You can confirm the registration succeeded by checking Manage users in the Quick Sight console. The following steps grant the necessary dashboard-level access so the visuals load on subsequent logins.

Figure 7: Manage users in the Amazon Quick console, verifying the auto-registered user

After the user exists in Quick Sight, you must grant them access to the specific dashboard containing your target visuals.

Figure 8: Share dashboard with authenticated users

Figure 9: Manage permissions: Viewer permission granted to the authenticated user

The embedded visual should render within your React application as follows:

Figure 10: Amazon Quick visual embedded in the React web application

To avoid incurring ongoing charges, remove the resources created by this solution after you have finished experimenting.

Review your AWS account for any remaining resources and delete them manually if needed. Common resources that survive stack deletion include: CloudWatch log groups, IAM roles and policies, S3 buckets (CloudFormation can’t delete non-empty buckets), Lambda-created network interfaces, AWS Key Management Service (AWS KMS) keys (scheduled for deletion on a waiting period rather than removed immediately), and any Quick Sight resources (registered users, datasets, dashboards) that were created outside the stack.

In this post, you learned how to embed individual Amazon Quick Sight visuals using Cognito-based registered user authentication, READER-role RBAC, and a serverless embed URL generation backend. With this approach, embedded visuals appear as part of your application rather than a separate BI tool. Embedding individual visuals instead of full dashboards gives you precise layout control, context-aware analytics placement, and a streamlined user journey without separate BI tool navigation.

After your embedded visuals are rendering successfully, consider exploring the optional custom filters pattern described earlier in the Custom filters from your UI section. With the runtime filtering API in the Quick Sight Embedding SDK, you can replace the built-in Quick Sight filter controls with your own branded React components, connecting dropdowns, date pickers, and search fields directly to the embedded visual. This is an independent enhancement that you can add at any time without modifying the core embedding architecture you have just built.

Start by embedding one visual to validate the workflow end-to-end. After it’s confirmed, add more visuals and build a complete analytics interface within your existing application.

For detailed guidance on embedding configurations, authentication patterns, and SDK capabilities, consult the Amazon Quick Sight Embedding SDK Documentation and the Amazon Cognito Developer Guide.