Elton shows you how to
configure the hosted web UI
for Amazon Cognito

Elton_CPT1018

I want to configure the Amazon Cognito hosted web UI for my user pool, but I'm not sure what settings to enable. How do I set it up?

When you create a user pool in Amazon Cognito and configure a domain for it, Amazon Cognito automatically provisions a hosted web UI to let you add sign-up and sign-in pages to your app.

If you're not sure how to set this up or what settings to use—such as the types of OAuth 2.0 flows and scopes to enable—follow the steps in this article.

Create a user pool and create an app client inside that, if you haven't already, and then follow the instructions below.

Select your Amazon Cognito user pool

  1. In the Amazon Cognito console, choose Manage User Pools.
  2. Choose the user pool that you want to configure the hosted web UI for.

Add a domain name

  1. In the left navigation pane, under App integration, choose Domain name.
  2. Either add your own domain prefix to the hosted Amazon Cognito domain, or add your own custom domain.

Change app client settings

  1. In the left navigation pane, under App integration, choose App client settings.
  2. Under Enabled Identity Providers, select Cognito User Pool.
  3. For Callback URL(s), enter the URL of your web application that will receive the authorization code. Your users are redirected here when they sign in.
  4. For Sign out URL(s), enter the URL to redirect your users to when they sign out.
  5. For Allowed OAuth Flows, select any OAuth 2.0 authentication flow that you want to enable. For example, Authorization code grant and Implicit grant. For more information, see the OAuth website.
  6. For Allowed OAuth Scopes, select any OAuth scopes that you want Amazon Cognito to add in the tokens for when your users authenticate. For example, phone, email, and openid.
  7. Choose Save changes.

For more information, see Configuring a User Pool App Client.

(Optional) Customize the hosted web UI

You can add a custom logo or customize the CSS for the hosted web UI. To do so, in the left navigation pane, choose UI customization. For more information, see Specifying App UI Customization Settings for a User Pool (AWS Management Console).

Construct and test the URL for the hosted web UI

  1. In the left navigation pane, choose App integration.
  2. Copy the Domain URL to your clipboard, and then paste it into a text editor for reference.
  3. In the left navigation pane, under App integration, choose App client settings.
  4. Under App client [name], copy the ID to your clipboard, and then paste it into a text editor for reference.
  5. Under Sign in and sign out URLs, copy the URL that you entered for Callback URL(s).
  6. Construct the URL for your hosted web UI by pasting together the information you just copied into this format:

    {Domain URL}/login?response_type=code&client_id={App Client ID}&redirect_uri={Callback URL}

    For example:

    https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com

    If you enabled Authorization code grant for Allowed OAuth Flows earlier, this URL prompts Amazon Cognito to return an authorization code when your users sign in.

    If you enabled Implicit grant for Allowed OAuth Flows earlier and you want Amazon Cognito to return an access token instead when your users sign in, replace response_type=code with response_type=token in the URL.
  7. Test the URL in your web browser. If you constructed the URL correctly, you'll see the sign-up/sign-in page of the hosted web UI.

Did this page help you? Yes | No

Back to the AWS Support Knowledge Center

Need help? Visit the AWS Support Center

Published: 2018-12-18