AWS Amplify Authenticator UI confirm signin error Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of AWS Amplify Authenticator UI confirm signin error without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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);
});}, []);
We are here to answer your question about AWS Amplify Authenticator UI confirm signin error - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji