Secure client-side conditional rendering of auth validation dependent components

Question

With browser's devtools ability to reload edited javascript overrides, how can you "securely" execute validation-dependent front-end code?

Say you want to conditionally display some sort of proprietary UI element(s) (humor me) dependent on an authorized users permissions. The authorized user data would be validated with a promise, but if the conditional is client side based on the returned promise data, couldn't someone just remove that conditional, save as an override and reload the page?

if (permissionGroup == 'Team'){
  return <>{children}</>
}

if (nodeENV !== 'development'){
  checkAuth();
}

Edit and run JS override to return children without running auth checks

if (permissionGroup !== 'anything'){
  return <>{children}</>
}

Any way to prevent this? Am I mis-informed about devtools security? or is the industry-standard understood that, other than data, anything client side is essentially open source?

Answer 1

The answer is, it is simply not possible to securely control dynamically rendered components on the front end, outside of using possibly some sort of encryption service like JSscrambler

The solution is, only render components to the client side, to user that are authorized to access or view the components, who has been authenticated, validated and authorized on the server.

Answer 2

You never ever trust the client, as you mentioned the client can modify the code and override your "security features".

You will need a backend and need to validate the clients input.