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

Last updated: 2022-10-27

I want to configure the hosted web UI for my Amazon Cognito user pool, but I'm not sure what settings to turn on. 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 turn on—then follow the steps in this article.

Resolution

If you haven't already done so, create a user pool, and create an app client in the user pool. Then, follow these instructions:

Note: These directions use the new Amazon Cognito console.

Add a domain name to your user pool

  1. In the Amazon Cognito console, choose User pools, and then choose your user pool.
  2. Under App integration, choose Domain name, and then choose Actions.
  3. Choose Create Cognito domain to add your own domain prefix to the Amazon Cognito hosted domain. Or, choose Create custom domain to add your own custom domain.

Change app client settings

  1. In the Amazon Cognito console, choose User pools, and then choose your user pool.
  2. Under App integration, choose your app client from the App clients and analytics section.
  3. Choose Edit from the Hosted UI section.
  4. Do the following:
    For Allowed callback URLs, enter the URL of your web application that will receive the authorization code. Your users are redirected here when they sign in.
    For Allowed sign-out URLs - optional, enter the URL where you want to redirect your users when they sign out.
    For Identity providers, choose Cognito user pool from the dropdown list.
    For OAuth 2.0 grant types, select either Authorization Code grant or Implicit grant OAuth 2.0 authentication flow. Authorization code grant type is used by confidential and public clients to exchange an auth code for an access token. Implicit grant type is only used when there's a specific reason that authorization code grant can't be used. For more information, see Understanding Amazon Cognito user pool OAuth 2.0 grants.
    For OpenID Connect scopes, select openid and any other OAuth scopes that you want Amazon Cognito to add in the tokens for when your users authenticate. For example, phone and email.
    For Custom scopes, select any custom scopes that you want to authorize for this app.
  5. 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, then construct the URL manually.

  1. In the Amazon Cognito console, choose User pools, and then choose your user pool.
  2. Under App integration, copy the Domain URL under the Domain section. Then, paste the URL into a text editor for reference.
  3. Under App clients and analytics, click your client name.
  4. Copy the Client ID to your clipboard. Then, paste the ID into a text editor for reference.
  5. Copy one of the Allowed callback URLs to your clipboard. Then, paste the URL into a text editor for reference.
  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
    -or-
    Choose View Hosted UI in the App client section to access the default URL for the login endpoint. Then, replace parts of the URL as detailed earlier.

If you turned on Authorization code grant earlier for OAuth 2.0 grant types, then using this URL prompts Amazon Cognito to return an authorization code when your users sign in. If you turned on Implicit grant for OAuth 2.0 grant types earlier and you want Amazon Cognito to return an access token instead when your users sign in, then 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 User pools, and then choose your user pool.
  2. Under App integration, click your Client name from the App clients and analytics section.
  3. Under Hosted UI, choose View Hosted UI. The sign-in page of the hosted web UI opens in a new browser tab or window.

Did this article help?


Do you need billing or technical support?