Adding Custom CSS Properties to AWS Cognito

Posted by

AWS Cognito is an authentication service provided by Amazon AWS. Cognito has its own built in user store, and can integrate with social logins and enterprise identity providers. Cognito provides you with a base default layout for their login page, with additional settings for UI customization. Included is CSS customizations, where you specify certain CSS properties for the different elements. Despite the property options being limited, this blog post shows how to set additional CSS attributes.

Let’s take a look at a Cognito page I have set up:

Cognito login page with rounded edges

Pretty simple. It has a logo image, inputs for username and password, and functionality to sign up and forgot password. Now, let’s say that the website I’m logging into doesn’t have rounded edges on my inputs. For a consistent user experience, I want to change that on the inputs on my Cognito login page. By default that CSS option (border-radius) is not available as a property in Cognito. However, I can inject in the border radius property by terminating one of the values. Then, I can specify the border radius after the terminated value.

1px solid #ccc; border-radius:0px;
Cognito's UI customization page with border radius injected in
In this example, I terminate border on input fields, and background-color on submit button to inject border radius

Sure enough, it applies the border radius to the properties I want:

Cognito login page with inputs that have square edges

Interestingly, after refreshing the Cognito UI customization page, I can see that the border-radius property is now visible. The border-radius appears as an additional CSS property and formatted correctly.

Honestly, I’m not sure if this is intentional or not, because after injecting in the border-radius property, it shows in the list. Either way, it’s still a pretty neat trick, and it’s nice to have that additional UI customization available on a login page.

One comment

  1. Interesting undocumented behaviour indeed!

    Discovered it too when playing with cloudformation that you can practically add any property to the allowed classes.

    What’s still glitchy in the styling is the border radius and the background-color of the buttons on :focus. I have not found a way to fix that so far.

    Too bad that aws doesn’t allow to upload just any css.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.