ReactでAuth0のマジックリンクを試してみた

最初

Auth0という認証サービスはユーザー統合などによく使われています。
ユーザーログインについては、Auth0に様々なログイン方法（MFA、One-Time-Passwordなど）がありまして、その中にパスワードレスはユーザーにとってとても便利で、今回はAuth0のマジックリンクパスワードレスを試してみたいと思います。 　

環境

• M1 Max Macbook Pro
• VS Code 1.73.1
• Node.js v18.9.0
• npm 8.19.1

手順

Auth0 SPA作成

「Appilications」-> 「Appilications」-> 「Create Application」でアプリケーション作成画面に入ります。
Single Page Web Applicationを作ります。

パスワードレスの設定 　

「Authentication」-> 「Passwordless」でパスワードレスの設定画面に入ります。

「Email」のトグルボタンを押して、他の設定はデフォルトのままにして大丈夫ですが、パスワードレス「Email」の設定画面のApplicationsタブに、先程作ったSPAアプリをオンにします。 　

「Save」ボタンで設定を保存します(これでEmailのトグルが緑色になり、オンされる状態になります)。 　

Universal Loginの設定 　

Auth0 Tenantのデフォルト状態はUniversal Loginが使われてます。Universal Loginにパスワードレスをオンするために、カスタマイズすることが必要です。 　

「Branding」->「Universal Login」->「Advanced Options」->「Login」のHTML部分にあるテンプレートを「Lock passwordless」にします。 　

同じ画面スクロールダウンして、「パスワードレス方法はマジックリンクで行う」というパラメーターを追加し、「Save Changes」で保存します：

             
passwordlessMethod: 'link',             

Reactのダウンロードとアプリの設定

 

先程作ったSPAの設定画面にある Quick Start タブに入ります。
Reactを選択し、React: Login 画面の「DOWNLOAD SAMPLE」（ポップアップ画面）-> 「DOWNLOAD」ボタンでサンプルプロジェクトをダウンロードし、展開します。 　 その同時にガイドに書かれたように

http://localhost:3000

をApplication Settingsの

• Allowed Callback URLs
• Allowed Web Origins
• Allowed Logout URLs

に追加します。（ローカルでポート3000が使われる可能性もあるので、ご自身で調整してください）

Reactコードのカスタマイズ（重要）

マジックリンクは別のタブで開かれるので、sessionではなくcookieの形で認証情報をブラウザ上で共有します。（しないと、エラーが出ます）

参考リンク（reactのを見つからなくて、auth0-vueのなんですが、同じです）：https://auth0.github.io/auth0-vue/interfaces/Auth0VueClientOptions.html#useCookiesForTransactions

src -> index.jsのproviderConfigに

           
useCookiesForTransactions: true,         

という一行を追加します。 　

Reactの起動とログイン

下記のコマンドを実行します：　

npm install
npm start   

サンプリプロジェクトをローカルで起動し、画面右上の「Log in」を押します。
Universal Login画面が表示されたら、メールアドレス入力し、「Submit」で「メールが送信されたよう」という画面に移ります。

 

届いたメールのマジックリンクを開いて、「Accept」を押すと（初回のみ）、認証成功となります。 　

Auth0 Passwordless Magic Linkの検証はこれで成功です。

以上です。