authenticated.js

import React from 'react'
import { connect } from 'react-redux'
import { login } from 'actions/authentication'

export default function (Component) {
  const Authenticated = React.createClass({
    componentWillMount () {
      if (!this.props.loggedIn) this.props.login(null, null, this.props.route.path)
    },

    componentWillReceiveProps (nextProps) {
      if (!nextProps.loggedIn) nextProps.login(null, null, nextProps.route.path)
    },

    render () {
      if (!this.props.loggedIn) return <p>Logging in...</p>
      return <Component loggedIn={this.props.loggedIn} {...this.props} />
    }
  })

  return connect((state) => state.authentication, { login })(Authenticated)
}

authentication.js

import API from 'api'
import { replacePath} from 'redux-simple-router'

export const LOGIN = 'LOGIN'
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
export const LOGIN_FAILURE = 'LOGIN_FAILURE'

function checkToken (token) {
  return dispatch => {
    dispatch({ type: 'CHECK_EXISTING_TOKEN', payload: token })
  }
}

export function login (username, password, returnPath) {
  const token = window.localStorage.getItem('token')
  if (!username && !password && token) return checkExistingToken(token)
  if (!username && !password && !token) return replacePath('/login', { returnPath })

  return dispatch => {
    dispatch({ type: 'LOGIN', payload: { username }})
    API.Authentication.authenticate(username, password, function(err, result) {
      if (err) return dispatch({ type: LOGIN_FAILURE, payload: { username, error: err }})
      dispatch({ type: LOGIN_SUCCESS, payload: { username, result }})
      if (returnPath) dispatch(replacePath(returnPath))
    })
  }
}

login-form.js

import { connect } from 'react-redux'
import { login } from 'actions/authentication'
import LoginForm from 'components/base/login-form'

export default connect(state => {
  const routingState = state.routing.state
  let  returnPath = '/profile'
  if (routingState && routingState.returnPath) returnPath = routingState.returnPath
  return { returnPath }
}, (dispatch, props) => {
  return {
    onSubmit: (username, password, returnPath) => {
      dispatch(login(username, password, returnPath))
    }
  }
}, (stateProps, dispatchProps) => {
  return { stateProps, onSubmit: (username, password) => {
    dispatchProps.onSubmit(username, password, stateProps.returnPath)
  }}
})(LoginForm)

login.js

import React from 'react'
import ConnectedLoginForm from 'components/connected/login-form'
import { connect } from 'react-redux'
import { updatePath} from 'redux-simple-router'

const Login = React.createClass({
  componentWillMount () {
    if (this.props.loggedIn) this.props.updatePath('/profile')
  },

  render () {
    return <div><h2>Login</h2><ConnectedLoginForm /></div>
  }
})


export default connect(state => state.authentication, { updatePath })(Login)