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.jsproviderConfig

useCookiesForTransactions: true,

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

Reactの起動とログイン

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

npm install
npm start

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

 

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

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

以上です。