Integrating Amazon QuickSight visuals with Cognito in React applications
This developer guide covers how to add analytics visuals to React applications using Amazon Cognito user authentication and a serverless architecture.
When integrating analytics features into React-based applications, providing user-based authentication and managing role-based data access creates significant complexity.
Authentication Layer
A bridge is established between Amazon Cognito and Amazon QuickSight so that every user in applications can see only the data permitted by their role. Through this structure, granular access management can be applied for each embedded visual.
Visual-Level Integration
Embedding directly at the visual level rather than full dashboards provides precise control over layout and user experience. By adding specific charts and metrics to the interface, the need to create separate dashboards for each use case is eliminated.
Serverless Architecture Structure
The solution architecture follows a four-layer serverless structure consisting of frontend, authentication, backend, and analytics. While the React application resides on the frontend, Cognito handles user management and JWT operations.
User Synchronization and Access
The Lambda function automatically checks whether users are registered within Amazon QuickSight during embedded URL requests. New unregistered users are defined by the system with reader roles.