Amazon-cognito-identity-js: Verify email verification code

Created on 6 Jul 2017 · 15Comments · Source: amazon-archives/amazon-cognito-identity-js

Sorry if this is obvious or has been answered elsewhere, but I couldn't find it.

I have the following workflow - the user requests a reset code via email and then is taken to a view where he needs to enter this code. Then he will be taken to another view to set a new password. So I really need to find a way to verify that he entered a valid code, before going to the password view, otherwise if the code is incorrect I will have to take him back to the verification code view - to enter it again, which is not the perfect experience and requires some view transitions. We are in a mobile app, so putting both the verification code and the fields for the new password along with some explanation texts, can make the screen a bit heavy, so we need to split it between two views.

To summarize - is there a way to verify the verification code?

On a side note - an API for verifying if the username has been registered would be useful as well, as currently you need to workaround it with a fake request and rely on the error code, which works, but it's not the best.

Cheers!

Source

KirilNN

👍3

Most helpful comment

Was the feature implemented as the issue is closed?

KirilNN on 5 Aug 2017

👍3

All 15 comments

For forgot password workflows, there is no way to validate the verification code before setting the password. The validation of the verification code and the new password have to be performed on the API call.

gm-reddy on 14 Jul 2017

Hi @gmredd,

Thanks for the answer. Would you consider this a feature request or suggestion for improvement? I think that it will be a nice addition :)

KirilNN on 17 Jul 2017

@KirilNN, see if this helps you. If you need further help let me know.

Per the main README.md:

Use case 6. Verify user attribute for an authenticated user.

Note that the inputVerificationCode method needs to be defined but does not need to actually do anything. If you would like the user to input the verification code on another page, you can set inputVerificationCode to null. If inputVerificationCode is null, onSuccess will be called immediately (assuming there is no error).

    cognitoUser.getAttributeVerificationCode('email', {
        onSuccess: function (result) {
            console.log('call result: ' + result);
        },
        onFailure: function(err) {
            alert(err);
        },
        inputVerificationCode: function() {
            var verificationCode = prompt('Please input verification code: ' ,'');
            cognitoUser.verifyAttribute('email', verificationCode, this);
        }
    });

guilsa on 17 Jul 2017

And actually here is my implementation of it, starting with forgotPassword() then confirmPassword(). Let me know if you have any questions.

export class LoginCognito {

  CognitoConfig = {
    region: REGION,
    IdentityPoolId: '',
    UserPoolId: USER_POOL_ID,
    ClientId: CLIENT_ID,
  };

  forgotPassword(email) {
    const poolData = {
      UserPoolId: this.CognitoConfig.UserPoolId,
      ClientId: this.CognitoConfig.ClientId
    };
    const userPool = new CognitoUserPool(poolData);
    const userData = {
      Username: email,
      Pool: userPool
    };

    let cognitoUser = new CognitoUser(userData);

    const promise = new Promise((resolve, reject) => {
      cognitoUser.forgotPassword({
        onSuccess: function (result) {
          resolve(result);
        },
        onFailure: function (err) {
          reject(err);
        },
        undefined
      });
    });
    return promise;
  };

confirmPassword(email, verifyCode, newPwd) {

    const poolData = {
      UserPoolId: this.CognitoConfig.UserPoolId,
      ClientId: this.CognitoConfig.ClientId
    };
    const userPool = new CognitoUserPool(poolData);
    const userData = {
      Username: email,
      Pool: userPool
    };

    let cognitoUser = new CognitoUser(userData);

    const promise = new Promise((resolve, reject) => {
      cognitoUser.confirmPassword(verifyCode, newPwd, {
        onSuccess: (res) => {
          resolve();
        },
        onFailure: (err) => {
          reject(err);
        }
      });
    });
    return promise;
  };

}

guilsa on 17 Jul 2017

Hi @guilsa,

Thanks for chiming in!

Well this is not actually the problem I am facing. What I want to do is - verify that the verification code provided is correct, before proceeding with setting the new password. I am not sure that the code you shared does that. Am I missing something?

KirilNN on 17 Jul 2017

Yea, this is what you want for forgot password flow if you would like the user to input the verification code on another page. On forgotPassword() promise resolve, you should get the email verify code and do your transition for routes/component. Then on handleSubmit for your Verify component is where you call confirmPassword(). Once that resolves, I send user to login screen or log user in if you have token (I haven't checked).

The main README is confusing. Use case 12 Starting and completing a forgot password flow for an unauthenticated user. has optional callback inputVerificationCode() which also calls confirmPassword(). My version is similar to @frsechet cognito wrapper [1], I recommend taking a look there for more context. Also, re-read use case #6 in from README [2], pay attention to the part of passing null (in my case I had to swap null for undefined). I am not using getAttributeVerificationCode() but follow a similar logic (passing null/undefined ).

[1]. https://github.com/frsechet/cognito-user-pool
[2]. If you would like the user to input the verification code on another page, you can set inputVerificationCode to null. If inputVerificationCode is null, onSuccess will be called immediately (assuming there is no error

guilsa on 17 Jul 2017

Well it is a bit different...

The workflow is the following one

User requests a reset password mail - we send the code by calling cognitoUser.forgotPassword()
On promise resolve the user is redirected to the verify reset code screen
User enters the reset code
We verify that the entered code is correct - what do we do here?
Redirect the user to set new password page if reset code is correct.
User enters new password - we call cognitoUser.confirmPassword()
On promise resolve the user is redirected to home page as an authenticated user.

KirilNN on 18 Jul 2017

steps 4 and 5 should be on same page and function call. My wrapper class has a method called confirmPassword but Cognito also has method by the same name (sorry). To verify you call Cognito's confirmPassword inside the promise declaration.

guilsa on 18 Jul 2017

This is what I do not want - enter the verification code and then navigate to another page to set the new pass, as the verification code could be incorrect, and then I will need to navigate the user back to the verification code screen and ask him to enter it again - it kind of breaks the whole experience with behind the curtain redirects.

KirilNN on 18 Jul 2017

Yes, as @gmredd mentioned, this is not possible at this point, verification code and new password need to come in the same call. We took this as an internal feature request.

itrestian on 19 Jul 2017

@guilsa Your code example is not waht you think it is

const promise = new Promise((resolve, reject) => {
      cognitoUser.forgotPassword({
        onSuccess: function (result) {
          resolve(result);
        },
        onFailure: function (err) {
          reject(err);
        },
        undefined
      });
    });

that is setting an object to { onSuccess: () => {}, onFailure: () => {}, 'undefined': undefined } as far as I can tell.