AWS Amplify Authenticator UI confirm signin error

Question

I am using AWS Amplify Authenticator UI components for my signin, SMS verification etc.

I am able to signup, signin without MFA perfectly fine. When I enable SMS MFA the 'AmplifyConfirmSignIn' component asks for the SMS code, but after entering the code it throws the below error.

Uncaught (in promise) TypeError: Cannot read property 'challengeName' of undefined

Below is my code,

{ authState !== 'signedin' ?
    <AmplifyAuthenticator usernameAlias="email" amplifyConfig={awsconfig} >
    <div slot="sign-in" className="amplifyCont">
      <AmplifySignIn slot="sign-in" usernameAlias="email" />
      </div>
      <div slot="sign-up" className="amplifyCont">
      <AmplifySignUp
        slot="sign-up"
        usernameAlias="email"
        formFields={[
          {
            type: "name",
            label: "First Name",
            placeholder: "John",
            required: true,
          },
          {
            type: "family_name",
            key: "family_name",
            label: "Last Name",
            placeholder: "Doe",
            required: true,
          },
          {
            type: "email",
            label: "Email Address",
            placeholder: "email@sample.com",
            required: true,
          },
          {
            type: "password",
            label: "Password",
            placeholder: "Password with both cases, symbol and number",
            required: true,
          },
          {
            type: "phone_number",
            label: "Phone Number",
            placeholder: "Primary Contact",
            required: false,
          },
        ]}
      />
      </div>
      <div slot="forgot-password" className="amplifyCont">
      <AmplifyForgotPassword slot="forgot-password" />
      </div>
      <div slot="require-new-password" className="amplifyCont">
      <AmplifyRequireNewPassword slot="require-new-password" />
      </div>
      <div slot="confirm-sign-in" className="amplifyCont" >
      <AmplifyConfirmSignIn slot="confirm-sign-in" />
      </div>
      
      </AmplifyAuthenticator>
      :
      <div className="App">

I searched through the Authenticator docs and google, but I could not find a solution. Please help me out.

Answer 1

I figured out a solution, we need to provide the 'user' attribute to the confirm-signin component.

<AmplifyConfirmSignIn slot="confirm-sign-in" user={userVal} />

I got the signed in user details via the onAuthUIStateChange handler.

 React.useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
   setUserVal(authData);
});}, []);