Permission checks from components in a React/Redux application
<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>