Docs: passing user from Server Component (#1578)

auth0 · Nov 23, 2023 · f8a2558 · f8a2558
2 parents 6123230 + 858b3d1
commit f8a2558
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/src/client/use-user.tsx b/src/client/use-user.tsx
@@ -68,7 +68,7 @@ type UserFetcher = (url: string) => Promise<UserProfile | undefined>;
 /**
  * Configure the {@link UserProvider} component.
  *
- * If you have any server-side rendered pages (using `getServerSideProps`), you should get the
+ * 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 {@link useUser} hook with the {@link UserProfile} object.
  * For example:
@@ -92,6 +92,29 @@ type UserFetcher = (url: string) => Promise<UserProfile | undefined>;
  * }
  * ```
  *
+ * or
+ *
+ * ```js
+ * // 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 {@link useUser} hook uses a {@link UserFetcher} to fetch the
  * user from the profile API route. If needed, you can specify a custom fetcher here in the
  * `fetcher` option.