reactjs - AWS Cognito AmplifyAuthenticator でオプションの MFA を設定する方法を教えてください。

Question

Cognito プールを MFA (TOTP) に設定すると、from を使用しrequireたクライアント側の実装が自動的に正常に機能します。AmplifyAuthenticator@aws-amplify/ui-react

しかし、MFA が である cognito プールを作成した場合optional、ユーザーが MFA をオプトインするための自動オプションはありません。ワークフローは、ユーザー名/パスを使用した典型的なオンボーディングです。これに関する適切なドキュメントも見つかりませんでした。<AmplifySelectMfaType>コンポーネントを子として明示的に配置しようとしまし<AmplifySignIn>たが、何もしませんでした。

設定は非常に簡単です。最上位レベルで、Cognito ユーザーが見つかった場合はアプリを表示し、そうでない場合はAmplifyAuthenticatorログインするために を表示します。ユーザーが自分でアプリにサインアップすることを許可していないため、最初のログイン時にユーザー定義が Cognito に存在します。

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 />;
};