reactjs - Can react state be tampered with to bypass security measures?

Question

I have two components. One component that the user must use to login and one component to show some content.

I was thinking of implementing my application by having one component that has some react state that tells it to render either the login component or the other one.

If I do this, would it be possible for on the client-side to manually set the state so that the login screen is bypassed and the content is shown?

EDIT: Added some example code.

render () { if (this.state.authorized) { return <Content /> } else { return <Login /> } }

With this code in mind, given that only the <Login /> component is capable of setting the authorized state to true, is it possible for the client-side to simply get around this by manually setting the state somehow? For example through the chrome react dev tools or something?

Answer 1

Client-side JavaScript isn't secure by design, i.e. user has full control over the script that runs in user's browser. Considering that a user has enough access rights locally, the code always can be read and modified. Security measures that are applicable to client-side code only make this process more complicated.

This isn't unrelated to security, as long as the access to sensitive data is controlled by the backend.

It's certainly possible to change component state and show a component that wasn't supposed to be shown. For instance, React dev tools can be used for this demo to set authorized to true:

A user basically ruins own experience with the application. A blank component will be shown without sensitive data because a user skipped backend authentication process.