Correct way to access session data, using server & client components

Typically in our old SSR apps, we'd wrap <SessionProvider session={session}> around our <App /> component, and use the hook useSession() to access the session object at any depth easily, without prop drilling. With server components there's a helper const session = await getServerAuthSession();, which can only be used in server components to retrieve session information server side. My question is this, if we need to access session data in a deeply nested client component, are the only options now;
1. Pass the servers session details down as props as deep as we need to client components (as we cannot use const session = await getServerAuthSession(); once we reach client components)
2. Revert back to wrapping our highest client component with <SessionProvider session={session}>, using useSession() to access the session object at any depth easily, without prop drilling. Is there a more pragmatic way on the server side I am missing?
6 Replies
barry
barry•6mo ago
Both are valid I would assume useSession is somewhat cached? So if you have called getServerSession it should have hydrated the cache theowatpoohhehthinkies entirely sure I use lucia and not next auth
Yoers
Yoers•6mo ago
I'm not really sure if getServerSession would have any impact on useSession (which AFAIK uses client side checks), I didn't really think they were linked? I did used to get some annoying flashing when using useSession a while back - which is nice to have gone when I use the server component approach (due to useSession having some weird bugs where it would return some odd states during it's loading lifecycle) Will have to look into Lucia when I get a minute 🙂
barry
barry•6mo ago
Yeah it’s a farfetched hope 😂 Doubt it’s happening on second thoughts Sounds like you know what you want though, server session
Yoers
Yoers•6mo ago
Yeah I do, just can predict it becoming a pain in my ass down the line, but it's definitely nicer! I guess I will update as my current application grows haha 🙂 How comes you're using Lucia curiously? Next auth has been pretty amazing for me, so I can only imagine Lucia must have some really cool features
barry
barry•6mo ago
More fine grained control You don't export some config and it does magic You make a route and then you use lucia in said route to do things, validate the request, get the session etc.
GBianchi
GBianchi•6mo ago
Hi, if anyone has best practices tips as well, I’d love to know. I have made a PR 2 months ago on my repo to use session drilling from server components https://github.com/dBianchii/kodix-turbo/commit/9a1ba42c5bd5f5f8dcdaafe80e3fe15487a9662c Been using just this since. (No session providers)
GitHub
Fix NextAuthProvider import in Layout component (#40) · dBianchii/k...
* FixAuth5 * Move components to src/_components * add session to server components * Update component import paths, fix session needed to be provided to components