Best practice for setting global state on login

[dartmoordunbar]

Question 💬

Hi there. I was storing user data in the session, but it isn't updated quickly enough for my use case and therefore probably a bad way to have user state for my app. I want to store data from the database in a global state and manipulate it there - this would load once the user has logged in. I cannot work out where this should be done - where using nextauth is the sensible place to make a db call and update state upon login and only then?

How to reproduce ☕️

let userData = fetch('/api/userdata`)
setUserData(userData)

Something like this - but not sure where the best place in the app life cycle is. I appreciate this isn't a perfect git issue, but I hope you get the gist of what I am asking.

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

I am not sure what you are asking here. What do you mean by "not quickly enough"? You usually use the useSession hook to fetch the user session, which kind of already works as you describe above (it does a fetch call to /api/auth/session), but also caches the result if you have a Provider context in your _app.

See:
https://next-auth.js.org/getting-started/client#provider
https://next-auth.js.org/getting-started/client#usesession

[dartmoordunbar]

That is interesting - I wonder if the cache is causing me trouble. I am storing an array of ids for user favourites that I persist to the database, this is loaded into the session so I can show them. I think it would be better on login to make a query to load these into a separate state/provider rather than relying on nextauth session. My question is, when can I make a client-side call on successful login to populate the state?

[balazsorban44]

You probably don't need to load user favorites together with the user session, it could be delayed until the user is logged in, and fetch it subsequently, maybe showing a loading/skeleton UI until it is ready.

Depending on your UI, you might drop the loading state as well. You can use the useSession hook's loading state, or simply check the existence of the user data, and do a fetch call after the user is logged in, wherever it makes the most sense. (You might have FavoritesList or a similar component? Do you use a caching library like react-query or swr?)

[dartmoordunbar]

I'd like it in a global state provider. Would a check for session within app.js be an appropriate place do you think? Maybe within useeffect?

[balazsorban44]

As long as the check is in a component within the Provider context, yes.

[dartmoordunbar]

Thank you.