Customize the AWS Cognito hosted UI confirmForgotPassword page

user_965901 0
Viewed 613

Currently via the provided flow the template responds with text in the following manner:

We have sent a password reset code by email to j***@t***.com. Enter it below to reset your password.

Is there a way to update and or add to this copy? Where do I even look to find this template?

context:

Vue Nuxt app with nuxt auth scheme oath2, authorization_endpoint via AWS Cognito

.../confirmForgotPassword?response_type=token&client_id=XXXXXX&redirect_uri=XXX ect...

As always any help and direction is appreciated so thanks in advance!

aws-lambda amazon-cognito nuxt.js oauth-2.0
2 Answers

Okay so I found a way. It's a little hacky, but it gets the job done.

Within the hosted css add an ::after to the text span and place the new copy within that rule. Caveat, this is only an addition of text vs changing the existing provided copy.

The update flow is outlined here: https://docs.aws.amazon.com/cli/latest/reference/cognito-idp/set-ui-customization.html

#div-forgot-password-msg span::after {
  content: " additional text that will be displayed at the end of the existing copy."
}
user_9659010

The way to do this is with a Cognito Custom Message Lambda. In Cognito you specify a trigger to call a custom lambda script. In the lambda script you receive an event object, which you can edit and set your own message. You then return the event object from the lambda and thats it. An example script it provided in the link.

user_49855800
Related