'How to change background of aws amplify/cognito login/signup screen

I want to use aws amplify for an app I am making, but I can't figure out how to change the background of the login/sign up screens using withAuthenticator. Can someone please let me know how to do this? I just want an image background for now. Thanks!

Solution 1:^[1]

In your main css file:

:root{
  --form-color: cyan
}

If you look at amplify app demos, you'll see that the background takes the color of the --form-color variable. The amplify docs don't tell you that you can change this value, but it should work. If it doesn't, change it to --form-color: cyan !important.

Sources:

https://aws-amplify.github.io/docs/js/ui-components#theming (amplify docs about theming)
https://master.d2ka7y7551sk8n.amplifyapp.com/ (demo app I found and fiddled with)

Solution 2:^[2]

To change the main background(not the login box background) from default grey on Amazon Cognito managed login version, you cannot do it in the pool management area, you have to use AWS CLI to do it.

I used the web-browser based one available in AWS called "Cloud Shell".

The following is an example. Make sure you specify region, user pool and client ID. You can get the client ID from the URL, the pool ID from the pool page.

You will also need to add a logo in Base64 format so pick your logo and use an online tool to convert your logo to a long base 64 string. If your string conversion starts with "data:image/png;base64," omit it and include all after the comma by also adding this to the command..

--image-file "long-base64-image-string-here".

`aws cognito-idp set-ui-customization --region eu-west-2 --user-pool-id "eu-west-2XXXX" --client-id "XXXXXXXXXXXX" --css "
body { background: red;} 
.submitButton-customizable{background-color:#c91265; border-color:#c91265;} 
.banner-customizable{background-color: white} 
.socialButton-customizable.google-button{background: #fafafa;color: #0d0707;}
.socialButton-customizable{border-radius: 10px;border: 1px #cacaca solid;}
socialButton-customizable.google-button .social-logo {border-radius:10px;}"`

Solution 3:^[3]

enter image description here

You can also add background image like this

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jeremi G
Solution 2
Solution 3	minhlabanhuy

'How to change background of aws amplify/cognito login/signup screen

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]