[Auth0] パスワード変更完了画面に「アプリへ戻る」ボタンを表示する

こんにちは、CX事業本部の若槻です。

今回は、Auth0 のパスワード変更完了画面に「アプリへ戻る」ボタンを表示してみました。

何をしたいか

既定の設定では、ユーザーが Auth0 の UI でパスワードの変更を完了したら、下記のようなアプリへ戻るためのリンクなどのない行き止まりの画面に遷移します。

しかしこの画面だとユーザーが次にどうすれば良いか戸惑ったり、わざわざアプリのURLを開き直すなどの手間が発生したりしてしまいます。そこでパスワード変更完了画面にアプリへ戻るためのリンクを配置したり、アプリ画面へ自動リダイレクトさせたりできないか調べてみました。

やってみた

設定方法を調べてみるとドキュメントに以下のような記載がありました。Universal Login Experience が New の場合と Classic の場合とで設定方法として同じようですが、ログインページへのリダイレクトの動作は異なってくるようです。

• Password reset | New Universal Login Experience

In the Classic Login Experience, you can configure a URL to redirect users after completing the password reset. The URL will receive a success indicator and a message. The New Universal Login Experience redirects users to the default login route when it succeeds and will handle the error cases as part of the Universal Login flow. The Redirect URL in the email template will be ignored. Please note that you must provide an Application Login URI in the Dashboard > Applications > Applications Settings tab for the redirect URLs to work.

今回は New Universal Login Experience としたテナントで上記設定を行い、動作を確認してみます。（後述しますが、同じ設定を実施しても Classic の方はボタンの表示やリダイレクトは行われませんでした。）

設定

Auth0管理ダッシュボードにログインしたら、サイドバーメニューより[Applications]-[Applications]を開き、設定を行いたいアプリ（SPAなど）を開きます。

[Settings]タブ内の[Application URIs]-[Application Login URI]にリダイレクト先としたいURL（アプリのログインページなど）を指定します。

タブ内をさらに下にスクロールし、[Save Changes]をクリックして設定変更を保存します。

ちなみに、httpsから始まらないURL（http://localhost:3000など）を指定すると保存時にバリデーションエラーとなるので注意。

動作確認

パスワード変更リクエストメールのリンクから開いたパスワード変更ページでリセットを行います。

変更が完了すると完了画面に[<アプリ名>に戻る]ボタンが表示されています。クリックします。

アプリのログインページに戻れました。

その他動作確認してみたこと

• Email検証完了画面

戻るボタンは表示されませんでした。

• Classic Universal Login Experience の場合のパスワード変更完了画面

ボタン表示や自動リダイレクトなどは行われませんでした。

• アプリケーションが複数あり、Application Login URI を設定していないアプリからパスワードリセットを行った場合

戻るボタンは表示されませんでした。

• 複数アプリケーションのうち一部のアプリにのみ Application Login URI を設定しており、システムからAPIでパスワード変更をリクエストした場合

システムから Authentication API を使用してパスワードをリセットする際は、実はパラメーターとして特定のアプリケーションの ClientID を指定する必要があります。（以前のエントリ参考）

なので Application Login URI を設定しているアプリの ClientID を指定した場合は、下記のように戻るボタンが表示されます。

おわりに

Auth0 のパスワード変更完了画面に「アプリへ戻る」ボタンを表示してみました。

New Universal Login Experience の画面をぼちぼち触っていますが Classic と比べて器用なことが出来ていいですね！

参考

• Unable to redirect after Password Reset - Auth0 Community

以上