この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Auth0でメールアドレス未検証のユーザをログインさせたくないとき、いくつかの実現方法があります。
- Auth0 Rulesを使う
- Auth0 Actionsを使う
どちらでも実現できますが、今後、Actionsの強化に重点を置くとのことなので、Actionsを使って試してみました。
なお、Rulesで実現する場合は、下記が参考になります。
おすすめの方
- Auth0 Actionsの雰囲気を知りたい方
- Auth0 Actionsを使って、メールアドレスが未検証のユーザのログインを拒否する
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の構造は下記が参考になります。
最後に、右上の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
メールアドレスが検証済のとき
ID/PASSを入力して、ログインします。
下記画面が表示されました。つまり、ログイン成功しました。
