How to customize validation messages in AWS Amplify

user_3560659 0
Viewed 399

I am using AWS Amplify in two of my applications. In the first one, we used aws-amplify v3.0.23 without Amplify-UI. It shows the following error message if username contains a space:

Value at 'username' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+

However, in my other application, where we are using aws-amplify/ui-react v1.2.4 with aws-amplify v4.1.2, it shows a more user-friendly message in the same case:

Username cannot contain whitespace

Right now, I am trying to upgrade to the latest versions of aws-amplify and aws-amplify/ui-react i.e., v4.3.15 and v2.8.0 respectively because Amplify-ui v1.2.4 does not support password managers like Last Pass. But, I see that the latest version again shows the message "Value at 'username' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+" instead of the user-friendly message "Username cannot contain whitespace" in case username contains a space. Is there any way in AWS Amplify or AWS Cognito to override the validation messages?

aws-amplify amazon-cognito amazon-web-services
1 Answers

Finally, I found the solution! As replied by an Amplify-UI expert to my question here we were able to translate the error message returned by AWS Cognito to any custom message of our choice using Amplify internationalization library documented at https://ui.docs.amplify.aws/components/authenticator#internationalization-i18n.

Here is the code:

import { I18n } from 'aws-amplify';
import { translations } from '@aws-amplify/ui-react';
I18n.putVocabularies(translations);

const originalMessage="1 validation error detected: Value at 'username' failed to satisfy constraint: Member must satisfy regular expression pattern: [\\p{L}\\p{M}\\p{S}\\p{N}\\p{P}]+";
const translatedMessage="Username cannot have whitespace.";

I18n.putVocabularies({
  en: {
    [originalMessage]: [translatedMessage]
  }
});
user_35606590
Related