Hacking authentication usind react-dev-tools

Question

I'm learning token-based authentication in SPA and I got a question. Imagine that authentication process in my app is done the following way: whenever a user provides correct credentials I give him a token and change "authenticated" key in redux store to true, which allows a him to see private content in my app. The component I want to hide is coded like so:

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

I wonder if it's a safe approach since anyone can install react-dev-tools, flip "authenticated" key in the browser and see the stuff I want to hide without providing credentials. Should my component be coded in a different way or everything is fine and I'm just getting something wrong? I've seen this approach in numerous amount of tutorials, but this question doesn't let me sleep at night

Answer 1

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

This way, yes, anyone can flip the switch in the client, but that only shows the UI components, without any data.

This is the usual approach when creating single-page applications. As long as you don't have secret or sensitive data right in your client from the beginning, they are as safe as your server / API that delivers the data.