はじめに

前回、Auth0公式ReactクイックスタートにPasskeyログインを追加してみたという記事で、「ログイン強化編」の1回目としてPasskeyを追加しました。

今回は 「ログイン強化編」全2回 の2回目、 MFA（多要素認証） を同じReactアプリに追加してみます。

MFA（Multi-Factor Authentication）は、パスワードなどの「知っている情報」に加えて、TOTPアプリのワンタイムコードや生体認証といった「もう一つの要素」を組み合わせてログインを検証する仕組みです。仮にパスワードが漏洩しても、もう一つの要素がなければログインできないため、不正アクセスのリスクを大きく下げられます。

Passkeyのときと同様、MFAもAuth0では ダッシュボードの設定のみ で有効化でき、Reactアプリ側のコードは変更しません。

※こちらの手順は2026年10月時点のものとなります。

事前準備

前回・前々回で作成したReactアプリ（auth0-react-quickstart）
Auth0のテナント環境（無料トライアルで作成可能です）
TOTP（ワンタイムパスワード）を発行できるアプリ（Okta VerifyやGoogle Authenticatorなど）

1. Auth0ダッシュボードでMFAを有効化する

Auth0ダッシュボードの左メニューから 「セキュリティ」→「多要素認証」 を選択します。
利用可能な要素（ファクター）の一覧が表示されます。今回は最も手軽に試せる 「ワンタイムパスワード」（TOTP） をクリックし、トグルを ON にします。

※SMSやメール、プッシュ通知（Guardianアプリ）、WebAuthnなど他の要素も同じ画面から有効化できます。
画面下部の 「ポリシーを定義する」 で、MFAを要求するタイミングを選択します。今回は動作確認をしやすくするため、 「常時」 を選択します。

※本番環境では、ログインごとのリスクスコアに応じてMFAを要求する 「Adaptive MFA」 を使うことで、ユーザー体験とセキュリティのバランスを取ることもできます。
※ 「Adaptive MFA」 はEnterpriseプランのアドオンが必要です。
設定を保存します。

これでAuth0側の設定は完了です。Reactアプリ側のコードは前回・前々回のまま、何も変更していません。

2. 実際に動かしてみる

前回までに作成したReactアプリをそのまま起動します。

npm run dev

これでパスワード（またはPasskey）に加えて、もう一つの要素の確認が必須になりました。Reactアプリ側のコードは一切変更していません。

3. （参考）特定の操作だけMFAを要求したい場合

今回はログインのたびにMFAを要求する設定にしましたが、実際のアプリでは「決済処理の前だけMFAを要求する」といった ステップアップ認証 もよく使われます。

これは認可リクエストに acr_values=http://schemas.openid.net/pape/policies/2007/06/multi-factor パラメータを付与し、IDトークンに含まれる amr クレームでMFA実施済みかどうかを判定する仕組みです。今回は掘り込みませんが、興味のある方はAuth0公式のステップアップ認証ドキュメントをご参照ください。

まとめ

Auth0公式Quickstartで作ったReactアプリに、MFA（多要素認証）を追加してみました。

MFAの有効化はAuth0ダッシュボードの設定のみで完了し、アプリ側のコード変更は不要
ユニバーサルログインがMFAの登録・検証UIを丸ごと提供してくれるため、TOTPやWebAuthnの実装を自分で書く必要がない
ポリシーを変えることで「常時」「Adaptive」など運用に合わせた強度に調整できる

これで「ログイン強化編」の全2回（Passkey・MFA）は完了です。次回は、この認証基盤をActionsで拡張し、 「Passkeyならノーパス、ID/PWならMFAを要求する」 条件分岐ログインに挑戦してみたいと思います。

参考