Embed Quick Sight visuals using Cognito user authentication
Amazon Web Services Ishita Gupta
AWS shows how to embed one Quick Sight visual in React with Cognito login. It syncs users on first access and scopes access to a single chart.
Based on reporting by Amazon Web Services, Ishita Gupta — read the original for the full story.
Summary, retelling and take written by AI under human oversight; images are AI-generated illustrations. How we work · Report an error
AWS has a new recipe for a problem that sounds simple until you try it: putting analytics inside a React app without letting every signed-in user see everything. The trick here is not just embedding a visual. It is building the identity plumbing so Cognito and Quick Sight agree on who the user is, what role they get, and which exact visual they are allowed to see.
The setup is serverless and split into four layers. React sits in front, served through CloudFront from S3, with AWS WAF filtering traffic at the edge. Cognito User Pools handle sign-in and issue JWTs. API Gateway checks those tokens before handing requests to Lambda, and Lambda assumes a dedicated IAM role before calling Quick Sight to generate a time-scoped embed URL. CloudWatch watches the backend while Quick Sight renders the visual in the browser through the Embedding SDK.
What makes the flow more than a standard embed is the user sync. Every time someone asks for a visual, Lambda checks whether that email already exists in Quick Sight. If not, it creates the user as a READER, which is the least privileged role that still works for visual embedding. That first-access provisioning happens automatically, so there’s no handoff step for new Cognito users.
Access control does not stop there. The user also needs Viewer permission on the parent dashboard, which can be shared ahead of time in the Quick Sight console or granted by Lambda with update_dashboard_permissions. Only then does the embed URL narrow things further to one DashboardId, SheetId, and VisualId. And if that still feels too broad, Quick Sight row-level security can limit which rows each person sees based on username or group membership.
On the front end, the React app fetches the URL and uses createEmbeddingContext() plus embedVisual() to place a single chart into a container. The post also shows how to drive embedded filters from your own UI using the SDK’s runtime methods, so a React menu or date picker can change the visual without a page reload. The result is a branded analytics panel that behaves like part of the app, not a widget pasted in from elsewhere.
My take — AI-written commentary, not fact-checked reporting
This is the kind of AWS tutorial that quietly admits the real cost of enterprise analytics: identity work. The visual is the easy part; the permissions stack is where the mess lives, which is exactly why so many teams still end up sharing dashboards like it’s 2014. Embed less, govern more, and stop pretending a chart can be “just dropped in.”
Read more about this at: Amazon Web Services