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

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

#Auth0 Actions

#Okta Customer Identity Cloud（Auth0）

#Okta

藤井元貴

2022.01.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

Auth0 Rulesを使う
Auth0 Actionsを使う

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

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

【Auth0】メールアドレスの確認が済んでいないユーザーのログインを拒否する - Qiita

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

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

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

Auth0 Actionsの設定する

Actionを作成する

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

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

Name: verify-email（任意でOK）
Trigger: Login / Post Login
Runtime: Node 16

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

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

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

Actions Triggers: post-login

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

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

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

ActionsのFlowsにあるLoginを選択します。

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

最後に、右上の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が実行されているからです。

Loginボタンを押す
Auth0のUniversal Login画面を表示しようとする
ログインは成功しているので、Actionを実行する
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