I'm trying to think about different ways to approach this. One method is... Let's say we get a token that has a claim to a role returned when a user logs in. For this imaginary app we have 3 roles, super, admin , guest.
The token returns a string value in the role property, eg, role: "admin"
In the app, we build two functions, a routeBuilder and a navItemBuilder, to build out these objects we pass in the role string eg "admin"
Then the application renders the correct routes and menu items that are available based on what role the user has. eg "guest" only gets access to the about page and the news.. but a super also gets another nav item called profile or something like that...
However, if I then use react dev tools and edit the token role claim, I can cause the app to re-render a new nav route. I can change the token object role string and then when it updates the routeBuilder and navItemBuilder will build the new route based off any string I want.
How can I build roles in my app and avoid this security issue?
Nothing sensitive should be built into the application itself.
Apply security at the server level.
It shouldn't matter if, for example, the user can display the UI for the Admin route.
When their browser requests the data needed to populate it from the server, the server should perform AuthZ and return an error instead of (for example) a list of users that can be administered.
Your client-side code can then handle the error so if the user ends up there by accident (e.g. if they are a valid user but their session has expired) they can be diverted to a login screen or given a useful error message.