Hack usind response-dev-tools authentication

Question

I am learning token-based authentication in SPA and I have a question. Imagine the authentication process in my application is as follows: whenever a user provides the correct credentials, I give him a token and change the “authenticated” key in the redux store to true, which allows him to see the private content in my application. The component that I want to hide is encoded as follows:

if(this.props.authenticated) {
  return <SuperSecretComponentOfIlluminatiMasonic666Chemtrails />
} else {
  return <PublicComponent />
}

I wonder how safe the approach is, since anyone can install the-dev response tools, flip the "authenticated" key in the browser and see what I want to hide without providing credentials. Should my component be encoded differently or is everything ok and am I just something wrong? I have seen this approach in many tutorials, but this question does not allow me to sleep at night.

Answer 1

You should receive protected content from the server, and this server should only deliver content when the user sends a valid token.

, , , - .

. , , /API, .