AWS Cognito completeNewPasswordChallenge calls onFailure method but the user is confirmed in AWS Console

Question

I'm using AWS Cognito Javascript SDK in a react application. I have a user that was created in the AWS Console by an admin, and when the user is logged in for the first time they have to reset their password. I go through the newPasswordRequired flow, and when I call the completeNewPasswordChallenge function with the parameters, the onFailure callback is ran. When I log the error I get, {code: "UnknownError", message: "Unknown error"}. However, when I check the AWS Console, the user in the user pool is changed from FORCE_CHANGE_PASSWORD to CONFIRMED.

My code is:

class LoginScreenContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isInvalidForm: null,
      isFirstLogin: false,
      user: null,
      userAttr: null
    }
    this.onFormSubmission = this.onFormSubmission.bind(this);
    this.updatePassword = this.updatePassword.bind(this);
  }

  onFormSubmission = (username, password) => {
    const poolData = {
      UserPoolId : AWSConfig.cognito.USER_POOL_ID,
      ClientId : AWSConfig.cognito.APP_CLIENT_ID
    }

    const userPool = new CognitoUserPool(poolData);
    const userData = {
      Username: username,
      Pool: userPool
    }
    const cognitoUser = new CognitoUser(userData);

    const authenticationData = {
        Username : username,
        Password : password
    }
    const authenticationDetails = new AuthenticationDetails(authenticationData);

    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: (result) => {
        console.log(result);
      },
      onFailure: (err) => {
          console.log("Authenticate user failure");
          console.log(err);
          this.setState({ isInvalidForm: true });
     },
      newPasswordRequired: (userAttributes) => {
         delete userAttributes.email_verified;
         delete userAttributes.phone_number_verified;

        userAttributes.name = authenticationDetails.username;
        console.log(userAttributes);
        this.setState({
          isFirstLogin: true,
          user: cognitoUser,
          userAttr: userAttributes
        });
      }
    });
  }

  updatePassword = (newPassword) => {
    const cognitoUser = this.state.user;
    const userAttr = this.state.userAttr;
    cognitoUser.completeNewPasswordChallenge(newPassword, userAttr, {
      onSuccess: (result) => {
        console.log("NEW PASSWORD COMPLETED: ");
        console.log(result);
      },
      onFailure: (err) => {
        console.log(err);
      }
    });
  }

  render() {
    return (
      <div>
      {this.state.isFirstLogin ? (
        <NewPasswordForm updatePassword={this.updatePassword} />
      ) : (
        <LoginScreenComponent isInvalidForm={this.state.isInvalidForm} onFormSubmission={this.onFormSubmission}/>
      )}
      </div>
    );
  }
}

Answer 1

I believe you need to call completeNewPasswordChallenge within the newPasswordRequired callback.

newPasswordRequired: (userAttributes, requiredAttributes) => {
          delete userAttributes.email_verified

          cognitoUser.completeNewPasswordChallenge(newPw, userAttributes, {
            onSuccess: result => {
              AWS.config.credentials.refresh(err => {
                if (err) {
                  throw err
                } else {
                  // do something
                }
              })
            },
            newPasswordRequired: (userAttributes, requiredAttributes) => {
              delete userAttributes.email_verified
              // phone number as well

              cognitoUser.completeNewPasswordChallenge(newPw, userAttributes, this.newPasswordRequired)
            },
            onFailure: err => {
              throw err
            }
          })
        },