Hello guys, Can anyone help me out here, I am new with react. Its regarding managing session variables mentioned in tutorial: https://serverless-stack.com/chapters/load-the-state-from-the-session.html So the issue I am having is I have an extra field in my db that takes care of user type so like user, employee or admin. I am creating a dynamic nav so it will be different for each type of user I have tried using context but when the page is refreshed it is getting reinitialized with the default value. Do you know any way to do it. It will be great help! P.S. I want a secure way that can’t be seen on browser or can be edited by user so I came across local storage but its not secure.

If you have something in the frontend that is needed to drive logic, then that thing will always be accessible. If you need it to survive refreshes, it's going to need to go into local/session storage/indexdb. On the server side, you should check that the user is only requesting/changing data that it's authorised to do so.

Yeah. That status field is only needed in frontend and it's use for me is to identify the type of user.

Hey @18IT002 SUNNY AGRAWAL, lemme see if @Jay has anything to add.

Yeah thank you very much.

So are you making a request to the get the type of user each time the page loads?

I mean like any way we can store that user type so that we don't have to fetch from backend, each time page refreshes.

You can use local or session storage

Yeah that would be the way to go, in the guide the AWS Amplify package does this internally for the session state. But for custom fields like this, you’ll need to store it yourself. I haven’t used this but a React hook like this could make it simpler to handle https://usehooks.com/useLocalStorage/.

Thank you very much @Jay for your response. I already did a little research about using local storage but as I mentioned before, values stored in local storage can be edited by user so, I am looking for an alternative and if you know something then please share a document so I can follow it.

You can't really have it both ways. If you store something in the frontend it is accessible and changeable. There are ways to make this trickier but if somebody is determined and knows what they're doing, you can't stop it. You therefore need the validation on the backend to ensure that any actions that are taken are authorised

Yeah a general rule of thumb here is that if it’s accessible by the browser, it’s accessible to that user. This is why you first want to authenticate the user before setting this. And in your backend ensure that the user isn’t accessing something that they don’t have access to.

Okay thank you. I understand this now. So, then calling backend api each time whenever a user refreshes, this don't become costlier or inefficient solution. Do you know any other way?

If the data provided by the backend is validated against the authorised user, you don't need to refetch on every refresh because even if the user type is tampered with, they still won't be able to retrieve anything they're not allowed to.

I am not getting this, let me explain, suppose you have a web application where you want to manage a field that is setted only once when data is fetched from backend. So what I tried using is: created a const variable with useState hook with default value of "" or empty(undefined) and when data is fetched I set the state of that variable. But as we refresh the page the default value is again stored in it.

So you need to set that value in local or session storage to preserve it across refreshes AND you should also check that when a logged in user does something with data in the backend via your API, that they are authorised to do so

Yeah

Yup, instead of

useState

you might want to use that hook that I linked to before to store it in local storage.