Using Cognito to Log In to a Custom Domain

1.5 hours
  • 5 Learning Objectives

About this Hands-on Lab

In this hands-on lab, you will configure a number of AWS services, such as Cognito, AWS Certificate Manager (ACM), S3, and Route 53, in order to configure a custom domain for use with Cognito’s hosted UI. We’ll take a look at the diagram and our sample application to understand our scenario and goals for the lab a little better as well.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Create a User Pool in Cognito
  • 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.
Create an ACM Certificate
  • 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).
Configure Cognito to Use the Custom Domain
  • 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).
Configure App Client and Create CloudFront Distribution
  • 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.,
  • 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.
Configure, Deploy, and Test the Application

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

git clone
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.

Additional Resources

Amazon Cognito lets you add user sign-up, sign-in, and access control to applications quickly and easily. With Cognito, you can provision a hosted authentication UI that you can add to your application to handle sign-up and sign-in workflows. Cognito's hosted UI is the foundation for other features, such as the ability to sign in directly to your user pool through Facebook, Amazon, Google, and Apple, as well as through OpenID Connect and SAML identity providers.

You can also use your own custom domain for Cognito's hosted UI. This offers your users a unified login experience, allowing them to stay within your application's domain, and it enforces a consistent branding and security experience.

Additional Information and Resources

Make sure you are operating the lab within the N. Virginia (us-east-1) Region.

This GitHub repository is used in the lab:

Lab Prerequisites

  • Understand how to log in to and use the AWS Management Console.
  • Understand how to use the AWS Command Line Interface (CLI).
  • Understand how to use ssh from the command line.
  • Understand how DNS, HTTP, and HTTPS work.
  • Familiarity with Amazon S3 and Route 53.

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?