Add a service override to React Authenticator for the Resend Code button.

[joealynn]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

My web application has always upper-cased the user's entry of username: We store it in Cognito as all uppercase. Under V5, I was able to do this by overriding the handleSignUp, handleSignIn, handleForgotPassword, and handleForgotPasswordSubmit services to grab the username entered, convert it to uppercase and invoke the corresponding Auth service.

Under V6, I found that I also had to override handleConfirmSignUp. I have everything working, except when the Resend Code button is clicked: the username is sent as entered and not found by Cognito if it was not all uppercase. I see that there is a 'resendSignUpCode' function in aws-amplify/auth, but no 'handleResetSignUpCode' in the defaultServices file. Can this be added, please?

Please describe a solution you'd like.

Support a new entry in the services passed to the Authenticator component: services.handleResendSignUpCode, which if present should be called when the Resend Code button is clicked.

We love contributors! Is this something you'd be interested in working on?

• 👋 I may be able to implement this feature request.
• ⚠️ This feature might incur a breaking change.

[calebpollman]

@joealynn This makes sense to me, will look in to adding it to our roadmap!

[zerbusdetroy]

Hello,

I have a similar requirement for Angular. Should I create a separate issue for this? Is this feature on the roadmap?

Thank you.

[stevexm]

Hello from Seattle, I had the very same requirement for a React project and (finally) gave up on the documentation pointing to any specific override function. Figured that no one has gotten around to working on comprehensively expanding the overrides yet.

If you are in the same situation, here is a hacky bit of a workaround until something more formal gets posted:

document.querySelector("button[type='button']").onclick = (event) => { 
     event.stopPropagation(); //do not bubble
     event.stopImmediatePropagation(); //stop the other Authenticator handlers from getting a hold of the onclick; take out if you want to run 
     event.preventDefault(); //stop default button click
     console.log('do whatever you need to do for a code resend, cutting out the default/or not as the case may be')
}

The particular selector employed works because the submit button is of type='submit', whereas the "Resend Code" button we are interested in is of type="button". Yes I know, hacky. But for my use case all I needed to do was trigger my server to tell SendGrid to reissue an email with a fresh code.

Cheers

[kevin860]

My team has also run into this issue and I have opened a proposed PR: #6312

Hopefully that is helpful!

[jordanvn]

@kevin860, thank you for opening the PR associated with this! We'll review it and get back to you with any feedback.