使用 AWS Cognito 忘记密码表单

Question

I am implementing a logic of forgot password using AWS Cognito. I am so far successful in changing the password using Prompts as given in the documentation. Here is the code

var username = document.getElementById('reset-pass').value;
    var data = {
        UserPoolId: _config.cognito.userPoolId,
        ClientId: _config.cognito.clientId
    };
    var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);

    // setup cognitoUser first
    var cognitoUser = new AmazonCognitoIdentity.CognitoUser({
        Username: username,
        Pool: userPool
    });

cognitoUser.forgotPassword({
        onSuccess: function (result) {
            console.log('call result: ' + result);
        },
        onFailure: function(err) {
            alert(err);
        },
        inputVerificationCode() {
            var verificationCode = prompt('Please input verification code ' ,'');
            var newPassword = prompt('Enter new password ' ,'');
            cognitoUser.confirmPassword(verificationCode, newPassword, this);
        }
    });

My question is instead of using prompts, how can I confirm the user on next page. Example
On the first page a user enter the email and mail is sent using the forgotPassword() .
Now user is redirected to a new page. There i wanted to enter the code as well as the new password and call the cognitoUser.confirmPassword method.

What i tried is to create a delay interval and after entering the details it would trigger clear interval on button press.

   function resetPassword() {
    var username = document.getElementById('reset-pass').value;
    var data = {
        UserPoolId: _config.cognito.userPoolId,
        ClientId: _config.cognito.clientId
    };
    var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);

    // setup cognitoUser first
    var cognitoUser = new AmazonCognitoIdentity.CognitoUser({
        Username: username,
        Pool: userPool
    });
    // call forgotPassword on cognitoUser
    cognitoUser.forgotPassword({
        onSuccess: function (result) {
            alert("Mail Sent")
        },
        onFailure: function (err) {
            console.log(err)
        },
        inputVerificationCode()
        {
            window.myVar = setInterval(function(){
                console.log('check');
            }, 10000);
            var verificationCode = document.getElementById('code').value;
            var newPassword = document.getElementById('fpass').value;
            cognitoUser.confirmPassword(verificationCode, newPassword, this);
        }
    });
}

The HTML Part Of the code-

<div class="change">
    <form>
        <label>Enter Email ID</label>
        <input type="email" id="reset-pass" required />
        <br />
        <div class=""><a href="#" class="btn btn_red" id="next" onclick="resetPassword()">Next</a></div>
    </form>
</div>

div class="change-confirm">
<form>
    <label>Enter Code</label>
    <input type="number" id="code" required />
    <br />
    <label>Enter New Password</label>
    <input type="password" id="fpass" required />
    <br />
    <div class=""><a href="#" class="btn btn_red" onclick="clearInterval(window.myVar);"> Reset</a></div>
</form>
</div>

But the above code never executed. Instead it stops execution after some time. So my question is is there any way to delay the function call of cognitoUser.confirmPassword method? I do not want to use prompts instead get the email and code in a text field after mail is sent.

Answer 1

A little late to the party, but it can help someone else.

You can pass the congitoUser you have created to the state, and then use cognitoUser.confirmPassword(...) by retrieving the cognitoUser object from the state.

Answer 2

Have you made any progress on this in the last 8 months? I am working on this exact same problem, since prompts are quite rubbish in many ways. Right now, when a user inputs an email address that does not correspond to one of our users, Cognito sends a 400 error back to the browser, which is FAR from ideal.

Right now, here is how I am handling it (using Bootstrap 4):

cognitoUser.forgotPassword({
    onSuccess: function(result) {
        // Hide text box with the reset password link
        $('#resetPasswordSection').addClass('d-none');
        // Show text box stating that the password has successfully been changed
        $('#passwordResetSuccessful').removeClass('d-none');
        // Show form for user to sign into their account w/ their new password
        $('#signinSection').removeClass('d-none');
    },
   onFailure: function(err) {
        // TODO: DO NOT TELL USER YET IF EMAIL ADDRESS DOES NOT EXIST; INSTEAD
        // PROMPT THEM FOR THE VERIFICATION CODE (I am thinking this should be
        // done server-side)
        // Show text box stating that the password has NOT successfully been changed
        $('#passwordResetUnsuccessful').removeClass('d-none');
        // Hide form for user to input their verification code & new password
        $('#resetPasswordStep2').addClass('d-none');
        // Show form for user to input their email address to restart the password
        // update process
        $('#resetPasswordStep1').removeClass('d-none');
    },
    inputVerificationCode() {
        // Hide form for user to input their email address to start the password
        // update process
        $('#resetPasswordStep1').addClass('d-none');
        // Show form for user to input their verification code & new password
        $('#resetPasswordStep2').removeClass('d-none');

        // With each keystroke in these 3 input boxes, check if they pass regEx
        // requirements and activate the 'Reset Password' button when all 3 inputs do
        document.getElementById('codeInputVerify').oninput = checkNewPasswordInputs;
        document.getElementById('password1InputReset').oninput = checkNewPasswordInputs;
        document.getElementById('password2InputReset').oninput = checkNewPasswordInputs;                    

        let that = this;
        // event handler for when a user clicks on the "Reset password" button
        function submitChanges(event) {
            var verificationCode = $('#codeInputVerify').val();
            var newPassword = $('#password1InputReset').val();
            // reset all values in the forms
            $('#resetPasswordForm').trigger('reset');
            $('#signinForm').trigger('reset');
            $('#passwordResetUnsuccessful').addClass('d-none');
            event.preventDefault();
            cognitoUser.confirmPassword(verificationCode, newPassword, that);
        }

        $('#resetPasswordForm').submit(submitChanges);
    }
});

I am thinking the best way to handle this might be to pass the email address back to the server and then handle the response in python (concealing the result from the browser), and then showing the user the HTML form for them to input the verification code and new password whether or not the email address was valid. That way, you can just tell the user that changing the password is valid without revealing to them whether or not the email address they input corresponds to an existing user or not.

Thoughts?

Answer 3

You should consider using the aws-amplify-react which provides a withAuthenticator higher-order component that provides a login flow with forgot password, mfa, etc. And it's maintained by a team of devs who work for AWS.

https://aws-amplify.github.io/docs/js/react#add-auth