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:
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;
Sure enough, it applies the border radius to the properties I want:
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.
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.