Add Authentication to the SPA using Amazon Cognito User Pools

Add Authentication to the SPA using Amazon Cognito User Pools

In this exercise, we will make use of the Cognito User Pool and Identity Pool, and mark one of our API endpoints as requiring authentication via Cognito User Pools.

  1. Go to AWS Cognito console.
  • Click User pools
  • Click TravelBuddy Add Authentication to the SPA using Amazon Cognito User Pools
  1. Save the User pool ID value
  • Click App integration Add Authentication to the SPA using Amazon Cognito User Pools
  1. Save the Client ID value of the App client name whose name is TravelBuddyWebApp Add Authentication to the SPA using Amazon Cognito User Pools
  2. Click Federated Identities Add Authentication to the SPA using Amazon Cognito User Pools
  3. Click TravelBuddy Add Authentication to the SPA using Amazon Cognito User Pools
  4. Click Sample code
  • In the Get AWS Credentials section, save the Identity Pool ID value displayed in the sample code Add Authentication to the SPA using Amazon Cognito User Pools
  1. Open the file whose path is www\scripts\webapp-configuration.js in the www folder we extracted in step 1 of the 3.5 section Add Authentication to the SPA using Amazon Cognito User Pools

The SPA is implemented using the Angular framework, which allows you to define global constants that are used as configuration variables throughout your application. This file defines the values of the configuration variables that you need to set based on your AWS Account’s ARNs and Ids for the various Cognito resources

  1. Replace REPLACE_WITH_COGNITO_IDENTITY_POOL_ID with the Identity Pool ID value we saved in step 6
  • Replace REPLACE_WITH_COGNITO_USER_POOL with the User pool ID value we saved in step 2
  • Replace REPLACE_WITH_COGNITO_USER_POOL_CLIENT_ID with the Client ID value we saved in step 3
  • Replace REPLACE_WITH_S3_BUCKET_WWW with the S3BucketWWWBucketName value in the Output tab of the DevAx-06 stack
  • In the AWS_REGION field replace with your Region
  • Save Add Authentication to the SPA using Amazon Cognito User Pools
  1. Open Command Prompt, navigate to the directory of the www folder we extracted in step 1 in the 3.5 section
  • Execute the following command to upload the changes to the S3BucketWWWBucketName bucket
set AWS_PROFILE=devaxacademy
aws s3 sync . s3://<S3BucketWWWBucketName>

Replace <S3BucketWWWBucketName> with the S3BucketWWWBucketName value in the Output tab of the DevAx-06 stack

Add Authentication to the SPA using Amazon Cognito User Pools 10. Refresh the TravelBuddy web page and check the developer console to confirm there are no errors following the changes you have made.