What pattern should I use to access Session in client component
Bit unsure of how to go about this, any help massively appreciated
I'm using app router and I've got a Header component that needs to access the Session (to display the user's profile picture) and also have some state (toggling between 2 menu displays, for example).
When I use a server component, I get an error for using useState/useRef (I tried using a zustand store to get around useState but didn't work). When I use a client component I get complains that I'm accessing serverside variables (I assume from the session request). What's the best way to go about this?
Potential thoughts:
* useServer function call from a client component to get the session?
* Use a server component and then manage the state using a top level context provider? I'll have a bunch of popovers and sidebars that should be able to control/close each other, hence why I prefer Zustand over just useState
Thank you!
Solution:Jump to solution
1. get the session in a server component and pass it to any client components that need it
17 Replies
I tried splitting each of the 3 sections into separate client components that can communicate via zustand, but this is throwing all sorts of issues i don't understand
Might try clerk instead
I like clerk way more, think ya should go that route.
can use easily in mobile if ya go that route eventually.
Clerk is so much nicer for this, probably just gonna use that and rip out nextAuth
I understand that people are recommending Clerk, but has anyone solved this issue in nextauth?
@hausinho @hyhy If I understood the question correctly, you can use
inside your client component
and then do something like
When I use a client component I get complains that I'm accessing serverside variablesThat is probably because the server side
getServerAuthSession() was used instead of useSession()Ah interesting, I'll give that another try and report back
Did it work for you?
Not at my pc now but I'll give it a try this evening
Gonna be this weekend instead I didn't get a chance to and I need to travel all day today
Thanks for the heads up, I'll be on the lookout 🙂
i wasn't able to get this to work, going to test further and see if i can get anywhere with it
is this with create t3 app using the app dir?
we didn't include the providers for getting the session on the client, because the new server patterns are better
you can either
Solution
1. get the session in a server component and pass it to any client components that need it
2. add the providers back in and use useSession in client components
My bad, yeah I forgot to mention that you do need the session provider for client components
you can find that here for next auth v4
for next auth v5 (experimental) in case you are using that, it seems to not have changed much, according to the API reference
This is assuming that you still want to do usestate or useeffect, which requires you to make it a client component. Otherwise you can go for the first option that
@cje mentionedyou dont need the session provider for client components
can pass the session as a prop from rsc
cheers for that, i ended up just going back to the page router to get some work done so i'll try migrating to app router again soon