forceNewpassword authState never set in useAuthenticator context

[bardiakhosravi]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

• I am using the Authenticator component.
• Also using the useAuthenticator hook

I have a user in a user pool whose temporary password has expired and the user confirmation status is set to Force change password.

When I use the Authenticator component to sign in with the user email I see an error in the Authenticator component stating Temporary password has expired and must be reset by an administrator.

However, the context object passed to the useAuthenticator hook never gets an authState that is equal to forceNewPassword or any other state that I can use to handle the situation. It remains unauthenticated.

What's the expected behaviour?

The context object should have a state that represents the user state in cognito, specifically in this case that forceNewPassword.

Help us reproduce the bug!

• have a user in a cognito user pool with a force change password state.
• use Authenticator component to sign in using this user's email address
• look at useAuthenticator context object and the authState value does not reflect this user state.

Code Snippet

export default function AmplifyAuthenticator() {
  let location = useLocation();
  const navigate = useNavigate();
  const { authStatus, route } = useAuthenticator((context) => {
    return [context.authStatus, context.route];
  });

  console.log("authState", authStatus, route);

  let from = location.state?.from?.pathname || "/";

  const handleClose = () => {
    navigate(-1);
  };

  return (
    <Dialog open={true} onClose={handleClose}>
      <Authenticator loginMechanisms={["email"]}>
        {({ signOut, user }) => {
          return <Navigate to={from} />;
        }}
      </Authenticator>
    </Dialog>
  );
}

Console log output

No response

Additional information and screenshots

package.json

[esauerbo]

Hi @bardiakhosravi, thanks for raising this.

authStatus intentionally reflects only whether the user is authenticated or unauthenticated (or configuring, if the Authenticator is loading). Documentation for that.

If you want to add event handling in the case of forceNewPassword you would want to use the route variable. And here's the documentation.

Hopefully this helps and please let us know if this adequately addresses your use-case.

[esauerbo]

@bardiakhosravi following up, in the specific case where the temporary password is expired, the route will not show that state. At this time, there is no way to reflect that the temporary password is expired from the UI side. The admin user must resend a temporary password.

Here are the cognito docs about this (Temporary Password section) https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AdminCreateUser.html

[reesscot]

This state is not exposed because there is nothing that can be done about it from the UI layer other than displaying the message. When a user is in this state an administrator will need to setup a new password from Cognito, which cannot be done from the UI. Closing this out, since we don't plan on supporting this feature.