Amplify Reset Password Hangs

Question

I used amplify's withAuthenticator as shown below for my /mainPage path. But when I tried to reset password, supply the confirmation code and submit it, the page hangs. It should refresh my /mainPage page.

import { withAuthenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
function MainPage({ signOut, user }) {
  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  );
}
export default withAuthenticator(MainPage);

Answer 1

Lots of missing information here but.. here's go nothing

1. page hangs == there was an error which can be viewed and inspected by your browser's developer tools - you should attach the error here in order to help others to assist (next time of course)
2. do you use the default reset password flow or make something custom?
3. in any case - why do you use the signOut method for this process? the user is not signed in (forgot password) so there is no point to sign out

The only scenerio I can think of is if the user is forced to change password (e.g. - getting kicked off with the signOut method, change password and sign in again). Even for that use-case - the signOut method alone (as present in your code) is only the first phase of this process (and not the entire process)

With that being said, I'll try to suggest a process that will simplify things for you (as the name Amplify applies) - reset one's password by using the build-in mechanism already provided with the library (please read the docs)

Long story short, the process would be:

• User need to change password (forgot or forced to perform this action)
• An email with temporary code is then send to user's email (this code is only valid for one hour - please generate it only when user is able to actually change current password)
• User copy the code from email to your form, and then enter the new password
• After confirmation - password changed. It's up to you to decide if you want to enter user into your app of force re-entry (e.g. typing the new password in the login screen in order to sign-in)

And you can use the forgotPassword and forgotPasswordSubmit methods in order to fulfill that process (more information in the link provided above) . In any other case (you have a custom flow) - please share more details

One last technical note:

In react this form of event handling

<button onClick={asyncFunc} >I am a button!</button>

Is the short way of wrtiting

<button onClick={async () => { await asyncFunc1(); await asyncFunc2() } }>
    I am a button!
</button>

So either write your own custom async function and use the short way (preferred) or use the long way and use several functions in order to materialize your async process steps

Good luck ?