Customizing Cognito Hosted UI

Question

We are using Cognito Hosted UI with Local Account login and few SAML providers. There is an option to customize some styling but I am looking for couple of additional things.

1. Adding a custom text and link to an external site - like terms and conditions
2. SAML provider name do not take a space. I cannot show something like "Login with X".

Is there a way to customize the Hosted UI to do these things? Thanks.

Answer 1

You would be better off not using Cognito provided UI, and only use Cognito for authentication and authorization.

My react web application interact with Cognito, without using any of its provided UI components. Only through this way, you are able to have absolute control of your frontend.

You can refer below sample code, and use it for your web application.

Sample code

The sample code shows you how to signin by calling Cognito with using amazon-cognito-identity-js. Or some other reference: Implementing AWS-Cognito in Angular 2 and Using AWS Cognito in a Lambda function with npm

import {
  CognitoUserPool,
  CognitoUser,
  CognitoUserSession,
  CognitoUserAttribute,
  AuthenticationDetails,
} from "amazon-cognito-identity-js";


export function signIn(email: string, password: string) {
  var authenticationData = {
    Username: email,
    Password: password,
  };
  const cognitoUser = new CognitoUser({
    Username: email,
    Pool: getPool(
      process.env.REACT_APP_BUSINESS_ACCOUNT_USER_POOL_ID!,
      process.env.REACT_APP_BUSINESS_ACCOUNT_USER_POOL_CLIENT_ID!
    ),
  });
  var authenticationDetails = new AuthenticationDetails(authenticationData);
  return new Promise((resolve, reject) => {
    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result) => resolve(result),
      onFailure: (error) => reject(error),
      newPasswordRequired: (userAttributes, requiredAttributes) => {
        resolve({ needResetPassword: true, cognitoUser, userAttributes });
      },
    });
  });
}