Amplify-js: Translation / Multiple language of cognito hosted sign-in ui

[juno-visualsquares]

Do you want to request a feature or report a bug?
feature request

What is the current behavior?

the hosted ui is providing only basic CSS customizations
In old aws ticket (e.g.) https://github.com/amazon-archives/amazon-cognito-identity-js/issues/573 
It was mentioned supporting translation was 'very much on roadmap'.
We wonder how is the roadmap / progress for this now. It would be a major consideration if federated signin has to go through page in different language as the product

What is the expected behavior?
N/A

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?
N/A

[chjalmar]

Hi! Same problem here. Working on a proof of concept for a while for a project involving a big AWS client in Chile, and the only problem stopping us from adopting Amazon Cognito is the current inability to customize Hosted UI's text so we can translate it to spanish.

If there's any chance this feature could be included this month or the next, we could still be on track to using this service, which in any other aspect is working fine for us... please help! @yuntuowang

[gabrielcabralbfr]

Any updates on that? @yuntuowang @mlabieniec

Only worried about translation after implemented the cognito auth component xD

Any news you have about it would be great.

[ngocketit]

This is now also a blocker for us :(. I can't believe that Amazon shipped a service that lacks many essential features.

[pandanr1]

Hosted UI and validation-code-messages should be multi-language. Firebase got that but we want to stay with aws. Any update?

[jordanranz]

This would need to be implemented in the Cognito service. Has any started a discussion on the AWS Forum for Amazon Cognito?

[fugelset]

There seems to be translation support, but I can not find any documentation of it:
https://forums.aws.amazon.com/thread.jspa?messageID=860473&#860473

[nathannoble]

In a similar boat. Marketing wants to change the text on those dialogs. How is this not possible?

[skrosoft]

Did someone has found how to translate Cognito hosted version?

[franscal7]

I have the same problem

[CNapo]

I have the same problem, any update from AWS?

[Quelu]

Same problem for me..
Almost two years for a 'very much on roadmap' BASIC feature development!
Really Amazon, stop talking and start considering your users more seriously..

[josephhealy]

Feature status????

[alemser]

Same here, about to abandon due to the lack of translation.

[tealow]

Same problem here, we need a german translation.

[ogogli]

A simple wrapper hosted in your domain can do it:

`

$hosted_url = "https://.auth.us-east-1.amazoncognito.com/login?      response_type=code&client_id=&redirect_uri=";
$ch = curl_init($hosted_url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
$html = curl_exec($ch);

// English
$search = array("Username","Password","Forgot your","Sign in with your","Sign in");
// Brazilian portuguese
$replace = array("Nome de Usuário","Senha","Esquece sua","Digite seu", "Login");

echo str_ireplace($search,$replace,$html);
`

[AymericWilke]

You can also inject css into the customization boxes in the Cognito interface, which allows you to hide labels and add custom text in :before pseudo-elements, like this:
body{background-color:#fff} .label-customizable{color:transparent} .label-customizable:nth-of-type(1):before{color:#000;content:"Nom d'utilisateur";} .label-customizable:nth-of-type(2):before {color:#000;content:"Mot de passe";} .textDescription-customizable{color:transparent} .textDescription-customizable:before{color:#000;content:"Connexion"} .redirect-customizable{color:transparent!important} .redirect-customizable:before{color:#000;content:"Mot de passe oublie ?"} .submitButton-customizable{color:transparent!important} .submitButton-customizable:before{color:#000;content:"Connexion"}

Funny how a service meant to keep our users safe allows you to do code injection… 🤔

Anyway any advancement on this feature would be very welcome.

[rreiser-auti]

You can also inject css into the customization boxes in the Cognito interface, which allows you to hide labels and add custom text in :before pseudo-elements, like this:

.label-customizable{color:transparent}
.label-customizable:nth-of-type(1):before{color:#000;content:"Nom d'utilisateur";}
.label-customizable:nth-of-type(2):before {color:#000;content:"Mot de passe";}
.textDescription-customizable{color:transparent}
.textDescription-customizable:before{color:#000;content:"Connexion"}
.redirect-customizable{color:transparent!important}
.redirect-customizable:before{color:#000;content:"Mot de passe oublie ?"}
.submitButton-customizable{color:transparent!important}
.submitButton-customizable:before{color:#000;content:"Connexion"}

Funny how a service meant to keep our users safe allows you to do code injection… 🤔

Anyway any advancement on this feature would be very welcome.

I think it was fixed, doesn't work here =/

[AymericWilke]

You can also inject css into the customization boxes in the Cognito interface, which allows you to hide labels and add custom text in :before pseudo-elements, like this:

.label-customizable{color:transparent}
.label-customizable:nth-of-type(1):before{color:#000;content:"Nom d'utilisateur";}
.label-customizable:nth-of-type(2):before {color:#000;content:"Mot de passe";}
.textDescription-customizable{color:transparent}
.textDescription-customizable:before{color:#000;content:"Connexion"}
.redirect-customizable{color:transparent!important}
.redirect-customizable:before{color:#000;content:"Mot de passe oublie ?"}
.submitButton-customizable{color:transparent!important}
.submitButton-customizable:before{color:#000;content:"Connexion"}

Funny how a service meant to keep our users safe allows you to do code injection… 🤔
Anyway any advancement on this feature would be very welcome.

I think it was fixed, doesn't work here =/

Still working for me…

[kilobike]

You can also inject css into the customization boxes in the Cognito interface, which allows you to hide labels and add custom text in :before pseudo-elements, like this:

.label-customizable{color:transparent}
.label-customizable:nth-of-type(1):before{color:#000;content:"Nom d'utilisateur";}
.label-customizable:nth-of-type(2):before {color:#000;content:"Mot de passe";}
.textDescription-customizable{color:transparent}
.textDescription-customizable:before{color:#000;content:"Connexion"}
.redirect-customizable{color:transparent!important}
.redirect-customizable:before{color:#000;content:"Mot de passe oublie ?"}
.submitButton-customizable{color:transparent!important}
.submitButton-customizable:before{color:#000;content:"Connexion"}

Funny how a service meant to keep our users safe allows you to do code injection… 🤔
Anyway any advancement on this feature would be very welcome.

I think it was fixed, doesn't work here =/

Still working for me…

wow, interesting. It does have some effect, but on different pages the label may be misplaced. I do have a hard time getting rid of the injected code though. Simply deleting from the text boxes does not help in all cases.

[jankammerath]

I would like to upvote this and also add that customisation is significantly easier using the CLI:

aws cognito-idp set-ui-customization --user-pool-id [Your Pool Id] --client-id [Your Client Id] --image-file fileb://logo.jpg --css file://custom-ui.css

The docs unfortunately don't state the possibility to use a CSS-file, but the CLI supports it and it is way easier than modifying using the console. Given the CSS structure of Cognito's UI however it is not possible to replace texts as it is almost impossible to identify the fields using CSS and hack the text with CSS' ":after".

I would love to be able to either add custom text to my cognito UI or use pre-existing translations. The translation is the last deal-breaker as Cognito otherwise is quite amazing.

[LukasKnuthImagineOn]

It seems that the approach from @AymericWilke doesn't work anymore. When I try inserting more CSS into a field and safe it, I get the following error:

We were unable to update your pool's UI customization: The CSS class body is not in the list of allowed classes.

Using the AWS CLI as suggested by @jankammerath we now get the same error message:

$ aws cognito-idp set-ui-customization --user-pool-id eu-central-1_XXXXXXXX --css file://cognito_ui.css

An error occurred (InvalidParameterException) when calling the SetUICustomization operation: The CSS class .textDescription-customizable:before is not in the list of allowed classes.

I don't want to do CSS Hacks in the first place. Amazon, why is it so difficult to change the text on the UI?

[cpmech]

I'd love to see my Hosted UI in PT-BR...

[wywarren]

Any updates on this? Is there anyway we can host it on our own static page and port the links over to the cognito arn?

[LukasKnuthImagineOn]

@wywarren We tried it but there is no way to get it working for certain scenarios. For example, if you want to use the UI to implement OAuth for a mobile App. There is no way to get the Code for the next step in the OAuth Code Grant flow.

We just went with another hosted Service that offers more customization.

[unkn0wn-root]

Any updates on this? How hard would it be to provide simple translation on login forms... and we're talking about AWS not some guy in the basement working on some free-time project.

[jcardus]

Yes, I'm very surprised to know that there's no globalization!!!

[lip-andrade]

Can't believe they still haven't implemented this. Seriously, quite disappointed to see such an essential and simple request being ignored.

[garytraceylp]

Has anyone from AWS even replied with any idea when this will be done? or if they are even intending on doing it? Its almost like they prefer the Hosted UI not be used, and if this was the case, they should make it easier to replace (Amplify is OK but you would almost need to replicate the entire OAuth 2 server side of things session state etc)

[undefobj]

Hello we have provided feedback on this issue to the Cognito team. Please note that while Amplify leverages Cognito, it is an open source framework and not run by that service team. We recommend opening up official requests via AWS support tickets or the official AWS support forums.

[sammartinez]

As stated from @undefobj above, Amplify leverages Cognito as we are an Open Source project separate from the service team. Please open a AWS Forums forum for Cognito as we, Amplify, don't have control over this implementation. Thanks!