How do I configure the hosted web UI for Amazon Cognito?

Last updated: 2020-01-23

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

Short Description

When you create a user pool in Amazon Cognito and then 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.

Resolution

If you haven't already, create a user pool, and then create an app client in the user pool. Then, follow the instructions below.

Add a domain name to your user pool

  1. In the Amazon Cognito console, choose Manage user pools, and then choose your user pool.
  2. In the left navigation pane, under App integration, choose Domain name.
  3. Either add your own domain prefix to the Amazon Cognito hosted domain, or add your own custom domain.

Change app client settings

  1. In the Amazon Cognito console, choose Manage user pools, and then choose your user pool.
  2. In the left navigation pane, under App integration, choose App client settings.
  3. Do the following:
    Under Enabled Identity Providers, select the Cognito User Pool check box.
    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.
    For Sign out URL(s), enter the URL where you want to redirect your users when they sign out.
    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 OAuth Grant Types on the OAuth website.
    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.
  4. 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. For more information, see Customizing the Built-in Sign-in and Sign-up Webpages.

(Optional) Construct the URL for the hosted web UI

If you want to control which parameters are included in the login URL for the hosted web UI, construct the URL manually.

  1. In the Amazon Cognito console, choose Manage user pools, and then choose your user pool.
  2. In the left navigation pane, choose App integration.
  3. Copy the Domain URL to your clipboard, and then paste it into a text editor for reference.
  4. In the left navigation pane, under App integration, choose App client settings.
  5. Do the following:
    Under App client [name], copy the ID to your clipboard, and then paste it into a text editor for reference.
    Under Sign in and sign out URLs, copy the URL that you entered for Callback URL(s).
  6. Construct the URL for the hosted web UI by pasting together the information that you just copied into this format:
    domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl
    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 earlier for Allowed OAuth Flows, using 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.

Launch the hosted web UI

Note: If you constructed the URL for the hosted web UI manually, enter that URL in your web browser instead.

  1. In the Amazon Cognito console, choose Manage user pools, and then choose your user pool.
  2. In the left navigation pane, under App integration, choose App client settings.
  3. Under Hosted UI, choose Launch Hosted UI. The sign-in page of the hosted web UI opens in a new browser tab or window.

Did this article help you?

Anything we could improve?


Need more help?