Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.
  • Labs icon Lab
  • A Cloud Guru
Google Cloud Platform icon

Using Cognito to Log In to a Custom Domain

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.

Google Cloud Platform icon

Path Info

Clock icon Intermediate
Clock icon 1h 30m
Clock icon May 03, 2022

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    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.
  2. Challenge

    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).
  3. Challenge

    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).
  4. Challenge

    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.
  5. Challenge

    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.

The Cloud Content team comprises subject matter experts hyper focused on services offered by the leading cloud vendors (AWS, GCP, and Azure), as well as cloud-related technologies such as Linux and DevOps. The team is thrilled to share their knowledge to help you build modern tech solutions from the ground up, secure and optimize your environments, and so much more!

What's a lab?

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.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.

Start learning by doing today

View Plans