This is a hypothetical question, so let's say you've got a full-stack web application and there is admin-dashboard in the front-end side.
I, as /NOT/ admin, try to access a route such as /api/admin/dashboard
In the React app, some authentication logic can be done such as if user.isAdmin allow to dashboard else navigate back to homepage
In the back-end side, let's say Node.js, you just res.send('not authorized')
So what I thought is I'm on the client side right, I can take minified js which is derived from npm build of React app, and I don't know but somehow I can revert it back to React App folder structure then there is all the util files, components, hooks and everything.
That means I can manipulate authentication logic like allow everyone to see dashboard and also manipulate the fetching logic that would be if error from fetching, instead of return 'not loaded', compeletely remove fetching logic to the backend and just see me dashboard
So, to my understanding, after some effort, maybe not data and functionality that requires me to speak to backend, i can see dashboard or even all the layout, right?
My question is, can we prevent this to happen in some way? Or do I need to?
First, As you have use role based conditional dashboard render in frontend, When a non admin user inspect the app and figure out the admin dashboard route, when ever the person visit the page, if any api is giving 401 unauthorized status, then logout or redirect that person to actual page. For a millisecond he will able to see the page.
or
Second, Send your react routing as json from backend api. Backend is way more secure. It will send conditional role base route to react. So, no user can figure out actual route path from frontend any more. So, It is more secure.