【Auth0で学ぶ認証強化】Auth0公式ReactクイックスタートにPasskeyログインを追加してみた（1/2）

Last updated at 2026-10-05Posted at 2026-09-30

はじめに

前回、Auth0公式Quickstartで学ぶ！ReactのSPAに認証機能を組み込んでみたという記事で、Reactアプリに「ログイン」「ログアウト」「ユーザー情報表示」を組み込みました。

今回はその続きとして、「ログイン強化編」全2回の1回目、Passkey（パスキー） を使ったログインを追加してみます。2回目ではMFA（多要素認証）を追加する予定です。

Passkeyは、パスワードの代わりにデバイスの生体認証（指紋・顔認証）やPINでログインできる仕組みです。フィッシングに強く、パスワードを覚える・管理する必要がなくなるのが最大のメリットです。

Auth0では、Passkeyの有効化はダッシュボードの設定のみで完了し、前回作ったReactアプリのコードは一切変更しません。「Passkey実装して」と言われて身構える必要がないことを、実際に手を動かして確認してみます。

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

Auth0ダッシュボードの左メニューから 「認証」→「データベース」 を選択し、前回のアプリで使用しているデータベース接続（デフォルトでは Username-Password-Authentication）をクリックします。
データベース接続の 認証方法タブ にある パスキーの「構成」 を選択します。
「パスキーを有効化」 のチェックボックスをONにします。また、その下にある パスキー認証の前提条件 を全て完了させます。
画面下部の 「保存」 をクリックします。

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

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

npm run dev

http://localhost:5173 にアクセスし、 「Log In」 をクリックしてユニバーサルログイン画面を表示します。
既存アカウントでログイン、またはサインアップします。ログインに成功すると、ユニバーサルログイン画面上で 「このデバイス上でReact App用にパスキーを作成」 といった案内が表示されます。
案内に従って登録を進めると、OS標準の生体認証（Touch ID / Windows Helloなど）のダイアログが表示されます。指紋や顔認証を行うと、パスキーの登録が完了します。
登録後は前回と同じく、ユーザーのアイコン・名前・メールアドレスと 「Log Out」 ボタンが表示されたアプリ画面に遷移します。ここまではコード上の見た目に変化はありません。
「Log Out」 で一度サインアウトし、再度 「Log In」 をクリックします。今度はメールアドレス/パスワードの入力を求められず、デバイスの生体認証だけでログインが完了することを確認できます。

※参考画像はパスキーの保存先に1Passwordを利用している画面となります。

パスワードを一切入力せずにログインが完了しました。Reactアプリ側のコードは前回から1行も変えていません。

Auth0公式Quickstartで作ったReactアプリに、Passkeyログインを追加してみました。

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