Passing an intial user from the server to <Auth0Provider user={session?.user}> with Pages Router #1916

florisdg · 2025-02-13T18:02:58Z

Checklist

I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
I have looked into the API documentation and have not found a suitable solution or answer.
I have searched the issues and have not found a suitable solution or answer.
I have searched the Auth0 Community forums and have not found a suitable solution or answer.
I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

In v3 I used to have this in my Next.js app with Pages router, in the file src/pages/_app.tsx:

export function App({ Component, pageProps, router }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page: ReactNode) => page)

  return <UserProvider user={pageProps.user}>
...

Every page using getServerSideProps was wrapped with withPageAuthRequired, which from my understanding would populate this 'user' property in the pageProps shown above. This would make the 'user' object immediately available on first-render with pages that use getServerSideProps.

In v4 this is obviously gone, and the V4_MIGRATION_GUIDE.md (nearly all of the links in this guide are broken) points towards this in EXAMPLES.md:

import { Auth0Provider } from "@auth0/nextjs-auth0"

import { auth0 } from "@/lib/auth0"

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const session = await auth0.getSession()

  return (
    <html lang="en">
      <body>
        <Auth0Provider user={session?.user}>{children}</Auth0Provider>
      </body>
    </html>
  )
}

However, when I do what the example suggests in a _app.tsx file like this...:

export function App({ Component, pageProps, router }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page: ReactNode) => page)

  const session = await auth0.getSession()

  return <Auth0Provider user={session?.user}>
...

... it won't work because this file cannot be asynchronous. The same goes for when I attempt aynthing like it my Layout files. (Here in the Next.js docs you see no async in any of the layout files or _app.tsx)

I am clueless how else I can pass an initial user from the server. I need this back so users do not see a 'flash' of empty content until the useUser() hook has retrieved the user.

Describe the ideal solution

Get the same functionality from v3 back in v4's for apps with Page Router

Alternatives and current workarounds

The only thing I could think of is having to add this to all of our pages with getSeverSideProps:

export async function getServerSideProps(ctx: GetServerSidePropsContext) {
  const session =  await auth0.getSession(ctx.req)

  if(!session?.user) {
    return {
      redirect: {
        destination: '/auth/login',
        permanent: false,
      },
    }
  }

  return {
    props: {
      user: session.user,
    },
  }
}

export default function MyPage({user}: InferGetServerSidePropsType<typeof getServerSideProps>) {...}

But this does populate the the user returned by the useUser() hook...

Additional context

No response

The text was updated successfully, but these errors were encountered:

tusharpandey13 · 2025-02-14T10:20:41Z

Thank you for reporting this, we are actively looking into this. We will post an update here once we have found a resolution.

wjessup · 2025-02-16T19:53:31Z

coming here to comment that the link:

If you would like to pass an initial user during server rendering to be available to the useUser() hook, you can wrap your components with the new (see example).

in the

nextjs-auth0/V4_MIGRATION_GUIDE.md

Line 4 in caa7f45

is broken.

infact, even the link to the guide in the release is broken... so finding the migration guide was a problem.

wjessup · 2025-02-16T19:55:02Z

could you please explain in the documentation what this means "If you would like to pass an initial user during server rendering to be available to the useUser() hook"

starting from what goal a developer is trying to achieve? "if you want to achieve X then do Y..."

florisdg · 2025-02-17T09:31:00Z

@wjessup the way it used to work is that every page with getServerSideProps would add a 'user' object to the page props, making it available on first render.

Additionally if somewhere in the page or app's tree the useUser() hook is used, the page props user object would pre-populate the useUser()'s value

florisdg mentioned this issue Feb 13, 2025

Passing an intial user from the server to <Auth0Provider user={session?.user}> #1915

Closed

6 tasks

tusharpandey13 added the V4 label Feb 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Passing an intial user from the server to <Auth0Provider user={session?.user}> with Pages Router #1916

Passing an intial user from the server to <Auth0Provider user={session?.user}> with Pages Router #1916

florisdg commented Feb 13, 2025 •

edited

Loading

tusharpandey13 commented Feb 14, 2025

wjessup commented Feb 16, 2025

wjessup commented Feb 16, 2025

florisdg commented Feb 17, 2025 •

edited

Loading

Passing an intial user from the server to <Auth0Provider user={session?.user}> with Pages Router #1916

Passing an intial user from the server to <Auth0Provider user={session?.user}> with Pages Router #1916

Comments

florisdg commented Feb 13, 2025 • edited Loading

Checklist

Describe the problem you'd like to have solved

Describe the ideal solution

Alternatives and current workarounds

Additional context

tusharpandey13 commented Feb 14, 2025

wjessup commented Feb 16, 2025

wjessup commented Feb 16, 2025

florisdg commented Feb 17, 2025 • edited Loading

florisdg commented Feb 13, 2025 •

edited

Loading

florisdg commented Feb 17, 2025 •

edited

Loading