tim275 / amazon-cognito-react-amplify Goto Github PK

📜 See this blog post for more details about this project.

This GitHub project shows how to secure Amazon API Gateway with Amazon Cognito and access it from React application using AWS Amplify.

The backend is provisioned using AWS SAM and consists of:

• An Amazon API Gateway that acts as a proxy to a serverless function.
• A Node.js based AWS Lambda function that performs basic CRUD operations on Amazon DynamoDB using AWS SDK.
• An Amazon DynamoDB table.
• Resources to setup Amazon Cognito
  • User Pool
  • App Client
  • Domain
  • Identity Pool
  • Roles
  • Groups
  • Users

The React based frontend application uses AWS Amplify for user authentication and communication with Amazon API Gateway. A few additional libraries (Material-UI, react-json-view, react-loading-overlay) are used to improve user experience.

• Install Docker.
• Clone the repo.
• If your AWS security credentials are not in ~/.aws, then adjust the bind mapping in docker-compose.yml.
• Rename .env.local to .env.
• Update S3_BUCKET variable in the .env file with your s3 bucket name. AWS SAM needs it to upload the template and serverless function code.
• To deploy the backend to AWS run:

docker compose up backend

• To get configuration data run:

docker compose up describe

• Copy the above command output into corresponding variables in the .env file.
• Create demo users password

docker compose run -e USR_PWD=<pwd> --rm users

• To start the frontend application run:

docker compose up frontend

• Open the app http://localhost:3000
• Verify that you can not perform CRUD operations.
• Sign in with [email protected] user and password you specified earlier. Verify that you can perform all CRUD operations.
• Sign out and sign in back with [email protected] (same password). Verify that you can do Get and Scan only. You should get AccessDeniedException if you try to Put, Update or Delete.

• To delete the backend from AWS run:

docker compose up clean
docker compose down