title: Permission checks from components in a React/Redux application
body: <p>I'm trying to work with a team building a React application, and trying to figure out the best way to create a "higher-order" React component (one that wraps another) to perform Authentication in conjunction with the Redux data store.</p>
  
  <p>My approach thus far has been to create a module that consists of a function that returns a new React component depending on whether or not there is an authenticated user.</p>
  
  <pre><code>export default function auth(Component) {
  
      class Authenticated extends React.Component {
  
          // conditional logic
  
          render(){
              const isAuth = this.props.isAuthenticated;
  
              return (
                  &lt;div&gt;
                      {isAuth ? &lt;Component {...this.props} /&gt; : null}
                  &lt;/div&gt;
              )
          }
      }
  
      ...
  
      return connect(mapStateToProps)(Authenticated);
  
  }
  </code></pre>
  
  <p>This makes it easy for other people on my team to specify whether or not a component requires certain permissions.</p>
  
  <pre><code>render() {
      return auth(&lt;MyComponent /&gt;);
  }
  </code></pre>
  
  <p>If you are performing role-based checks, this approach makes sense, as you may only have a few roles. In such a case, you could just call <code>auth(&lt;MyComponent /&gt;, admin)</code>.</p>
  
  <p>Passing arguments becomes unwieldy for permissions-based checks. It may however be feasible to specify permissions at the component level as the components are being constructed (as well as manageable in a team environment). Setting static methods/properties seems like a decent solution, but, as far as I can tell, es6 classes export as functions, which don't reveal callable methods.</p>
  
  <p><em>Is there a way to access the properties/methods of an exported React component such that they can be accessed from a containing component?</em></p>