What is the ideal way to use session data for API calls?

[ghoshnirmalya]

Your question
I'm using the id from useSession like the following:

import { useSession } from 'next-auth/client'

Then, I'm importing the session value like the following:

const [ session, loading ] = useSession()

I'm using the value of the id from session. However, since a call to /api/auth/session is made whenever the browser is in focus, the state of my application reloads and it fetches data again as the parent component is re-rendered. See the screenshot below:

What are you trying to do
The whole application shouldn't be re-rendered. One possible solution could be that we can store the id from the session object in a cookie or localStorage and use it on every API call. However, I'd like to know if there is a better solution than this.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[iaincollins]

Hmm, have you tried changing your component logic so that your components renders any time a session exists (even if loading is true) instead of displaying a loading spinner? (I am guessing that is what is going on.)

If the Provider is configured in _app.js, the app should still have an existing session object, even as it's loading in a new one, so you shouldn't need to display a loading spinner instead of content.

Persisting the session object data in a store is possible, but would somewhat defeat the purpose of a Hook - I guess maybe what want to do instead is use shouldComponentUpdate() to prevent components that don't need to update; but this shouldn't be needed either; if the provider is being used in _app.js and the component logic is appropriate this shouldn't be a problem, it should just quietly fetch the session in the background and not update the UI unless something about the session state changes.

Notes:

• The session token itself is not stored in a client readable cookie or localStorage as this introduces the potential for session hijacking via XSS.
• If using database sessions, the default session will generally be the same between reloads (the expiry is only updated infrequently to avoid unnecessary database writes), so the props won't change. With JSON Web Tokens however, the session object will mutate when it is accessed, so the props will change which will also trigger a re-render of a component.

[ghoshnirmalya]

@iaincollins Thank you for the detailed reply.

I'm using the getSession hook to access the session on the server and then passing that as a prop. That solves the problem with the loader.