AWS Cognito - Input attributes include non-writable attributes for the client [completeNewPasswordChallenge]

Question

I created a user pool in my AWS Cognito console and I have a use case where a user is created via the Console and a temporary password is provided to the user.

I'm facing an error that says:

{code: "InvalidParameterException",
message: "Input attributes include non-writable attributes for the client.",
name: "InvalidParameterException"}

Here is my React.js Authentication component:

import { CognitoUser, AuthenticationDetails } from "amazon-cognito-identity-js";
import UserPool from "../../UserPool";

export default function AuthenticationForm(){
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [firstLogin, setFirstLogin] = useState(false)
const [userAttr, setUserAttr] = useState({})

const onSubmit = (event) => {
    event.preventDefault();

    const user = new CognitoUser({
      Username: email,
      Pool: UserPool,
    });

    const authDetails = new AuthenticationDetails({
      Username: email,
      Password: password,
    });

    user.authenticateUser(authDetails, {
      onSuccess: (data) => {
        console.log("onSuccess: ", data);
      },
      onFailure: (err) => {
        console.error("onFailure: ", err.message);
      },
      newPasswordRequired: (data) => {
        console.log(data)
        setFirstLogin(true)
        setUserAttr(data.email)
      },
    });
  };
    const [newPassword, setNewPassword] = useState('')
    const onChangeNewPassword = (e) => {
        e.preventDefault();
        setNewPassword(e.target.value)
    }
    const onSubmitNew = (e) => {
        e.preventDefault()
        const user = new CognitoUser({
            Username: email,
            Pool: UserPool,
          });
      
          const authDetails = new AuthenticationDetails({
            Username: email,
            Password: password,
          });
      
          user.authenticateUser(authDetails, {
            onSuccess: (data) => {
              console.log("onSuccess: ", data);
            },
            onFailure: (err) => {
              console.error("onFailure: ", err.message);
            },
            newPasswordRequired: (data) => {
              console.log(data)
              user.completeNewPasswordChallenge(newPassword, userAttr, {
                onSuccess: result => {
                console.log(result)
                },
                onFailure : result => {
                console.log(result)
                }
            });
            },
          });
        
    }
return (
    <>
        <Col xl={4} lg={4} md={12} sm={12} xs={12} className={StyleAuthForm.container} data-aos="zoom-in">
            {firstLogin ? (
            <>
            <h1 className={StyleAuthForm.coloredHeading}>Créez un nouveau mot de passe :</h1>
            <Form onSubmit={onSubmitNew}>
                <Form.Group>
                    <Form.Label>Nouveau mot de passe : </Form.Label>
                    <Form.Control onChange={onChangeNewPassword} className={StyleAuthForm.formControl} type="password" placeholder="Entrez votre mot de pass" required></Form.Control>

                </Form.Group>
                <Form.Group>
                    <Button className={StyleAuthForm.loginBtn} type="submit">Log in</Button>
                </Form.Group>
            </Form>
            </>
            ) : ( <>
            <h1 className={StyleAuthForm.coloredHeading}>Connectez-vous.</h1>
            <Form onSubmit={onSubmit}>
                <Form.Group>
                    <Form.Label>Adresse mail : </Form.Label>
                    <Form.Control onChange={(event)=>{setEmail(event.target.value)}} className={StyleAuthForm.formControl} type="email" placeholder="Entrez votre e-mail" required></Form.Control>
                </Form.Group>
                <Form.Group>
                    <Form.Label>Mot de passe : </Form.Label>
                    <Form.Control onChange={(event)=>{setPassword(event.target.value)}} className={StyleAuthForm.formControl} type="password" placeholder="Entrez votre mot de pass" required></Form.Control>
                </Form.Group>
                <Form.Group>
                    <Button className={StyleAuthForm.loginBtn} type="submit">Se connecter</Button>
                </Form.Group>
            </Form></>)}
        </Col>
    </>
)
}

What could have happen wrong?

Thanks in advance !

Answer 1

I encountered this same problem and fixed it by passing attribute argument as empty object => {}

cognitoUser.completeNewPasswordChallenge(newPwd, {} , {
                onSuccess: (res) => {
                    console.log(res)
                },
                onFailure: (err) => {
                    console.error(err)
                }

            });