I developed a panel for my customer to monitor some parameters of their business. Just a few of them are going to be shared with their users.
So, I created a panel in React-Admin and then added two different roles (admin and user) that have access to completely different sections. Obviously, the admin role has higher privileges and more parameters are monitored for this role.
So, I basically copied the code from docs (section Configuring the Auth Provider, src/authProvider.js) and it is working properly. However, I am able to switch among both roles just manually editing the role variable into localStorage.
I mean, I login as a user, open Dev Tools, go to Local Storage, manually change role=user to role=admin, refresh and I am able to watch sections that are assigned for admin roles.
Am I doing something wrong (which is likely, as this is my first project with React-Admin)? Or could it be a kind of security issue?
I think the problem should be in authProvider.js, but if you consider you need to see any other part of the code, no problem to show it.
Thanks in advance for your help.
If you're not dynamically populating Resources with respect to role its readable and exposes the 'security risks' regardless. One can easily see all the APIs you're talking to and start working on those. All without changing the value in localstorage. However, if your API is not enforcing role checks... well that's a bigger issue. It's bleeding data to anyone who knows the trick. It's trivial to craft requests against a known target after all. (i know validating role on the api somewhat goes against the stateless nature of JWT but it's necessary in many cases, cases like this)
React admin comes with examples, but like all examples they're not telling you to take that to production. You can surely, through code-splitting or dynamically loading resources, make it harder to find information about elevated roles on the frontend, but don't forget about the backend.