Using Cognito to Log In to a Custom Domain

• Create a user pool named CognitoLab:
  • Review defaults.
  • Note the Pool Id.
• Add an app client named CognitoLabApp:
  • Uncheck Generate client secret:
    • It's not needed for this flow. User pool apps with a client secret are not supported by the JavaScript SDK.
  • Note the App client id.
  • Navigate to Route 53 and then to Hosted Zones to view the lab domain that will be used throughout the lab.

• Navigate to Certificate Manager
• Request a certificate.
• Create a public certification.
• Specify a wildcard certificate (to catch both auth. and www.).
• Use the DNS validation method.
• Expand status for domain:
  • Click Create record in Route 53.
  • Click Continue.
• Refresh until Pending validation becomes Issued (about 3 minutes).

• Navigate to Route53 and create an A record for the domain provided for you in the lab. Leave the subdomain blank.
• Use Alias to point to the S3 endpoint listed in N.Virginia
• Navigate to the user pool.
• Under App integration, select Domain name.
• Choose Create Custom Domain.
• Use auth.<labdomain> (where <labdomain> is what was assigned to the lab).
• Select the ACM certificate.
• Click Save changes.
• Note the Alias target.
• Wait for the CREATING status to become ACTIVE (about 15 minutes).

• In Route 53, create an A record for subdomain auth.
• Use ALIAS to point to the CloudFront alias target from Cognito App Client.
• Go to Cognito > App Integration > App client settings:
  • Provide the Callback URL (https://www.<labdomain>).
  • Provide the Sign out URL (https://www.<labdomain>).
  • Click Identity Providers:
    • [x] Cognito user pool
  • Check Authorization code grant under Auth.
  • Select email, openid, and profile scopes.
  • Save changes.
• Go to CloudFront:
  • Origin Domain Name is www.<labdomain> bucket.
  • Viewer Protocol Policy is Redirect HTTP to HTTPS
  • In Distribution Settings:
    • Alternate domain names: www.<labdomain>
    • Custom SSL Certificate Use the wildcard certificate, *.<labdomain>
    • Default Root Object: index.html (because S3's index.html doesn't work behind CloudFront)
  • Click Create Distribution.
  • Wait for the In Progress status to become Deployed (about 10 minutes).
  • Note the distribution domain name (e.g., d3XXXXXXXXXXX.cloudfront.net)
• Go to Route 53
  • Create record set:
  • Set the www.<labdomain> CNAME record so that it aliases to the CloudFront distribution name from the previous step.

After logging in to the provided EC2 instance (via SSH):

git clone https://github.com/linuxacademy/content-aws-sam
cd content-aws-sam/labs/Configuring-Custom-Domain-Cognito/app
npm install
cd src
vim main.js

• Fill in the user pool id, app client id, domain, and redirect URLs.
• Save and quit.

cd ..
npm run build
cd dist
aws s3 sync . s3://www.<labdomain>

• Browse to https://www.<labdomain>
• Click Sign in, sign up, and verify your email address.