An authorization high-order-component using recompose, redux and react-router.

AuthorizationHOC.js

import { emptyObject } from 'fbjs/lib/emptyObject';
import { connect } from 'react-redux';
import { pushState } from 'redux-router';
import pure from 'recompose/pure';
import defaultProps from 'recompose/defaultProps';
import doOnReceiveProps from 'recompose/doOnReceiveProps';
import renderNothing from 'recompose/renderNothing';
import renderComponent from 'recompose/renderComponent';
import branch from 'recompose/branch';
import compose from 'recompose/compose';

export default function(BaseComponent) {
  return compose(
    connect(
      ({ auth }) => ({ auth }),
      { pushState }
    ),
    pure,
    defaultProps({ auth: emptyObject }),
    doOnReceiveProps(props => {
      if (!props.auth.token) {
        props.pushState(null, `/login?next=${location.pathname}`);
      }
    }),
    branch(
      props => props.auth.token,
      renderComponent(BaseComponent),
      renderNothing,
    )
  )(BaseComponent);
}

For example, we can use it in our route.

  <Route path="/" component={App}>
    <IndexRoute component={AuthorizationHOC(DashboardPage)} />
    <Route path="/login" component={LoginForm} />
  </Route>

This example is derived from joshgeller/react-redux-jwt-auth-example.

Really nice example.