Override SignUp component signUp method

[alenkis]

** Which Category is your question related to? **
Auth using aws-amplify-react's Authenticator component
** What AWS Services are you utilizing? **
Cognito

Is it possible to override or intercept in some way signUp method of a SignUp component?
I'm utilizing all the other components when using Authenticator, but when using SignUp component I would like to call my REST API, instead of using its own signUp method which calls Auth.signUp.

I know I can build my own SignUp component, but I'd like to keep the styling consistent between different states of the Authenticator

Thank you!

[ashika01]

@alenkis The current authenticator component always calls Auth.signIn. Your best bet like you mentioned would be to create your custom component. If you would like to open up a PR for the change to existing React, to make it more pluggable, we can help you see it through.

However we are working on new UI structure and the theming roadmap includes to have a global brand and use it with any component with ease. Let us know your thoughts, we have an RFC open . And we are iterating some structural auth flow changes with the new UI as well.

[alenkis]

@ashika01 Thank you for the explanation, these are very good news regarding the new UI structure. I'll see if I can help out in any way.

In the meantime, it seems the best approach for this situation is to try to utilize amplify-ui styles and build custom components

[ashika01]

@alenkis : Yup. Mocking pretty much what we are doing in the SignUp component and then calling your signIn function instead of Auth.signIn should help you keep the follow and style.

If this answer the question feel free to close the issue. If you have hit road blocks further along the way, feel free to reach out for clarifications :)

[nihp]

@ashika01 I have a question about aws-amplify-react-native. I just imported all the components for eg. (SignIn, SignUp, Forgot password and all the other screens from aws-amplify-react-native) itself.

Here how can I add the custom error messages.

For eg) I have network issue while giving forgot password. It shows the error as Network error. Then how can I refactor this error message and all other messages too in aws-amplify-react-native.

[ashika01]

@nihp : Could you gimme a screenshot of the error?

[ashika01]

@nihp : We generally pass down the error coming in from cognito services with exception to some validation in toast and also we have an error message map here .

If this is something you would like to see as a feature in UI. I would recommend you open a feature request with details or open up a PR for the changes.

[ashika01]

Closing the issue as the original question has been answered.

[nihp]

Okay @ashika. I have found it yesterday.

I can able to customize the error as per my wish using the errormessage map

I have one question if the user goes to confirmation code screen can I able to focus the input box, if i use the non customisable screen.

[gmfinear]

Error message map link no longer works! Can someone repost here please :)

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.