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.