title: Best practice to show or hide "premium features" based on user state?
body: <p>I have a rails backend for user authentication and handling payments through Stripe. I'm building a web app that has three different tiers of functionaility: guest users, logged in users and premium users.</p>
  <p>Upon authentication the backend sends a user object to my react frontend which is stored in the state of my <code>app.js</code> class.</p>
  <pre><code>user: {
    created_at: &quot;2020-09-14T15:28:34.397Z&quot;,
    email: &quot;yo@test.com&quot;,
    id: 14,
    password_digest: &quot;blablabla&quot;,
    premium: true,
    updated: &quot;2020-09-14T15:37:41.648Z&quot;
  }
  </code></pre>
  <p>As you can see it holds the <code>premium: true</code> variable. It gets set in rails after a successful payment.</p>
  <p>Because it is my first time implementing &quot;premium functionaliy&quot; I am not sure what the best practice is to prevent users from interacting with certain features of the application if their <code>premium</code> is set to <code>false</code>.</p>
  <p>Do I just check for it when rendering components like this?</p>
  <pre><code>if(this.state.user.premium) {
    // show premium features
  } else {
    // hide premium features
  }
  </code></pre>
  <p>This is what I would do but doesn't this allow anyone with the react developer tools to edit the object in their browser so they can just set it to true? I would be very grateful for any insight how to achieve this in the cleanest way possible.</p>