CODEWITHSUNDEEP
amazon-web-servicesamazon-cognitoaws-amplify
Sandeep Parashar
Sandeep Parashar

Reputation: 357

How to customize validation messages in AWS Amplify

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?

Upvotes: 2

Views: 2073

Answers (1)

Sandeep Parashar
Sandeep Parashar

Reputation: 357

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]
  }
});

Upvotes: 3

Related Questions