Need some clarity on how to use the library with server and client components

[a0m0rajab]

What is the improvement or update you wish to see?

Looking into this page: https://authjs.dev/getting-started/session-management/get-session. The app router has an explanation only for the server component without mentioning how to use client components.

It would be great if the client component is explained here and mentioned that the auth() function can only be used for the server (it's written somewhere in previous issues).

Is there any context that might help us understand?

This would be helpful for those who wants to use authjs immediately without going through v4, in migration guide it's explained on how to use both server and client components but it's not mentioned in the main docs. Which would be helpful to get that.

Does the docs page already exist? Please link to it.

No response

[a0m0rajab]

Mentioning the examples would be helpful as well: https://github.com/nextauthjs/next-auth-example
Might be related to: #10724

[ndom91]

Yeah good call. We really wanted to recommend server component usage, although its still possible to use the existing next-auth/react exports like previously (v4). See for example the Sign in / sign out tab from the page you linked that includes a short client-side exaple. Remember for client-side usage you'll need to wrap your component with a <SessionProvider /> somewhere above it

The idea is to grab the session, trigger signin/signout, server side. And then pass any info, like the session, down to client components via props, for example.

But we can definitely make that more clear, while also showing a good example for client-side usage.

[ndom91]

In addition, the example app has a client-component example as well. See apps/examples/nextjs/app/client-example/page.tsx.

[balazsorban44]

As Nico mentions, nothing has changed in how you use NextAuth.js in Client components/Pages Router compared to v4.