Auth0のActionsを使って、メールアドレス未検証のとき、ログインさせない

Auth0でメールアドレスが未検証のユーザをログインさせたくないです。 Auth0のActionsで実現してみました。
2022.01.05

Auth0でメールアドレス未検証のユーザをログインさせたくないとき、いくつかの実現方法があります。

どちらでも実現できますが、今後、Actionsの強化に重点を置くとのことなので、Actionsを使って試してみました。

なお、Rulesで実現する場合は、下記が参考になります。

おすすめの方

  • Auth0 Actionsの雰囲気を知りたい方
  • Auth0 Actionsを使って、メールアドレスが未検証のユーザのログインを拒否する

Auth0テナントとReactアプリを作成する

下記を参考に作成します。

これで、ログイン・ログアウトができるようになりました。

Auth0 Actionsの設定する

Actionを作成する

まずは、ログイン時に実行するActionを作成します。ActionsLibraryにあるBuild Customを選択します。

Auth0のActionsを作成する(Build Custom)

下記の内容でActionを作成します。

  • Name: verify-email(任意でOK)
  • Trigger: Login / Post Login
  • Runtime: Node 16

Auth0のActionsを作成する

コード入力画面になるので、下記を入力します。

exports.onExecutePostLogin = async (event, api) => {
  if (!event.user.email_verified) {
    api.access.deny(`Access to ${event.client.name} is not email verified.`);
  }
};

Auth0のActionsで実行するコード

サンプル、および、eventepiの構造は下記が参考になります。

最後に、右上のDeployを押してデプロイします。

LibraryにActionが追加されました。

Auth0のActionsのCustomが追加された

ログイン時のフローにActionを追加する

ActionsFlowsにあるLoginを選択します。

Auth0のActionsのLoginを選択する

さきほど作成したActionをドラッグ&ドロップします。

Auth0のActionsのLoginに追加する

最後に、右上のApplyを押します。

ログインしてみる

メールアドレスが未検証のとき

ID/PASSを入力して、ログインします。

ログインしてみる

下記画面が表示されました。つまり、未ログインの状態です。

ログインできなかった

URLは下記となっています(コールバックされた)。

http://localhost:3000/?error=access_denied&error_description=Access%20to%20My%20App%20is%20not%20email%20verified.&state=xxx

なお、この状態でLoginを押すと、ログイン画面は表示されず、上記のURLにコールバックされます(state部分は異なる)。 これは、ログインしたあと、つまり、「ID/PASSがOK」のあとにActionが実行されているからです。

  1. Loginボタンを押す
  2. Auth0のUniversal Login画面を表示しようとする
  3. ログインは成功しているので、Actionを実行する
  4. ActionでNGになるので、Errorとしてコールバックされる

そのため、エラーハンドリング(メールアドレスを検証してねのメッセージを出す、など)は、アプリケーション側で実装します。 Universal Login画面でメッセージ表示はできません。

また、RulesとActionsの両方が存在する場合は、先にRulesが実行されます。

Executed after a user logs in and after any Rules that exist. Also executed when Refresh tokens are issued.

https://auth0.com/docs/actions/actions-overview

メールアドレスが検証済のとき

ID/PASSを入力して、ログインします。

ログインしてみる

下記画面が表示されました。つまり、ログイン成功しました。

ログインできた

参考