Next.js Discord

Discord Forum

NextAuth useSession strategy

Answered
Jumbo flying squid posted this in #help-forum
Open in Discord
Jumbo flying squidOP
Hey guys, I'm curious how folks handle session with next auth in there apps? I don't want to wrap the root in the session provider since thatll make the whole app client side. So how do folks like to handle session? Fetch it server side and pass it down as props? Or create a wrapper component for each component you want client side session via <sessionprovider>?

Thank you!
Answered by B33fb0n3
you can build a provider component (that is clientside) and pass serverside code as children. Then only this specific part is clientside and the rest can be handled serverside. If you need the session then somewhere, you can either get it serverside await getServerSession(authOptions) or get it clientside useSession() (you provided it in the little clientside provider)
View full answer

28 Replies

@Jumbo flying squid Hey guys, I'm curious how folks handle session with next auth in there apps? I don't want to wrap the root in the session provider since thatll make the whole app client side. So how do folks like to handle session? Fetch it server side and pass it down as props? Or create a wrapper component for each component you want client side session via <sessionprovider>? Thank you!
B33fb0n3
you can build a provider component (that is clientside) and pass serverside code as children. Then only this specific part is clientside and the rest can be handled serverside. If you need the session then somewhere, you can either get it serverside await getServerSession(authOptions) or get it clientside useSession() (you provided it in the little clientside provider)
Answer
Jumbo flying squidOP
is it bad to have <sessionprovider> in multiple places? Nextauth docs make it seem to only have the root have it. I built out a wrapper component I can use for those client components to provide the sessionprovider but that kinda feels bad.
Jumbo flying squidOP
well i guess im not sure if its bad to be injecting that session provider everywhere since the next auth docs make it seem like it should only be in root
B33fb0n3
yea, you can define a client comp in you root folder and the children (server components) are inside it. Like that you can have the session in all you client components without needing to import it again and you can still have the advantages of server components 🙂
Jumbo flying squidOP
but if the parent is a client, doesnt that make all the children clients too?
B33fb0n3
not if you pass them as children
if you do it like this:
'use client'

export default function SomeComponent({children}) {
    return <SomeProvider>
{children}
<SomeOtherComponent />
<SomeProvider/>
}


In this case, SomeOtherComponent will be a client component. If you defined it as client or not. Everything passed via the children will stay serverside/clientside (how you defined the passed component)
Jumbo flying squidOP
i see so its really just an issue if you try importing server components into the client components. Or directly render components in the tree rather than via child
will children that are client components have access to the provider? I'm trying to understand how the client/server boundry works here
@Jumbo flying squid will children that are client components have access to the provider? I'm trying to understand how the client/server boundry works here
B33fb0n3
yes, because the provider (in my example SomeComponent) is rendered clientside. And other clientside component can access other clientside components
Jumbo flying squidOP
even if its via composition in the children
B33fb0n3
everything that is wrapped with your provider can access the provided values, yes
so yes, children as well
Jumbo flying squidOP
awesome ty. Good video I found explaining that for any future person reading this: https://www.youtube.com/watch?v=9YuHTGAAyu0
from the technical side how does passing as children vs importing into a client component differ?
aka why does direct importing cause all sub components to be children vs passing in as childern does not
is it just the fact that server components always get rendered first and if you import into a client, it just can't reconcile?
just trying to understand the flow of passing as childern vs importing
@Jumbo flying squid from the technical side how does passing as children vs importing into a client component differ?
B33fb0n3
interesting question. I think that's a good question for #discussions
@B33fb0n3 interesting question. I think that's a good question for <#752647196419031042>
Jumbo flying squidOP
ill post up there!
last thing I promise lol and do we need to worry about performance hits having context at root? Docs put a small note to nest it as deep as possible, but obviously you can only go so far if providing context to the whole app.
actually i am unable to post in discussions sadly
Jumbo flying squidOP
sweet thanks man
@Jumbo flying squid aka why does direct importing cause all sub components to be children vs passing in as childern does not
American Crow
edit: i misread the question :x fml ❤️ sorry
B33fb0n3
happy to help. Please mark solution
B33fb0n3