How to customize PreSignup error response text in amplify-authenticator about amplify-ui HOT 24 CLOSED

I'll try to do your suggested workaround for now.
At least the front-end now has Norwgian translation 😀

from amplify-ui.

Any update on this?

from amplify-ui.

Looks like I can find answers to some of these quiestions here: customize-error-messages ?

from amplify-ui.

SO i tried this in a slot:

<amplify-authenticator>
  <amplify-sign-up
      :validation-errors="map"
  >
  </amplify-sign-up>
</amplify-authenticator>

and in methods:

methods: {
     map(message) {
      console.log('mess', message)
     if (/Username.*empty/i.test(message)) {
        return 'My error message'
      }
      return message
    }
}

This is not working either.
I wish this was better documented.

from amplify-ui.

@kjetilge The callback function for mock expects an error object here https://github.com/aws-amplify/amplify-cli/blob/858112e75fab7628b9a0f9cd95c08ff571dc707d/packages/amplify-util-mock/src/utils/lambda/execute.ts#L38

As for customizing the error message the JS team would be able to help you on that

from amplify-ui.

@kjetilge - Could you let us know which package you are using for UI?

from amplify-ui.

I'm using Vue

from amplify-ui.

@kjetilge The callback function for mock expects an error object here https://github.com/aws-amplify/amplify-cli/blob/858112e75fab7628b9a0f9cd95c08ff571dc707d/packages/amplify-util-mock/src/utils/lambda/execute.ts#L38

If I use an error-object I will get a useless message in the amplify-tost. As mentioned above tihis results in the message: myPreSignup failed with the following error: [object, object]

I should be able to somehow override the message "myPreSignup failed with the following error:"
b/c the mock output should mirror what is diaplyed in amplify-toast, not ?

from amplify-ui.

Making sure again, the link you have point to @aws-amplify/ui-vue. So if you are using that, you might not be able to change the error message. We started having discussions on this internally. we can mark this issue as Feature request and track the progress in this as we go along.

Workaround would be for you to create your custom UI using slots and pass the needed error message to amplify-toast component. Docs are here

from amplify-ui.

I dont completely understand your use case yet. Would it be possible to stringify the error object in case of failure so it shows up properly in toast?

from amplify-ui.

In I'm short I'm translating to norwegian.

from amplify-ui.

Yeah, we are basically looking at making use of i18n that we have to do this. So will keep you posted here.

from amplify-ui.

Is it possible to use the context.fail for anything ?

from amplify-ui.

What do you mean by context.fail?

from amplify-ui.

In your code I see:

    const context = {
      done(error, result) {
        if (!returned) {
          returned = true;
          if (error === null || typeof error === 'undefined') {
            context.succeed(result);
          } else {
            context.fail(error);
          }
        }
      },

from amplify-ui.

@ammarkarachi any thoughts?

from amplify-ui.

I see above this is your sample code,

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

I was suggesting this, which should solve the toast problem

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

from amplify-ui.

If I understand correctly you want to intercept the error message to translate it?

from amplify-ui.

@ashika01 I see, but I would still get the "myPreSignup failed with the following error:" in front of my message ?

from amplify-ui.

@ammarkarachi Yes. I want to intercept the error message for translatiopn.

from amplify-ui.

It is a litlle strange that passing values to validationErrors in SignUp in Vue UI component in does not fix this. Nothing happens when using it. It's like the funtion is not implemented.

from amplify-ui.

@kjetilge Yeah.. So now we use StencilJS to build our core UI and use stencil bindings to generate different framework's code. So some functionality might be missing.

from amplify-ui.

@Shomari asks in Discord (https://discord.com/channels/705853757799399426/708383821401161738/927239008185106452):

is there anyway to customize the UI error message? I mostly want to remove the first part about "PreSignUp failed with error" and only show my custom error message returned from lambda.
Not a huge deal but could be a little confusing for users wondering what PreSignUp is

The original bug for this issue may not be relevant, but customizing lambda messages are :)

from amplify-ui.

You can now update all error messages with i18n translations.
https://ui.docs.amplify.aws/components/authenticator#labels--text

Please reopen this issue if you still have problems.

from amplify-ui.