[FR] Email OTP challenge not handled by Authenticator component

[goatcube]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

In an app using the Authenticator component, when Advanced security is enabled for a Cognito user pool and email MFA is required, attempts to login result in the following error message being displayed:

An error occurred during the sign in process. EMAIL_OTP challengeName returned by the underlying service was not addressed.

What's the expected behaviour?

When there is an email OTP challenge, the user is prompted to enter the code that is sent via email and no error messages are displayed.

Help us reproduce the bug!

1. Enable Advanced security for a Cognito user pool
2. Require email messages MFA option
3. In the app, enter email and password, click Sign in.

The following error message is displayed:

An error occurred during the sign in process. EMAIL_OTP challengeName returned by the underlying service was not addressed.

Code Snippet

// Put your code below this line.
import { Amplify } from "aws-amplify";

import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

import awsExports from "./aws-exports";
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Console log output

No response

Additional information and screenshots

No response

[calebpollman]

Hi @goatcube, thanks for opening this. Marking as a feature request for the Authenticator, adding support for Email OTP is something we are interested in

[msudol]

Hi @goatcube, thanks for opening this. Marking as a feature request for the Authenticator, adding support for Email OTP is something we are interested in

I just ran into this exact same issue and found this thread on it. So, e-mail MFA isn't currently supported with amplify (authenticator)?

[cwomack]

@msudol, email MFA is not currently supported in the Authenticator component. However, the amplify-js repo is tracking this in a related feature request (Issue #13837). The support for this will likely be released sooner for the JS API's, but we'll update this issue with progress as it's made for the Authenticator component as well.

[jordanwegener]

Hi @cwomack, is there any update or ETA for email OTP support for the Authenticator component?

[cwomack]

@jordanwegener, I don't have any updates yet unfortunately. As soon as we have an ETA for when this feature will be supported within the Authenticator component, we'll be sure to leave a comment on this!

[jjarvisp]

Hey folks, we have released Authenticator support for Email MFA under a tagged preview release. This update will provide support for both the EMAIL_OTP and SELECT_MFA_TYPE challenges. We will be looking for feedback from you (the community) and preparing an official release in the near future.

Please keep in mind the implementation is currently experimental and not meant for production, but please feel free to share any comments, questions, or issues.

React

npm i @aws-amplify/ui-react@email-mfa

React Native

npm i @aws-amplify/ui-react-native@email-mfa

Angular

npm i @aws-amplify/ui-angular@email-mfa

Vue

npm i @aws-amplify/ui-vue@email-mfa

[goatcube]

@jjarvisp this works great. Thank you!

[ppuvan]

Hello @jjarvisp we are also looking for this update in the authenticator component for an existing application. Can you give us an update on release schedule for this patch?

Thanks for everything else with Amplify, it has been working great for us so far.

[jjarvisp]

Hey all, Authenticator support for Email MFA has been released under the latest tag! This update adds support for the EMAIL_OTP and SELECT_MFA_TYPE challenges.

# React
npm i @aws-amplify/ui-react@latest

# React Native
npm i @aws-amplify/ui-react-native@latest

# Angular
npm i @aws-amplify/ui-angular@latest

# Vue
npm i @aws-amplify/ui-vue@latest

I will close this issue for now as the feature has been released. Please feel free to open a new issue if any challenges are encountered in the future. Thanks everyone!

[Furytron]

https://docs.amplify.aws/react/build-a-backend/auth/concepts/multi-factor-authentication/#multi-factor-authentication-with-email docs need to be updated due to this being implemented.