Type alias UserProviderProps

UserProviderProps: React.PropsWithChildren<{
    fetcher?: UserFetcher;
    profileUrl?: string;
    user?: UserProfile;
} & ConfigContext>

Configure the UserProvider component.

If you have any server-side rendered pages (using getServerSideProps or Server Components), you should get the user from the server-side session and pass it to the <UserProvider> component via the user prop. This will prefill the useUser hook with the UserProfile object. For example:

// pages/_app.js
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function App({ Component, pageProps }) {
  // If you've used `withPageAuthRequired`, `pageProps.user` can prefill the hook
  // if you haven't used `withPageAuthRequired`, `pageProps.user` is undefined so the hook
  // fetches the user from the API route
  const { user } = pageProps;

  return (
    <UserProvider user={user}>
      <Component {...pageProps} />
    </UserProvider>
  );
}

or

// app/layout.js
import { UserProvider } from '@auth0/nextjs-auth0/client';

export default async function RootLayout({ children }) {
  // this will emit a warning because Server Components cannot write to cookies
  // see https://github.com/auth0/nextjs-auth0#using-this-sdk-with-react-server-components
  const session = await getSession();

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

In client-side rendered pages, the useUser hook uses a UserFetcher to fetch the user from the profile API route. If needed, you can specify a custom fetcher here in the fetcher option.

IMPORTANT If you have used a custom url for your HandleProfile API route handler (the default is /api/auth/me) then you need to specify it here in the profileUrl option.

Settings

Member Visibility

Theme