Is this proper usage of AmplifyRequireNewPassword React component?

Question

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

score 0 · Answer 1 · answered Dec 23 '20 at 16:47

0

I notice you're not passing the user object, but that's not a guarantee to fix it. I'm running into the same thing.

answered Dec 23 '20 at 16:47

Thomas

368
1
7
19

score 0 · Answer 2 · answered Dec 24 '20 at 17:43

0

What I ended up doing was dropping the explicit reference to AmplifyRequireNewPassword. I didn't really need custom text.

answered Dec 24 '20 at 17:43

Jesse G

36
3

Is this proper usage of AmplifyRequireNewPassword React component?

2 Answers2