Example of using branch to conditionally render components based on auth state

auth-door.js

import { connect } from 'react-redux'
import compose from 'recompose/compose'
import branch from 'recompose/branch'
import renderComponent from 'recompose/renderComponent'
import { isLoggedIn, authInProgress } from 'selectors/auth'

const mapStateToProps = (state) => {
  return {
    loggedIn: isLoggedIn(state),
    inProgress: authInProgress(state)
  }
}

export default (LoggedInComponent, LoggedOutComponent) => compose(
  connect(mapStateToProps),
  branch(
    ({ loggedIn, inProgress }) => loggedIn || inProgress,
    renderComponent(LoggedInComponent),
    renderComponent(LoggedOutComponent)
  )
)

Home.js

import authDoor from 'hoc/auth-door'
import Loadable from 'react-loadable';
import Loading from './Loading'

const Dashboard = Loadable({
  loader: () => import('pages/Dashboard'),
  LoadingComponent: Loading,
  // optional options...
  delay: 200,
  serverSideRequirePath: path.join(__dirname, 'pages/Dashboard'),
  webpackRequireWeakId: () => require.resolveWeak('pages/Dashboard'),
})

const Landing = Loadable({
  loader: () => import('pages/Landing'),
  LoadingComponent: Loading,
  // optional options...
  delay: 200,
  serverSideRequirePath: path.join(__dirname, 'pages/Landing'),
  webpackRequireWeakId: () => require.resolveWeak('pages/Landing'),
})

export default authDoor(Dashboard, Landing)()

RedirectExample.js

import authDoor from 'hoc/auth-door'
import withProps from 'recompose/withProps'
import Redirect from 'react-router/Redirect'
import Dashboard from 'pages/Dashboard'

const RedirectTo401 = withProps({ to: '/401' })(Redirect)
export default authDoor(Dashboard, RedirectTo401)()