Auth0 breaks Next.js — pageProps are empty when page is wrapped with withPageAuthRequired HOC

Question

Describe the problem

pageProps supplied via getServerSideProps object is empty when using withPageAuthRequired . I know I must be missing something basic as this must be an extremely common use case.

What was the expected behavior?

I expect that when I call getServerSideProps , I should receive the pageProps parameter in my functions render call. However, pageProps is an empty object {} . getServerSideProps is called, but when the component renders, its props are missing.

Reproduction

Step 1 - Create custom _app for UserProvider.

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

Step 2 - Create a simple page (eg Manage ) wrapped in withPageAuthRequired HOC.

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

export default withPageAuthRequired(Manage);

Step 3 - Provide pageProps to the custom app via getServerSideProps .

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

  return {
    props: {data: websiteData}
  }
}

Notice that in step 2, the props is not actually supplied with data from step 3. This only happened when I added auth0 to next.js.

Environment

Version of this library used: next@10.0.7 @auth0/nextjs-auth0@1.2.0

Answer 1

Yikes this is embarrassing. Turns out I wasn't properly passing the props to the component from the _app file.

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

I tried everything I could think of and must've forgotten to put that back:(