如何修复 "Callback URL mismatch" NextJs Auth0 App

Question

我在我的 NextJS 应用程序中使用 Auth0 NextJs SDK 进行身份验证。我正在学习本教程 https://auth0.com/blog/introducing-the-auth0-next-js-sdk/。在我的本地机器上，一切正常。

我本地服务器中 Auth0 的配置：

AUTH0_SECRET=XXXXX
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://myappfakename.us.auth0.com
AUTH0_CLIENT_ID=XXXX
AUTH0_CLIENT_SECRET=XXXX

在 Auth0 仪表板中，我添加了以下 URL：

Allowed Callback URLs: http://localhost:3000/api/auth/callback
Allowed Logout URLs: http://localhost:3000/

我的本地应用程序在本地运行良好。

我在 Vercel 上上传了应用程序。并改变了

AUTH0_BASE_URL=https://mysitefakename.vercel.app/

在 Auth0 仪表板中，更新了以下信息：

Allowed Callback URLs: https://mysitefakename.vercel.app/api/auth/callback
Allowed Logout URLs: https://mysitefakename.vercel.app

我收到以下错误：

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

我应该对 Vercel 进行哪些更改？

Answer 1

您可以尝试检查重定向到 auth0 时 vercel 是否未更改 url。你的配置对我来说似乎不错。错误是非常明确的。我认为一个好的选择应该是验证重定向（如果由 vercel 处理）是否与 auth0 期望的 url 相同。

并且不要忘记在执行回调时添加您当前所在的 url。执行回调时你在https://mysitefakename.vercel.app/api/auth/callback吗？（调用 auth0）。

Answer 2

您必须在 env.local 文件

中更改您的基础 url

AUTH0_BASE_URL=https://mysitefakename.vercel.app/

你还可以再制作两个 env 文件，即 env.development 和 env.production，并为不同的情况设置不同的基数 url，以便自动生成正确的基数 url加载取决于您的网络应用程序运行.

Answer 3

您需要在 api/auth/[...auth0].js 下添加 handleLogin 即可解决：

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';

    export default handleAuth({
      async login(request, response) {
        await handleLogin(request, response, {
          returnTo: '/profile',
        });
      },
    });

不要忘记在 [Auth0 仪表板] 中添加允许的回调 url：https://manage.auth0.com/dashboard 用于本地和托管实例的托管应用程序： http://localhost:3000/api/auth/callback, https://*.vercel.app/api/auth/callback

如何修复 "Callback URL mismatch" NextJs Auth0 App

How to fix "Callback URL mismatch" NextJs Auth0 App

auth0

next.js

vercel