How to handle getSession delay on client components with NextAuth?
Hey all.
So with next auth, there seems to be a delay every time the getSession hook is used to make a request, which isn’t a big deal but can be a bit cumbersome when conditionally performing actions based on login state.
Wondering what people are doing to get around this, I’m considering using server components as well as storing the session object in global state and revalidating whenever necessary.
Any other thoughts on how to handle this?
27 Replies
why not use a hook? useSession? as you are doing it client side I think it may be easier
@bakdaddy i'm using the useSession hook, but there's a ~1 second delay before the data is retrieved
Do you use prisma adapter? Maybe the db call is the bottleneck
@bakdaddy funny enough, i just tried switching to JWT and it seems to eliminate the slow down. Almost all of my components are client side so makes much more sense to store the session locally with JWT
thanks for the help, marking resolved
Yeah, that seems to be the bottleneck, maybe dbadapter is too slow
Well i'm not running my db locally, so i think its just a latency thing
Jwt strategy doesn't involve DBs, so there you go
:)
HMU I you have more questions, happy to help
@bakdaddy So even though it is much quicker, the session is still undefined on initial render. Here's the code
export default function ResultsPage() {
const { data: sessionData } = useSession()
console.log(sessionData)
return 'test'
}
Yeah, it's cause it can be not authenticated
Do like this useSession({required: true})
the session is being fetched correctly, just undefined initially
Or you can conditionally do something like
if(!session) return <p>Not authorised</p>
Try passing required true object to useSession as a parameter
still no luck
Sorry, using mobile so slow typing
Let me get on my laptop, one sec
no worries
even if i wrap in a useEffect, still gonna be undefined initially
Don't, hooks usually don't go inside useeffect
i just mean console logging the value from the hook
not the actual hook
Sure, got it, almost booted my laptop
Dang it
Discord is updating...
Is this expected behavior? I can always just store user data in global state, but kinda defeats the purpose of the useSession hook
so looks like the status is loading when its undefined
seems to always be loading state initially before it is authenticated, even when using JWT
I think its because it's getting/loading the session
either try
const {session} = useSession({required: true})
or
const {session} = useSession();
if (!session) return <p>Loading session...</p>
console.log(session)
useSession() returns an object containing two values: data and status:
data: This can be three values: Session / undefined / null.
when the session hasn't been fetched yet, data will be undefined
in case it failed to retrieve the session, data will be null
in case of success, data will be Session.
status: enum mapping to three possible session states: "loading" | "authenticated" | "unauthenticated"
thats from docs
yeah i think this is expected behavior then