How to handle cookies and global state
Answered
Sweat bee posted this in #help-forum
Sweat beeOP
I am new to Next.js and I have some trouble understanding how to handle data that should be accessible across server and client components.
I am using supabase auth for handling login (https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app). When a user logs in I want to call an external API to retrieve some extra user info (permissions, profile image, etc).
How should I store this profile data? Should it be in a cookie or in some sort of global state? And how would I be able to access the data in a client component?
I am using supabase auth for handling login (https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app). When a user logs in I want to call an external API to retrieve some extra user info (permissions, profile image, etc).
How should I store this profile data? Should it be in a cookie or in some sort of global state? And how would I be able to access the data in a client component?
Answered by B33fb0n3
for me the permissions is a field that will be access regulary so you can save these permissions inside the user itself. Keep in mind, that the permissions then only update when the user logs out and in again to get the updated permissions
For that you can use for example next-auth
For that you can use for example next-auth
13 Replies
external API to retrieve some extra user infonormally the data is storage there and when you want to know that data you request it. You don't save it again when it's somewhere. But you can do that for data that you access very often. However: keep in mind, that you should only have one source of truth
Sweat beeOP
But that would mean I should call the API every time I need the data? Ex. on every page load to get the permissions and make sure the user has permission to view the page or some specific content on the page?
Wouldn't that cause a lot of slow page loads and unnecessary requests since it is data that doesn't change very often?
Wouldn't that cause a lot of slow page loads and unnecessary requests since it is data that doesn't change very often?
Normally you get an accesstoken and you save that accesstoken. With that you can make sure, that the user have access to the data. The rest is just requesting an API
Sweat beeOP
Yea, but I get the accesstoken from supabase. I then want use that access token to query my profile API to get the user's permissions and save those in some sort of global state. But if thats not possible, I have to find another solution
it a normal way to have only one single source of truth. Else you might have stale data or other issues. So get the access token, save it as session inside your cookies and put references inside the session as well. Like that you can access data fast even without requesting the data over and over again
@Sweat bee solved?
Sweat beeOP
Yes and no. As far as I can see, I do have a single source of truth regarding the user's permissions. I use supabase to store username and passwords and handling the authentication. I then store all the user's permissions in another database.
When a user is signing in, I want to fetch all the permissions. So my question is basically where and how I should store the permissions in order to access them both on the server and on the client.
In a React client-side app, I guess it should be stored in a global state either using the Context API or Zustand, but if I'm doing that in Next.js, it won't be available on the server, correct?
When a user is signing in, I want to fetch all the permissions. So my question is basically where and how I should store the permissions in order to access them both on the server and on the client.
In a React client-side app, I guess it should be stored in a global state either using the Context API or Zustand, but if I'm doing that in Next.js, it won't be available on the server, correct?
for me the permissions is a field that will be access regulary so you can save these permissions inside the user itself. Keep in mind, that the permissions then only update when the user logs out and in again to get the updated permissions
For that you can use for example next-auth
For that you can use for example next-auth
Answer
Sweat beeOP
I don't think that I'm able to attach the permissions to the user returned by Supabase. When I read around on github, reddit, etc. I can see that other people are using next-auth to store the extra user info as a session? Do you think that could be a viable solution?
Yes, you can use next-auth to save extra data. That works pretty fine š
Sweat beeOP
Great, I'll try to go with that. Thanks a lot for your help and patience š
Happy to help