Introduction

Amazon Cognito Hosted UI is a managed login page provided by Cognito User Pools. Instead of building your own sign-in screens and OAuth flow from scratch, you configure a domain, app client, redirect URLs, and scopes, then send users to Cognito’s authorization endpoint. Cognito handles sign-in and returns tokens to your application.

What the Hosted UI Actually Provides

Hosted UI is not a general website builder. It is an OAuth and OpenID Connect login experience hosted by AWS. Its job is to:

• present sign-in and sign-up pages
• support local users in the user pool
• optionally offer social or enterprise identity providers
• issue authorization codes or tokens
• redirect the user back to your app

That makes it a good fit when you want standard authentication behavior without maintaining your own login frontend.

Required Configuration Pieces

A working Hosted UI setup needs four parts aligned:

1. a Cognito user pool
2. a domain for the Hosted UI
3. an app client configured for OAuth flows
4. allowed callback and sign-out URLs

If any one of those is misconfigured, the flow usually fails with a redirect error, an invalid client message, or a missing scope problem.

A common authorization URL looks like this:

1https://myapp.auth.us-east-1.amazoncognito.com/login
2  ?client_id=abc123example
3  &response_type=code
4  &scope=openid+email+profile
5  &redirect_uri=https%3A%2F%2Fexample.com%2Fcallback

In practice you will build that as one encoded URL, not as multiple lines.

Prefer Authorization Code Flow

For most server-side and modern web applications, the best default is the authorization code flow. The browser is redirected to Hosted UI, the user signs in, Cognito sends back a code, and your application exchanges that code for tokens.

A small Node.js example that builds the login URL is:

1const params = new URLSearchParams({
2  client_id: "abc123example",
3  response_type: "code",
4  scope: "openid email profile",
5  redirect_uri: "https://example.com/callback",
6});
7
8const loginUrl =
9  "https://myapp.auth.us-east-1.amazoncognito.com/login?" + params.toString();
10
11console.log(loginUrl);

And a callback handler can exchange the code:

1const body = new URLSearchParams({
2  grant_type: "authorization_code",
3  client_id: "abc123example",
4  code: "returned-code",
5  redirect_uri: "https://example.com/callback",
6});
7
8fetch("https://myapp.auth.us-east-1.amazoncognito.com/oauth2/token", {
9  method: "POST",
10  headers: {
11    "Content-Type": "application/x-www-form-urlencoded",
12  },
13  body,
14}).then(async (res) => {
15  console.log(await res.json());
16});

Social and Enterprise Sign-In

Hosted UI becomes more useful when you connect other identity providers. For example, you can add Google, Apple, or an enterprise OIDC provider and let Cognito normalize the flow.

The important design point is that Hosted UI becomes the authentication entry point, while Cognito remains the token issuer your application trusts.

That means your app code can stay focused on Cognito tokens even if the actual user signed in through another provider.

Common Setup Errors

Most Hosted UI problems are configuration mismatches rather than SDK bugs.

Typical causes include:

• callback URL in your app does not exactly match the app client configuration
• the chosen OAuth flow is not enabled on the app client
• requested scopes are not allowed
• the Hosted UI domain is not configured or not fully propagated yet
• logout URL is missing when you try to sign out through Cognito

For sign-out, the endpoint is similar:

https://myapp.auth.us-east-1.amazoncognito.com/logout?client_id=abc123example&logout_uri=https%3A%2F%2Fexample.com

When Hosted UI Is a Good Choice

Hosted UI is a good default when:

• you need a standard login flow quickly
• you want Cognito-managed OAuth endpoints
• you do not want to build and maintain password-reset and sign-up screens yourself
• you are comfortable with AWS controlling most of the authentication UI

If you need complete control over every screen and interaction, a custom frontend backed by Cognito APIs may fit better.

Common Pitfalls

• Treating Hosted UI as a full frontend framework instead of an authentication surface.
• Forgetting to enable the correct OAuth flow on the app client.
• Mismatching callback URLs by scheme, host, path, or trailing slash.
• Requesting scopes that the client or user pool is not configured to allow.
• Expecting the flow to work before the Hosted UI domain and provider configuration are fully set up.

Summary

• Cognito Hosted UI is a managed login experience for Cognito User Pools.
• The core setup is domain, app client, OAuth flow, scopes, and callback URLs.
• Authorization code flow is the usual default for web applications.
• Most failures come from configuration mismatches, not from the redirect logic itself.
• Hosted UI is useful when you want standard authentication behavior without building the full login UI yourself.