Is react-router secure?

[DanCouper]

@HihiHello

In my case, and I am probably not alone in this, being able to manipulate state so that you can see the page that should be protected is actually a big deal.

Yes, the user would not be able to actually do anything, but they can still read and watch the layout.

This is completely normal.
But

@HihiHello

So lets say that your app idea is to sell information about some topic. The user pays for your service and can then log in and read the hardcoded text on your site. Now, by using redirect with react-router anyone with some frontend skills can check your info for free and even copy your info just by changing some state

Well, no, not ideally. Ideally they are getting the information from a server somewhere. If the endpoint [for the resource that is protected] requires authorisation, then if the user has not authorized, then you 403 for the request for information. How you handle it front end is up to you. You might allow them to access the route but show an error message instead, or you wrap that route component in a function that checks first, or you might not show a link to that route in the first place by saying ifAuthorised && <Route ....>

If you are just hiding the information on the front end by hard-coding everything, then sure, there will be an easy way a user can bypass the security. As an example of an app that has a trivially bypassed security measure, see Medium’s paywall – if I am logged in, I get a maximum of 3 paid articles for free a month. If I open it in incognito & don’t log in, I can bypass that. If you’re hard-coding this stuff, then there’s nothing you can realistically do to protect it – the user has literally downloaded everything already. This isn’t a React/RR thing, you’re just giving the user everything so . Code splitting isn’t a security technique, it’s for optimising speed

@HihiHello

In my case, the UI of my app is actually what sets it apart from others, and I would really not want a competitor to look at my UI

Then you don’t allow access to the app unless a user is logged in. React and React Router aren’t some special case here. Just have a login screen, and if login fails that’s all they can see. If the rest of the app is dependent on a server API, then the rest of the app won’t work without it and the fact they can access all the code is not relevant, they would need to know all the API responses to be able to make it work.

@HihiHello

Yes excactly, and that is my problem woth the turotials for react-router. In React-router you just change the state and the path and its UI and info is being viewed. No request is made before you actually try to do anything. I think its weird that it is not the server that redirects

A React app is a single HTML page, the request for the app has already succeeded if the app is open in the browser.

If you want to make a request on every route, then do that – the components are literally just functions, you should be able to wrap them in another function that does a check and return the if it succeeds, or you can add handling logic into the components that the Routes render.

Just to stress this: you cannot have what is considered a secure app just using browser JS without some secured backend. The data that requires authorisation has to be somewhere else, not bundled in that JS code. You can obfuscate and hide things, but that’s not security.

[HihiHello]

Thank you DanCouper for all your effort in your answers.

I ended up doing it like this:

1. Set the routes with use of state
2. Make a second check in componentDidMount and redirect based on respond status