Embedding Amazon Quick Sight Visuals with Cognito Authentication in React Apps

Embedding analytics visuals into a React application requires careful handling of user authentication and access control. This guide demonstrates a serverless approach to embed individual Amazon Quick Sight visuals, ensuring each user sees only the data they are permitted to view.

The architecture involves a React frontend served via Amazon CloudFront, with user authentication managed through Amazon Cognito User Pools. An AWS Lambda function, protected by Amazon API Gateway, generates scoped embed URLs for specific visuals, based on user identity and permissions. These URLs are then used by the Quick Sight Embedding SDK within the browser to render visuals directly in the application.

A key feature of this setup is the automatic synchronization of Cognito users with Amazon Quick Sight. When a user logs in, the Lambda function checks if the user exists in Quick Sight and registers them as a READER if necessary. Permissions to specific dashboards are managed through Quick Sight's sharing features, with optional row-level security for data filtering.

Deployment involves provisioning resources via AWS CloudFormation, configuring the React app with environment variables, creating users in Cognito, and granting dashboard access. Once set up, users can authenticate and view visuals tailored to their permissions, with the system handling URL generation and access control seamlessly.

This approach offers fine-grained control over embedded visuals, supports dynamic filtering through the SDK, and can be expanded to include multiple visuals and complex data interactions, all within a secure, serverless framework.