Auth0 端点“api/auth/me”在 Next.js 应用程序中返回 404 错误

Question

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

经过进一步检查，我注意到浏览器控制台中出现错误，内容为：Failed to Load Resource ... 404 Not Found: http://localhost:3000/api/auth/me。

这个错误让我有一种直觉，因为我修改了 next.config.js 中的基本路径，所以我的 next.js 应用程序和 Auth0 之间的映射存在差异：

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 论坛（链接）上提出这个问题后，有人向我指出了这个链接，这是另一个示例 Next.js Auth0 示例应用程序，只不过他们用 TypeScript（我不熟悉）编写了前端。他们正在操纵UserContext对象并重置ProfileURL，这就是我所追求的；那么与此等效的 JavaScript 是什么？

我提到的对 Auth0 论坛帖子的相同回复还包括另一个指向示例函数的链接，该示例函数为登录创建自定义 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>
  );
}

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