Auth0 を用いたメール検証フロー

今回は Auth0 という IDaas を用いた際のサインアップのフローについて書きます。サインアップ時にメールによる検証（Email verification）を行い、指定のURLへリダイレクトを行い、ログインを行わせる場合の設定について記載します。

設定した項目については以下の3つなります。
- email verification を強制する
- サインアップ後のログインをオフにして、サインアップ成功メッセージを修正する
- email verification のあとのリダイレクト先を指定する

Email Verification を強制する

Auth0 で Email Vericication を強制するには Rules を使用することによって実現できます。Rules とは Auth0 で認証を行うフローをカスタマイズする仕組みとなります。Javascript を用いて処理を書くことが出来ます。今回は Rules の細かい説明については省略します。Email Verificationについては ダッシュボード > Rules > Create Rule > Access Control > Force email verification と選択することにより設定できます。今回の設定についてはコードを修正することはなくデフォルトのままで問題ありません。

サインアップ後のログインをオフにして、サインアップ成功メッセージを修正する

Auth0はデフォルトの設定だとサインアップ後に自動でログインする仕組みになっています。その状態でEmail Verificationを強制するとEmailの認証が行われていないのにログインが行われエラーが発生してしまいます。そのためサインアップ後のログインをオフにして、サインアップが成功したことのメッセージをEmailの認証を促すものに変える必要があります。

Auth0のログインUIのカスタマイズにはいくつか種類がありますが、今回はauth0-lockを使用していきます。 まずはAuth0のダッシュボードのUniversal Login > Login から Customize LoginPage をオンにします。このようにするとHTMLのカスタマイズを行うことができます。

LockはログインのUIを手軽にカスタマイズすることが出来るライブラリとなっており、Lockの設定を修正していきます。Lockは以下の初期化宣言時のoptionsに設定を行うことでカスタマイズを行うことができます。

https://auth0.com/docs/libraries/lock/v11/configuration

var lock = new Auth0Lock('clientID', 'account.auth0.com', options);

今回は以下の設定を行います。
- loginAfterSingUp: サインアップ後に自動ログイン
- languageDictionary: lockで使用されているテキストの表記設定（https://github.com/auth0/lock/blob/master/src/i18n/en.js）

loginAfterSignUp: false,
languageDictionary: {
		success: {
    signUp: 'verify email because send email in your input address.'
   },
},

Email verification のあとのリダイレクト先を指定する

メール認証を行った際に特定のURLへリダイレクトを行わせることにより任意のログインのフローを実行させることが出来ます。今回はAuth0ダッシュボードから Emails > Templates でテンプレートの種類を認証メールを選択します。ここで下記のRedirect Toの項目にリダイレクトしたいURLを設定します。下記では https://{application domain}/user というアプリケーションのユーザー情報を表示するURLへリダイレクトさせています。

まとめ

今回はAuth0を用いてメール認証を行い、特定のURLへリダイレクトさせる設定方法を書きました。Auth0では認証周りの設定を簡単に行うことができます。