调试“checks.state 参数丢失”错误 AUTH0

Question

我刚刚部署了新的 NextJs 博客应用程序https://blog.devdeveloper.ca/部署到 Vercal，但在使 auth0 正常工作时遇到问题。单击屏幕右上角的登录按钮时，用户将被重定向到 auth0 以完成身份验证流程。

在身份验证后重定向回我的应用程序时，我收到一个错误（checks.state 参数丢失），并且我似乎无法找到它发生的位置。

错误

我发现这篇文章描述了 google chrome 在 2020 年对 SameSite 属性进行的更新。看来这可能与此有关，因为在我的控制台中我收到以下警告。

SameSite 属性错误

我想知道我的登录处理程序中是否缺少一些配置选项。

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

export default handleAuth({
    async login(req, res) {
        try {
            await handleLogin(req, res, {
                authorizationParams: {
                    audience: `http://localhost:5000/`, // or AUTH0_AUDIENCE
                    // Add the `offline_access` scope to also get a Refresh Token
                    scope: 'openid profile email create:category delete:category update:category create:post update:post delete:post create:comment delete:comment', // or AUTH0_SCOPE
                    response_type: "code"
                },

            });

        } catch (error) {
            res.status(error.status || 400).end(error.message);
        }
    }
});

也许我忽略了一些完全显而易见的事情。

Answer 1

我遇到过同样的问题。

对我来说，这个错误只是有时发生。我无法找到解决方案，但我找到了解决方法。

就像所说的，这个错误确实是随机发生的，所以我只是添加了一个自定义redirect处理程序来将用户重定向到/。

这是我的pages/api/auth/[...auth0].js文件：

import auth0 from 'src/util/auth0'

export default auth0.handleAuth({
  // other stuff here...
  async callback(req, res) {
    try {
      await auth0.handleCallback(req, res)
    } catch (error) {
      res.redirect('/')
    }
  }
})