Timeline for the React App with AWS Cognito and S3

The usecase of the application will be list all bucket objects to apecific users that register themselves with the application.

Day 1: Ideation

Create a workflow for the whole application and build dependency of various resources on each other. The given static React application will use Cognito to authenticate and authorize the user to fetch resource details from AWS. This will help the application to fetch temporary AWS credentials in the form of JWT tokens to access the AWS resources.

Day 2: Setting up AWS environment

1. Create Cognito User Pool
2. Create application client for User Pool
3. Create Cognito Identity pool from the user pool and application client
4. Modify Cognito User Pool auth IAM role to access specific AWS resources (here, S3)
5. Create S3 bucket for hosting the static website
6. Allow public access on the S3 bucket
7. Add bucket policy to list all objects
8. Set up CORS policy for the bucket
9. Enable static website hosting for the bucket and set the index document

Day 2-4: Building the react application

1. Create the enviroment for developing a React application. Install libraries and SDKs (aws-sdk) for the application.
2. Bootstrap the react application
3. Build various components like login, logout, signup, etc and also a page to show resource specific data.
4. Integrate the components to use the login/logout flow of Cognito IdP.

Day 5: Going live:

1. Copy the contents from the build directory of the React application to the root directory of the S3 bucket that we created in the former steps.
2. Goto the S3 console of the bucket and make all the files public by selecting them all
3. To visit the site, go to the endpoint in the Static Website Hosting section of bucket properties