この記事は公開から1年以上経過しています。

ローカル環境でNext.js＋Auth0を使った認証を試したところ、

Oops!, something went wrong
Callback URL mismatch.
The provided redirect_uri is not in the list of allowed callback URLs.
Please go to the Application Settings page and make sure you are sending a valid callback url from your application.

のようなエラーが出たため、その対応についての備忘録。

対応

Auth0のコールバックURLにデバッグ環境のURLを設定(追加)する。

1. Auth0ダッシュボードにログインする。
2. サイドメニューのApplicationsをクリックしてApplications画面を表示しアプリケーション一覧から作成中のアプリケーションを選択する。
3. Settingsタブを選択してApplication URIsのAllowed Callback URLsとAllowed Logout URLsにローカル開発環境のURLを設定する。

Allowed Callback URLs:

http://localhost:3000/api/auth/callback

Allowed Logout URLs:

http://localhost:3000

当該項目の説明には

After the user authenticates we will only call back to any of these URLs.

と認証後にこのURLにコールバックするとありますが、コールバックが正しく設定されていないと認証前でエラーになるようです。

参考ウェブサイトなど

• auth0 docs
  Configure Auth0

以上です。