Auth0 端点 "api/auth/me" returns Next.js 应用程序中的 404 错误

Question

我已经完成了以下 tutorial 以使我的 Next.js 应用程序与 Auth0 集成。我可以正常登录和注销，但是在登录后尝试在页面上显示用户信息时，无法返回 user 对象。我已确保使用我的应用程序的密钥呈现 user 对象或 env.local 文件的 Profile.js 页面没有任何问题。

进一步检查后，我注意到我在浏览器控制台中收到一条错误消息：Failed to Load Resource ... 404 Not Found: http://localhost:3000/api/auth/me。

这个错误让我直觉认为我的 next.js 应用程序和 Auth0 之间的映射存在差异，因为我修改了 next.config.js:

中的基本路径

module.exports = {
  basePath: '/my_path',

  webpack: (config) => {
    return config
  },

  env: {
  },

  publicRuntimeConfig: {
    BACKEND_API_URL: process.env.BACKEND_API_URL,
    CONSENT_COOKIE_NAME: 'ConsentCookie'
  },
}

有没有办法将我的基本路径添加到 user 对象从中返回的端点？最终结果类似于：https://localhost:3000/my_path/api/auth/me

我不能 100% 确定这会解决我的问题，让 user 对象正确返回，所以我愿意接受任何其他建议，并愿意在我的应用程序中添加更多关于特定文件的上下文。

编辑：在 Auth0 论坛上提出这个问题后（link), I was pointed towards this link，这是另一个例子 Next.js Auth0 示例应用程序，除了他们用 TypeScript（我不熟悉）编写了他们的前端。他们正在操纵UserContext 对象并重置配置文件URL，这就是我所追求的；那么 JavaScript 相当于什么？

我提到的对 Auth0 论坛 post 的相同回复还包括另一个 link 示例函数，该函数为登录创建自定义 URL。这非常接近我所追求的，因为我正在尝试创建一个自定义身份验证 URL 来检索 User 对象并消除 404 ... /api/auth/me not found 错误。由于我对 JS 的经验不足，我尝试创建与前面所述的示例类似的函数的尝试失败了，那么这会是什么样子呢？

Answer 1

在找到解决此问题的极其简单的解决方案后，我感到苦乐参半。

在 NextJS-Auth0 存储库的 readme.md 中找到... 经过数小时的寻找解决方案后，这一小段代码解决了我所有的问题 -

// _app.js
function App({ Component, pageProps }) {
  return (
    <UserProvider loginUrl="/foo/api/auth/login" profileUrl="/foo/api/auth/me">
      <Component {...pageProps} />
    </UserProvider>
  );
}

现在回去擦掉我桌子上的眼泪..

Auth0 端点 "api/auth/me" returns Next.js 应用程序中的 404 错误

Auth0 Endpoint "api/auth/me" returns a 404 Error in Next.js App

javascript

typescript

auth0

next.js

auth0-connection