Amazon Cognito is a service that provides authentication, authorization and user management. Two main components are User Pools and User Identity Pools. For User Pools, you can use the built-in sign in and sign-up pages, and even customize their UI! You can use AWS console, API or CLI to provide logo and CSS. What if you want to automate this process and maybe store your customizations somewhere? And Amazon overwrites old changes everytime you make a new CLI/API request, so it's even more important to keep all of your stylesheet changes safe. What if you want to use some cutting-edge CSS that works in a browser but is not allowed by Amazon Console?

Here is how I solved it - I've created a very basic Node.js script that takes a CSS file, an image file and uploads it using AWS-SDK. Here is a little step by step instruction on how you can create one as well.

I am assuming that you have global AWS keys on your machine. If not, you can read more about making it work here.

1. Init project and install its dependencies

Run npm init and then answer the questions about your package. Next, you need to add AWS Javascript SDK using npm i aws-sdk --save . When it's ready, create a new file called index.js as an entry point for your Node.js app. At the beginning of the file import two node modules, fs - for file accessing the file system and aws-sdk that you have just installed. We will use the SDK to access Cognito API.



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

2. Create your stylesheet

Create a CSS file, for example congito.css . With Cognito UI you can use only a few classes for customizing it, you can find a full list here. Put your styles in the stylesheet file and save it. You can use comments as well, you can even add SCSS support, but I won't cover it - I believe using preprocessors for this is some kind of overkill, but if you have some visual framework or sth - it's possible to use them.

3. Load your file contents in index.js and remove unwanted characters.

Next, in your index.js you need to load your CSS and remove newline characters and comments using regular expressions. You can use the File System module and import your image file as well.



const styles = fs . readFileSync ( " cognito.css " , " utf8 " ) . replace ( / (\r

\t |

| \r\t) /gm , "" ) //remove newlines . replace ( " /*.+?*/ " ); // remove comments const image = fs . readFileSync ( imageFile );

4. Now you need to configure and access Cogito API. Remember to use the correct region!

const cognitoISP = new AWS . CognitoIdentityServiceProvider ({ region : ' region of your cognito user pool ' });

5. Next - prepare all of your params and call the API

const params = { UserPoolId : ' your-user-pool-id ' , CSS : styles , ImageFile : new Buffer ( image ) }; cognitoISP . 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 go to your terminal and use node index.js and the script will update your Cognito UI styles and logo image. This way you can easily manage your styles and use them in different environments without having to manually upload them - you can even use this in your CI/CD processes! There are even more options, for example using different styles for different App Clients in Cognito and so on and so far.

Some links that you may find helpful:

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html#setUICustomization-property

https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-ux.html