11-Protected Routes in React with Authorization

Author: rwieruch

src/components/Account/index.js

@@ -1,14 +1,22 @@
 import React from 'react';
 
+import { AuthUserContext } from '../Session';
 import { PasswordForgetForm } from '../PasswordForget';
 import PasswordChangeForm from '../PasswordChange';
+import { withAuthorization } from '../Session';
 
 const AccountPage = () => (
-  <div>
-    <h1>Account Page</h1>
-    <PasswordForgetForm />
-    <PasswordChangeForm />
-  </div>
+  <AuthUserContext.Consumer>
+    {authUser => (
+      <div>
+        <h1>Account: {authUser.email}</h1>
+        <PasswordForgetForm />
+        <PasswordChangeForm />
+      </div>
+    )}
+  </AuthUserContext.Consumer>
 );
 
-export default AccountPage;
+const authCondition = authUser => !!authUser;
+
+export default withAuthorization(authCondition)(AccountPage);

src/components/Home/index.js

@@ -1,9 +1,14 @@
 import React from 'react';
 
-const Home = () => (
+import { withAuthorization } from '../Session';
+
+const HomePage = () => (
   <div>
-    <h1>Home</h1>
+    <h1>Home Page</h1>
+    <p>The Home Page is accessible by every signed in user.</p>
   </div>
 );
 
-export default Home;
+const condition = authUser => !!authUser;
+
+export default withAuthorization(condition)(HomePage);

src/components/Session/index.js

@@ -1,4 +1,5 @@
 import AuthUserContext from './context';
 import withAuthentication from './withAuthentication';
+import withAuthorization from './withAuthorization';
 
-export { AuthUserContext, withAuthentication };
+export { AuthUserContext, withAuthentication, withAuthorization };

src/components/Session/withAuthorization.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { compose } from 'recompose';
+
+import AuthUserContext from './context';
+import { withFirebase } from '../Firebase';
+import * as ROUTES from '../../constants/routes';
+
+const withAuthorization = condition => Component => {
+  class WithAuthorization extends React.Component {
+    componentDidMount() {
+      this.listener = this.props.firebase.auth.onAuthStateChanged(
+        authUser => {
+          if (!condition(authUser)) {
+            this.props.history.push(ROUTES.SIGN_IN);
+          }
+        },
+      );
+    }
+
+    componentWillUnmount() {
+      this.listener();
+    }
+
+    render() {
+      return (
+        <AuthUserContext.Consumer>
+          {authUser =>
+            condition(authUser) ? <Component {...this.props} /> : null
+          }
+        </AuthUserContext.Consumer>
+      );
+    }
+  }
+
+  return compose(
+    withRouter,
+    withFirebase,
+  )(WithAuthorization);
+};
+
+export default withAuthorization;