Auth0 中断 Next.js -- 当页面使用 withPageAuthRequired HOC 包装时，pageProps 为空答案

【问题标题】：Auth0 breaks Next.js -- pageProps are empty when page is wrapped with withPageAuthRequired HOCAuth0 中断 Next.js -- 当页面使用 withPageAuthRequired HOC 包装时，pageProps 为空
【发布时间】：2021-07-01 19:39:14
【问题描述】：

描述问题

通过getServerSideProps 提供的pageProps 对象在使用withPageAuthRequired 时为空。我知道我一定遗漏了一些基本的东西，因为这一定是一个非常常见的用例。

预期的行为是什么？

我希望当我调用getServerSideProps 时，我应该在我的函数render 调用中收到pageProps 参数。但是，pageProps 是一个空对象 {}。 getServerSideProps 被调用，但是当组件渲染时，它的 props 丢失了。

复制

第 1 步 - 为 UserProvider 创建自定义 _app。

function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}
export default (AdminApp)

第 2 步 - 创建一个简单的页面（例如 Manage），用 PageAuthRequired HOC 封装。

function Manage(props) { // <-- props is missing `data` attribute.
  return (
      <span>hello {props.data.siteTitle}</span>
  );
}

export default withPageAuthRequired(Manage);

第 3 步 - 通过 getServerSideProps 将 pageProps 提供给自定义应用程序。

export async function getServerSideProps(context) {
  const websiteData = await getWebsiteData();

  return {
    props: {data: websiteData}
  }
}

请注意，在第 2 步中，props 并未实际提供第 3 步中的数据。这仅在我将 auth0 添加到 next.js 时发生。

环境

使用的这个库的版本： next@10.0.7 @auth0/nextjs-auth0@1.2.0

【问题讨论】：

您能否说明您的getServerSideProps 声明的文件是什么？是在_app 页面还是Manage 页面上？
@juliomalves 它在Manage 页面中。不过，我已经解决了这个问题。问题是我很笨。

标签： javascript node.js reactjs next.js auth0

【解决方案1】：

哎呀，这很尴尬。原来我没有正确地将道具从_app 文件传递给组件。

function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component /> {/*WHOOPS!*/}
    </UserProvider>
  );
}
export default (AdminApp)

我尝试了所有我能想到的东西，但一定忘了把它放回去:(

【讨论】：