AWS Cognito UI Customization

AWS Cognito gives quite poor options to customize the auth popup

We cannot add new elements, cannot create new inputs for extra css styles, etc. But there is way to make it a little bit more flexible.

First of all, let's download current (default) css the popup is based on. CLI: 

aws cognito-idp get-ui-customization --user-pool-id <your-pool-id>

As the result, the command returns the css in the CLI: 

Copy the css, format it, create a beautiful css file so that it could look like this:

.logo-customizable {
	max-width: 20%;
	max-height: 20%;
}

.banner-customizable {
	padding: 25px 0px 25px 0px;
	background-color: #3E4B5D;
}

.label-customizable {
	font-weight: 400;
}

.textDescription-customizable {
	padding-top: 10px;
	padding-bottom: 10px;
	display: block;
	font-size: 16px;
}

.idpDescription-customizable {
	padding-top: 10px;
	padding-bottom: 10px;
	display: block;
	font-size: 16px;
}

.legalText-customizable {
	color: #747474;
	font-size: 11px;
}

.submitButton-customizable {
	font-size: 14px;
	font-weight: bold;
	margin: 20px 0px 10px 0px;
	height: 40px;
	width: 100%;
	color: #fff;
	background-color: #3E4B5D;
}

.submitButton-customizable:hover {
	color: #fff;
	background-color: #3E4B5D;
}

.errorMessage-customizable {
	padding: 5px;
	font-size: 14px;
	width: 100%;
	background: #F5F5F5;
	border: 2px solid #D64958;
	color: #D64958;
}

.inputField-customizable {
	width: 100%;
	height: 34px;
	color: #555;
	background-color: #fff;
	border: 1px solid #ccc;
}

.inputField-customizable:focus {
	border-color: #66afe9;
	outline: 0;
}

.idpButton-customizable {
	height: 40px;
	width: 100%;
	text-align: center;
	margin-bottom: 15px;
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}

.idpButton-customizable:hover {
	color: #fff;
	background-color: #31b0d5;
}

.socialButton-customizable {
	height: 40px;
	text-align: left;
	width: 100%;
	margin-bottom: 15px;
}

.redirect-customizable {
    display: none;
    text-align: center;
}

.passwordCheck-notValid-customizable {
	color: #DF3312;
}

.passwordCheck-valid-customizable {
	color: #19BF00;
}

.background-customizable {
	background-color: #fff;
}

Now feel free to adjust styles as you want. You can add some properties that don't present in the UI customization screen, or you can hide some elements adding display: none;

To apply the updated css, we can use CLI, but I found it easier to do that with JavaScript SDK. That also should include logo image. The code is self-descriptive, no comments here required:

const fs = require("fs");
const AWS = require("aws-sdk");

const cognitoIdentityServiceProvider = new AWS.CognitoIdentityServiceProvider({ region: 'us-east-1' });

const styles = fs
  .readFileSync("styling.css", "utf8")
  .replace(/(\r\n\t|\n|\r\t)/gm, "") //remove newlines
  .replace("/*.+?*/"); // remove comments

  const image = fs.readFileSync('logo.png');


  const params = {
    UserPoolId: '<your-user-pool-id>',
    CSS: styles,
    ImageFile: Buffer.from(image)
  };
  
  cognitoIdentityServiceProvider.setUICustomization(params, (err, data) => {
    if (err) console.log(err, err.stack); // error 
    else console.log(`Successfully updated, new css version:  ${data.UICustomization.CSSVersion}`); // successful response
  });

Now just run the file with node and your popup is now tuned!