Why would it be a good idea to have a Session Provider wrapper be a client component?
Answered
King Shepherd posted this in #help-forum
King ShepherdOP
My understanding of client components is that the static portion or a client component is pre-rendered serverside, and then hydrated after the initial pageload. Why would this need to be the case for a next auth session provider wrapper?
Answered by joulev
if you use the
if you don't use any hooks then you don't need this
useSession hook or similar next-auth client-side hook in any client components, then for that hook to work, the client component must be a child of the SessionProviderif you don't use any hooks then you don't need this
SessionProvider. For example if you only use server components for retrieving auth state, you can use getServerSession – then you don't need to wrap the component under a SessionProvider18 Replies
@King Shepherd My understanding of client components is that the static portion or a client component is pre-rendered serverside, and then hydrated after the initial pageload. Why would this need to be the case for a next auth session provider wrapper?
providers are for client-side states so they must be client components – it's not even a question of should or shouldn't
@joulev providers are for client-side states so they *must* be client components – it's not even a question of should or shouldn't
King ShepherdOP
Thanks. In some articles I'm seeing people wrapping their RootLayout in that provider wrapper. If the whole application isn't wrapped in the provider, will session data not be available on the pages i leave out?
or how does that work
@King Shepherd Thanks. In some articles I'm seeing people wrapping their RootLayout in that provider wrapper. If the whole application isn't wrapped in the provider, will session data not be available on the pages i leave out?
if you use the
if you don't use any hooks then you don't need this
useSession hook or similar next-auth client-side hook in any client components, then for that hook to work, the client component must be a child of the SessionProviderif you don't use any hooks then you don't need this
SessionProvider. For example if you only use server components for retrieving auth state, you can use getServerSession – then you don't need to wrap the component under a SessionProviderAnswer
@joulev if you use the `useSession` hook or similar `next-auth` client-side hook in any client components, then for that hook to work, the client component must be a child of the `SessionProvider`
if you don't use any hooks then you don't need this `SessionProvider`. For example if you only use server components for retrieving auth state, you can use `getServerSession` – then you don't need to wrap the component under a `SessionProvider`
King ShepherdOP
gotcha. In my case, I'm using useSession in a client component with login buttons etc. How come the SessionProvider context is needed to use useSession in that client component but not in a server component?
@joulev providers are for client-side states so they *must* be client components – it's not even a question of should or shouldn't
King ShepherdOP
also, is the reason the SessionProvider wrapper needs to be a client component because being a client component allows for javascript code to run on the client that makes the request to the auth0 tenant? Where as if it were a server component, then javascript wouldn't be able to run on the client to make those requests?
I'm new to nextauth and nextjs broadly so let me know if that question made zero sense haha
@King Shepherd gotcha. In my case, I'm using useSession in a client component with login buttons etc. How come the SessionProvider context is needed to use useSession in that client component but not in a server component?
useSession is a hook that consumes the SessionProvider provider so it must be used in a child of the provider
@King Shepherd also, is the reason the SessionProvider wrapper needs to be a client component because being a client component allows for javascript code to run on the client that makes the request to the auth0 tenant? Where as if it were a server component, then javascript wouldn't be able to run on the client to make those requests?
this one i don't know since i don't use next-auth
but [
getServerSession](https://next-auth.js.org/configuration/nextjs#getserversession) does work in server components and if you use it you don't need the provider@joulev this one i don't know since i don't use next-auth
King ShepherdOP
what is your preferred method of auth out of curiosity
I'm trying to be a full stack person and exploring a lot of routes for getting services up and running
@King Shepherd what is your preferred method of auth out of curiosity
i would say i have no preferred methods since my current job doesn't require me to build one 
but there are many auth systems for you
supabase, next-auth, clerk
King ShepherdOP
I've heard of clerk
I know supabase for the db service but i'll look into what they do for auth
thanks for your help