はじめに
前回、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
-
http://localhost:5173にアクセスし、 「Log In」 をクリックしてユニバーサルログイン画面を表示します。
-
メールアドレス/パスワード（またはPasskey）でログインします。ポリシーを「常に要求する」に設定したため、認証情報の確認後、続けて MFAの登録画面 が表示されます。
-
Okta VerifyやGoogle AuthenticatorなどでQRコードを読み取り、アプリに表示された6桁のコードを入力します。
-
コードが正しく認証されると、前回までと同様にユーザーのアイコン・名前・メールアドレスと 「Log Out」 ボタンが表示されたアプリ画面に遷移します。
-
「Log Out」 で一度サインアウトし、再度 「Log In」 をクリックします。今度は認証情報の入力後、登録済みのTOTPアプリで生成したコードの入力を求められることを確認できます。
これでパスワード（または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を要求する」 条件分岐ログインに挑戦してみたいと思います。