amplify-ui: How to customize PreSignup error response text in amplify-authenticator

Category

Auth

Amplify CLI Version

4.20.0

This is a Vuejs app.

My PreSignup handler ends with the following:

  if (!allowed) {
    callback("My error message", null);
  } else {
    callback(null, event);
  }

When I run: mock function myPreSignup

Output is:

myPreSignup failed with the following error:
{ '0': 'M',
  '1': 'y',
  '2': ' ',
  '3': 'e',
  '4': 'r',
  '5': 'r',
  '6': 'o',
  '7': 'r',
  '8': ' ',
  '9': 'm',
  '10': 'e',
  '11': 's',
  '12': 's',
  '13': 'a',
  '14': 'g',
  '15': 'e' }

However in the browser the following is displayed in the amplify-toast:

myPreSignup failed with the following error: My error message

How do I remove or change (or preferably translate using i18) the text: “myPreSignup failed with the following error:” ?

I have also tried something like this in my handler:

  if (!allowed) {
    callback({error: 'My error message'}, null);
  } else {
    callback(null, event);
  }

When I try mocking I get this output:

myPreSignup failed with the following error:
{ error: 'My error message' }

Then the coresponding message in the browser amplify-toast is something like:

myPreSignup failed with the following error: [object, object]

Which is not very usefull

What is the correct way of dealing with this ? Is it perhaps possible to overide the signUp() function ? And shouldn’t the mocking output error text look more like the toast output ? (Now it’s confusing)