Cognito Custom authentication flow - getting user input mid-flow

Question

I am creating a custom authentication flow using AWS Cognito to send a MFA code via email through the cognito triggers. I am using the authenticateUser() method to do so and my code snippet is as code below, following [this](https://repost.aws/questions/QUeCpOxtEVQmeAKk9MaGqlrA/cognito-custom-authentication-flow-initiate-auth-giving-error) example:

![Enter image description here](https://repost.aws/media/postImages/original/IM9UPlbhJXT7Wb3e6ps7Wyug)

However, instead of a prompt asking the user for the OTP, is it possible to perform a setState operation when I get into the customChallenge callback that would render a UI component (textbox), get the MFA input from the user via a textbox, and then submit that info using sendCustomChallengeAnswer() without needing to exit the authenticateUser block?

Thank you very much

Edit: Someone with a similar problem here: https://stackoverflow.com/questions/72783068/aws-cognito-custom-challenge-frontend-implementation-inside-vuex

Answer

Hello,

I understand that you have created a custom authentication flow using AWS Cognito authenticateUser() method to send a MFA code via email through the cognito triggers. Further, you would like to perform a setState operation, where you can get to customChallenge callback to get the MFA input from the end user via a textbox, and then submit the MFA code using sendCustomChallengeAnswer() without exiting the authenticateUser block.

From the query and the shared code snippet it seems that you are using "amazon-cognito-identity-js" SDK. This SDK  uses a concept called "callback" in JavaScript to handle the Async APIs like authenticateUser, however, this SDK does not support the advance concept called Async/Await in JS, due to which we cannot use this library to make a call and then get result. Then perform something else and then finally continue with the process to process MFA(which you want, where using MFA UI user can put it, then proceed ahead with processing the MFA).

I would also like to add here that, the above solution has been a popular ask. More information on the same can be found in the below shared link:
> https://github.com/amazon-archives/amazon-cognito-identity-js/issues/88

However, as this functionality is not supported directly by the "amazon-cognito-identity-js" SDK, hence, in order to implement this using this SDK you would have to write a lot of boilerplate code over the available SDK APIs to mimic the behavior.

Moving ahead, the functionality required by you has been implemented using AWS Amplify library. It has added a lot of code on top of the existing functionality to provide all the features which you require. Furthermore, the possible options for you here would be to use the AWS Amplify library or write custom logic/code over the existing SDK functionalities to mimic the required behavior. Please refer the below shared links, to get more information on the AWS Amplify library implementation:

> https://aws.amazon.com/blogs/mobile/extending-amazon-cognito-with-email-otp-for-2fa-using-amazon-ses/

> https://docs.amplify.aws/lib/auth/mfa/q/platform/js/#advanced-use-cases

Cognito Custom authentication flow - getting user input mid-flow

Relevant content