implementation of redux-auth-wrapper

Author: bertho-zero

package.json

@@ -98,6 +98,7 @@
     }
   },
   "dependencies": {
+    "async": "^2.1.4",
     "babel-core": "^6.21.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -148,6 +149,7 @@
     "react-router-redux": "^4.0.7",
     "react-router-scroll": "^0.4.1",
     "redux": "^3.6.0",
+    "redux-auth-wrapper": "^0.9.0",
     "redux-connect": "^5.0.0",
     "redux-form": "^6.3.2",
     "redux-persist": "^4.0.0-beta2",

src/containers/App/App.js

@@ -36,6 +36,7 @@ import { asyncConnect } from 'redux-connect';
 export default class App extends Component {
   static propTypes = {
     children: PropTypes.object.isRequired,
+    router: PropTypes.object.isRequired,
     user: PropTypes.object,
     notifs: PropTypes.object.isRequired,
     logout: PropTypes.func.isRequired,
@@ -53,7 +54,8 @@ export default class App extends Component {
   componentWillReceiveProps(nextProps) {
     if (!this.props.user && nextProps.user) {
       // login
-      this.props.pushState('/loginSuccess');
+      const redirect = this.props.router.location.query && this.props.router.location.query.redirect;
+      this.props.pushState(redirect || '/loginSuccess');
     } else if (this.props.user && !nextProps.user) {
       // logout
       this.props.pushState('/');

src/routes.js

@@ -1,39 +1,79 @@
 import React from 'react';
 import { IndexRoute, Route } from 'react-router';
+import { routerActions } from 'react-router-redux';
+import { UserAuthWrapper } from 'redux-auth-wrapper';
+import async from 'async';
+import isPromise from 'is-promise';
 import { isLoaded as isAuthLoaded, load as loadAuth } from 'redux/modules/auth';
 import { App, Home, NotFound } from 'containers';
 
 // eslint-disable-next-line import/no-dynamic-require
 if (typeof System.import === 'undefined') System.import = module => Promise.resolve(require(module));
 
 export default store => {
-  const loadAuthIfNeeded = cb => {
+  const injectReducerAndRender = (name, reducerPromise, containerPromise) =>
+    Promise.all([reducerPromise, containerPromise])
+      .then(([reducer, container]) => {
+        store.inject(name, reducer.default || reducer);
+        return container.default || container;
+      });
+
+  const onEnterChain = (...listOfOnEnters) => (nextState, replace, onEnterCb) => {
+    let redirected = false;
+    const wrappedReplace = (...args) => {
+      replace(...args);
+      redirected = true;
+    };
+    async.eachSeries(listOfOnEnters, (onEnter, callback) => {
+      if (!redirected) {
+        const result = onEnter(store, nextState, wrappedReplace);
+        if (isPromise(result)) return result.then(() => callback(), callback);
+      }
+      callback();
+    }, err => {
+      if (err) onEnterCb(err);
+      onEnterCb();
+    });
+  };
+
+  const loadAuthIfNeeded = () => {
     if (!isAuthLoaded(store.getState())) {
-      return store.dispatch(loadAuth()).then(() => cb()).catch(cb);
+      return store.dispatch(loadAuth()).catch(() => {});
     }
-    return cb();
-  };
-  const checkUser = (cond, replace, cb) => {
-    const { auth: { user } } = store.getState();
-    if (!cond(user)) replace('/');
-    cb();
+    return Promise.resolve();
   };
 
-  const requireNotLogged = (nextState, replace, cb) => {
-    const cond = user => !user;
-    loadAuthIfNeeded(() => checkUser(cond, replace, cb));
-  };
-  const requireLogin = (nextState, replace, cb) => {
-    const cond = user => !!user;
-    loadAuthIfNeeded(() => checkUser(cond, replace, cb));
+  const checkPermissions = chainedPermissions => loadAuthIfNeeded().then(() => chainedPermissions);
+
+  const enterPermissions = (...listOfPermissions) => {
+    const permissions = [loadAuthIfNeeded].concat(listOfPermissions.map(perm => perm.onEnter || perm));
+    return onEnterChain(...permissions);
   };
 
-  const injectAndRender = (name, reducerPromise, containerPromise) =>
-    Promise.all([reducerPromise, containerPromise])
-      .then(([reducer, container]) => {
-        store.inject(name, reducer.default || reducer);
-        return container.default || container;
-      });
+  const permissionsComponent = (...listOfPermissions) => ({
+    onEnter: enterPermissions(...listOfPermissions),
+    getComponent: () => checkPermissions(listOfPermissions.reduceRight(
+      (prev, next) => next(prev),
+      props => props.children
+    ))
+  });
+
+  /* Permissions */
+
+  const isAuthenticated = UserAuthWrapper({
+    authSelector: state => state.auth.user,
+    redirectAction: routerActions.replace,
+    wrapperDisplayName: 'UserIsAuthenticated'
+  });
+
+  const isNotAuthenticated = UserAuthWrapper({
+    authSelector: state => state.auth.user,
+    redirectAction: routerActions.replace,
+    wrapperDisplayName: 'UserIsNotAuthenticated',
+    predicate: user => !user,
+    failureRedirectPath: '/',
+    allowRedirectBack: false
+  });
 
   /**
    * Please keep routes in alphabetical order
@@ -44,19 +84,19 @@ export default store => {
       <IndexRoute component={Home} />
 
       {/* Routes requiring login */}
-      <Route onEnter={requireLogin}>
+      <Route {...permissionsComponent(isAuthenticated)}>
         <Route path="loginSuccess" getComponent={() => System.import('./containers/LoginSuccess/LoginSuccess')} />
         <Route
           path="chatFeathers"
-          getComponent={() => injectAndRender(
-            'chat',
-            System.import('./redux/modules/chat'),
+          getComponent={() => injectReducerAndRender(
+            'chat', System.import('./redux/modules/chat'),
             System.import('./containers/ChatFeathers/ChatFeathers')
-          )} />
+          )}
+        />
       </Route>
 
       {/* Routes disallow login */}
-      <Route onEnter={requireNotLogged}>
+      <Route {...permissionsComponent(isNotAuthenticated)}>
         <Route path="register" getComponent={() => System.import('./containers/Register/Register')} />
       </Route>
 
@@ -65,18 +105,18 @@ export default store => {
       <Route path="about" getComponent={() => System.import('./containers/About/About')} />
       <Route
         path="survey"
-        getComponent={() => injectAndRender(
-          'survey',
-          System.import('./redux/modules/survey'),
+        getComponent={() => injectReducerAndRender(
+          'survey', System.import('./redux/modules/survey'),
           System.import('./containers/Survey/Survey')
-        )} />
+        )}
+      />
       <Route
         path="widgets"
-        getComponent={() => injectAndRender(
-          'widgets',
-          System.import('./redux/modules/widgets'),
+        getComponent={() => injectReducerAndRender(
+          'widgets', System.import('./redux/modules/widgets'),
           System.import('./containers/Widgets/Widgets')
-        )} />
+        )}
+      />
       <Route path="chat" getComponent={() => System.import('./containers/Chat/Chat')} />
 
       {/* Catch all route */}