If I set a cognito pool to require MFA (TOTP) my implementation on the client side with AmplifyAuthenticator from @aws-amplify/ui-react works just fine automatically.
But if I create a cognito pool where MFA is optional, there is no automatic option for the user to opt into MFA, the workflow is the typical onboarding with username/pass. I could not find any good documentation around this either. I also tried explicitly putting a <AmplifySelectMfaType> component as a child of <AmplifySignIn> but it didn't do anything.
The setup is pretty simple, at the top level we display the app if a Cognito user is found, otherwise display the AmplifyAuthenticator to login. We don't allow users to sign themselves up to our app, so a user definition exists in Cognito when they first login.
app.component.tsx
import {
AmplifyAuthenticator,
AmplifySignIn,
AmplifySelectMfaType,
} from '@aws-amplify/ui-react';
const RoutedApp = () => {
const { cognitoUser } = useSession();
if (!cognitoUser) {
return (
<Router>
<AmplifyAuthenticator>
<AmplifySignIn
headerText="Sign in"
slot="sign-in"
hideSignUp
color={Colors.BRANDEIS_BLUE}
usernameAlias="email"
formFields={[
{
type: 'email',
label: 'Email Address',
placeholder: 'Enter your email address',
required: true,
disabled: true,
value: cognito.email,
},
{
type: 'password',
label: 'Password',
placeholder: 'Enter your password',
required: true,
},
]}
>
<AmplifySelectMfaType MFATypes={{ SMS: false, TOTP: true, Optional: true }} />
</AmplifySignIn>
</AmplifyAuthenticator>
</Router>
);
}
return <TopApplicationComponent />;
};
