Customization of Login Page Cognito

Question

I know that there is possibility to customize some values on login page provided by cognito. But it isn't enough for me. Is it possible to customize it completely? I'm using only third pard federated identification there from web application. Is there possiblility to change grey background? Or put there completely different view?

Answer 1

The only reliable solution is reimplementing from scratch the whole "create account / reset password / social login" interface using the npm package amazon-cognito-identity-js.

As a quick fix, amazon actually does not perform validation on the CSS values which are entered on the "UI Customization" form: you can actually inject any CSS you wish.

I would not rely on this for anything important, as it may not work for a long time, but it can be OK for a personal webpage / unpaid work / proof of concept that you need to show to investors for tomorrow.

Enter this:

Get this:

Answer 2

Since the background grey color can't be modified anymore, we can use some CSS tricks to change the background-color.

Just use multi-layer box-shadow and let the outside shadow be big enough to overlay the background.

Login screen:

Doing something like:

.background-customizable {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 20%), 0 0 0 10000px #eee;
}