Amplify-js: Cannot read property 'completeNewPasswordChallenge' of undefined

[wcordelo]

The intent of my app is to log in to a AWS Cognito User Pool where new users are created by the admin and sent a temporary password.

The user pool was created with the Amplify CLI.

This code is pretty much copied and pasted from the AWS Amplify documentation:

import React from "react";
import Amplify from "aws-amplify";
import { AmplifyAuthenticator, AmplifyRequireNewPassword } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";
import './App.css';

Amplify.configure(awsconfig);

function App() {
  return (
      <AmplifyAuthenticator>
          <AmplifyRequireNewPassword
              headerText="My Custom Require New Password Text"
              slot="require-new-password"
          ></AmplifyRequireNewPassword>
          Logged In
      </AmplifyAuthenticator>
  );
}

export default App;

After creating a new user in the Cognito console, on a test run of the app I successfully signed in and was prompted to change my password. However, when I submitted the new password, I was presented with the following error:

Cannot read property 'completeNewPasswordChallenge' of undefined
The browser was Microsoft Edge 86.0

[elorzafe]

@wcordelo

Have you tested this in other browsers?

[wcordelo]

@elorzafe Yes this has been tested in Safari and Google Chrome

[elorzafe]

@wcordelo

I confirm is a bug, looking on the fix now

[elorzafe]

I found a couple of problems

• amplify-require-new-password component. Should receive user data on the props like this

     <AmplifyAuthenticator>
        <AmplifyRequireNewPassword
          headerText={headerText}
          slot="require-new-password"
          user={user}
        ></AmplifyRequireNewPassword>
          Logged In
      </AmplifyAuthenticator>

That will require a docs change

The other issue is that this.currentUser is always undefined talking with @wlee221 it seems there is an issue with stencil component.

@wlee221 will continue looking more into this

[mattschutt]

Running into this as well.

    "@aws-amplify/ui-react": "^0.2.33",
    "aws-amplify": "^3.3.13",

The error banner appears after prompting the 'require new password UI' and submitting the new password:

```javascript
const renderLoggedIn = () => {
return (

username={user.username}
/>

user={user}
/>

Main Content : TODO

);
}

const renderLoggedOut = () => {
return (

user={user}
/>

user={user}
/>

);
}
```

@wlee221 , do you have any updates on this to get it to work? Thanks

[mattschutt]

@wlee221 or could you point me to a version that would work until there's a fix? Thanks again

[wlee221]

Hi! Fix is up on PR #7442. There will likely be some delay until the next release due to US holiday schedules, but I'll let you know again when this hits unstable so that you can install the patch to your app.

I don't think there's a workaround for this issue, unless you use the default AmplifyRequireNewPassword without slots.

[wlee221]

@mattschutt, fix is up on the unstable npm tag now. Please let us know if the issue persists. Thanks!

yarn add aws-amplify@unstable 

[mattschutt]

@wlee221 — first off, thanks for your hard work and responsiveness on this. I’ll try it out. I think it’s also somewhat related to the required fields not being allowed — logged here: https://github.com/aws-amplify/amplify-js/issues/6885#issuecomment-750713337

Second thought— dude it’s Christmas! Enjoy and put this stuff down for a day! :)

Thanks again, you guys rock.