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

Configuring a Custom Domain with Cognito

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. Let's take a look at the diagram and our sample application to understand our scenario and goals for the lab a little better.

Google Cloud Platform icon

Path Info

Clock icon Advanced
Clock icon 1h 30m
Clock icon Sep 30, 2021

Contact sales

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

Table of Contents

  1. Challenge

    Objective 1: Create a Cognito User Pool

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

    Objective 2: Create an ACM Certificate

    • Provision certificates.
    • 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

    Objective 3: Configure a Custom Domain for Cognito

    • Navigate to the user pool.
    • Under App integration, select Domain name.
    • Choose Use your 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

    Objective 4: Complete App Client Configuration 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:
      • Enabled Identity Providers:
        • [x] Cognito user pool
      • Provide the Callback URL (https://www.<labdomain>).
      • Provide the Sign out URL (https://www.<labdomain>).
      • Check Authorization code grant.
      • 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.
      • Note the distribution domain name (e.g.,
    • Go to Route 53
      • Create record set:
      • Set the www.<labdomain> CNAME so that it aliases to the CloudFront distribution name from the previous step.
  5. Challenge

    Objective 5: 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>
    • Sign up.
    • Enter the confirmation code received via email.
    • Note that you are now signed in with your username.

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