Basic Redux Auth

api-util.js

export function configureFetch () {
  const configuredFetch = (endpoint, options) => {
    const initialOptions = {
      headers: {
        Authorization: Cookies.get('token')
      }
    }

    const mergedOptions = _.merge(initialOptions, options);
    return fetch(endpoint, mergedOptions);
  }

  if (__CLIENT__) {
    self.__fetch = configuredFetch;
  } else if (__SERVER__) {
    global.__fetch = configuredFetch;
  }
}

authenticatedRoute.js

import { validateToken } from 'utils/api/auth';

import DashBoard from 'routes/dashboard';
import LoginRoute from 'routes/login';

export default {
  childRoutes: [
    DashBoard,
    LoginRoute
  ],
  onEnter: (nextState, replaceWith, callback) => {
    validateToken()
      .then(
        response => {
          const next = nextState.state && nextState.state.next;
          if (nextState.location.pathname === '/login') {
            replaceWith(null, next || '');
          }
          callback();
          return response;
        },
        error => {
          const next = nextState.state && nextState.state.next;
          if (nextState.location.pathname !== '/login') {
            replaceWith(null, '/login');
          }
          callback();
          return error;
        }
      );
  }
}

client.js

import { setToken, setUser } from 'ducks/login';
import routes from 'routes';

configureFetch();
const store = generateStore({}, routes);

store.dispatch(setUser(Cookies.get('user')));

React.render(
<App store={store} routes={mappedRoutes} />,
document.getElementById('root')
);

ducksLogin.js

export default createReducer('login', initialState, {
  [TRY]: (state, action) => (
    state.mergeIn(['status'], { isTrying: true, errorReason: '' })
  ),
  [SUCCESS]: (state, action) => {
    return state.merge({ id: action.payload.user })
                .mergeIn(['status'], { isTrying: false, errorReason: '' });
  },
  [ERROR]: (state, action) => (
    state.mergeIn(['status'], { isTrying: true, errorReason: '', token: '' })
  ),
  [LOGOUT]: (state, action) => state.mergeIn(['status'], {
    isTrying: false,
    errorReason: '',
    id: null
  }),
  [SET_USER]: (state, action) => (
    state.merge({ id: action.payload.result.user })
  ),
  [CURRENT_REQUEST]: (state, action) => (
    state.mergeIn(['status'], { isFetching: true })
  ),
  [CURRENT_SUCCESS]: (state, action) => (
    state.mergeIn(['status'], { isFetching: false })
  ),
  [CURRENT_ERROR]: (state, action) => (
    state.mergeIn(['status'], { isFetching: false })
  )
});


export function setUser (userId) {
  return {
    type: SET_USER,
    payload: { result: { user: userId } }
  }
}

/*
 * This method is called whenever the user presses the login button and
 * he or she had the correct credentials. It will  redirect the user to
 * the next page (or home, if none was supplied.)
 */
function loginSuccess () {
  return (response) => (
    (dispatch, getState) => {
      const routerLocation = getState().router.location

      // If we're on the client we need to set a cookie so that
      // the server renderer can fetch that cookie on a page refresh
      // thus keeping the user logged in.
      if (__CLIENT__) {
        Cookies.set('token', response.token);
        Cookies.set('user', response.user);
      }

      // Transition the user to next path or to /home.
      // This is a side-effect in an action and shouldn't be done according
      // to best-practice. But setting up a listener seems kind of overkill.
      const next = routerLocation.state && routerLocation.state.next;
      dispatch(pushState({}, next || '/'));
    }
  )
}

export function login (email, password) {
  return {
    types: [TRY, SUCCESS, ERROR],
    payload: {
      promise: API.authenticate(email, password),
      onSuccessAction: loginSuccess()
    }
  }
}

routesDashboard.js

export default {
  path: '/',
  component: DashBoard,
  childRoutes: [
    ProfilePage,
    SomeListPage
  ]
}

routesLogin.js

export default {
  path: '/login',
  component: Login
}