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:

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:

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