開発環境でAuth0を使う際にApplication Login URIの設定でハマった

開発環境で、ReactアプリケーションでAuth0を使って認証機能を追加しました。
その時、Auth0のApplication URIsのApplication Login URIの設定で少しハマりましたので、ちょっとしたことですが解決方法を残します。※2021年10月31日時点の情報です。

Application Login URIはhttpsにする

Reactアプリケーションの開発環境のURLは http://localhost:3000 に設定していました。おそらくデフォルトだと思います。
ですので、Auth0のApplication Login URIに http://localhost:3000 を設定しようとしたのですが、エラーになりました。エラーメッセージによるとhttpsにしてくれとのこと。

Error!Payload validation error: 'Object didn't pass validation for format absolute-https-uri-or-empty: http://localhost:3000' on property initiate_login_uri (Initiate login uri, must be https).

ですので、開発環境のURLをhttpsにします。Reactでは.env.developmentにHTTPS=trueと書けばhttpsにしてくれます。※React 17.0.2を使っています。

そして、Application Login URI を https://localhost:3000 に変更しました。（しかし、これだけではダメ…）

Application Login URIでlocalhostは使えない

Application Login URI を https://localhost:3000 に変更して保存すると、先ほどと同じエラーがでます。

Error!Payload validation error: 'Object didn't pass validation for format absolute-https-uri-or-empty: https://localhost:3000' on property initiate_login_uri (Initiate login uri, must be https).

これは localhostの代わりに 127.0.0.1 を使うとエラーを回避できました。
最終的にApplication Login URI は https://127.0.0.1:3000 になります。
なぜこれでエラーを回避できるのかは分かりませんが、とりあえず動くからヨシ！の気持ちです😹

参考

Application Login URI field payload validation error for https://localhost:3000/authorize