Next.jsにAuth0で「Callback URL mismatch.」時の対処法

どうも、嶋村 星哉です。
Next.jsにAuth0で認証機能を作っていると、Callback URL mismatch.と出た時の対処法を紹介します。

エラーの内容

Auth0で設定したコールバックURLが有効なものじゃないよという内容でした。
なので、有効なコールバックURLを指定してねと言われました。

Auth0の設定内容

解決方法

この時の私は、コールバックURLを理解しておらず、ログイン成功後にリダイレクトしてほしいURLだと思っていました。リダイレクトのURLではなく、コールバック関数のURLを指定するのが正解だそうです。

どこにコールバック関数ができているのかというと、handleAuth()を実行した場所に出来上がるそうです。

Under the hood, handleAuth() creates the following routes:

・　/api/auth/login: The route used to perform login with Auth0.
・　/api/auth/logout: The route used to log the user out.
・　/api/auth/callback: The route Auth0 will redirect the user to after a successful login.
・　/api/auth/me: The route to fetch the user profile from.

引用：https://auth0.com/docs/quickstart/webapp/nextjs/01-login

コールバック関数の場所がわかったので、設定を変更します。

変更したので、ログイン画面が出るか確認します。

ちゃんと出ました！よかった〜！
「Allowed Logout URLs」はログアウト後にリダイレクトするURLです。流れで変更してしまわないように気をつけましょう！