Meteor with Webpack, React and Redux in Practice

For those unfamiliar with Meteor, it exposes a `Meteor` global and all installed packages usually extend existing globals or add new ones (as stated in my *Cons* section before). Here, `ServiceConfiguration` is responsible for managing accounts services (Google, Facebook, etc.) configurations. Please refer to the [documentation](http://docs.meteor.com/#/full/meteor_loginwithexternalservice) for more details.

### Redux actions
Let's put all the authentication related actions in `./app/client/actions/auth.js`.

#### Redux action for google signin
Meteor expose the `loginWithGoogle` method which will take care of the oauth process with a popup.

``` js
export function loginWithGoogle() {
return () => {
Meteor.loginWithGoogle(err => {
if (err) {
	alert('Error while login with google');
}
});
};
}

export const USER_LOGGING_IN = "USER_LOGGING_IN";
export const USER_DATA = "USER_DATA";

export function loadUser() {
  return dispatch => {
    Tracker.autorun(() => {
      dispatch({
        type: "USER_LOGGING_IN",
        data: Meteor.loggingIn(),
      });
    });

    Tracker.autorun(() => {
      dispatch({
        type: "USER_DATA",
        data: Meteor.user(),
      });
    });
  };
}

export function logout() {
  return () => {
    Meteor.logout(err => {
      if (err) {
        alert("Error while login with google");
      }
    });
  };
}

import assign from "object-assign";
import { USER_LOGGING_IN, USER_DATA } from "../actions/auth";

export const initialState = {
  user: null,
  loggingIn: false,
};

export default function(state = initialState, action) {
  const { data, type } = action;

  switch (type) {
    case USER_DATA:
      return assign({}, state, {
        user: data,
      });

    case USER_LOGGING_IN:
      return assign({}, state, {
        loggingIn: data,
      });

    default:
      return state;
  }
}

import { combineReducers } from "redux";
import { routerStateReducer as router } from "redux-router";
import auth from "./auth";

export default combineReducers({
  auth,
  router,
});

/* global Meteor */
import React from "react";
import { render } from "react-dom";

import Root from "./client/containers/Root";
import configureStore from "./client/store";
import { loadUser } from "./client/actions/auth";

const store = configureStore();

Meteor.startup(() => {
  render(<Root {...{ store }} />, document.getElementById("root"));

  store.dispatch(loadUser());
});

import { applyMiddleware, compose, createStore } from "redux";
import { reduxReactRouter } from "redux-router";
import thunkMiddleware from "redux-thunk";

const createHistory = require("history/lib/createBrowserHistory");

import rootReducer from "../reducers";
import routes from "../routes";

const middlewares = [thunkMiddleware];

const finalCreateStore = compose(
  applyMiddleware(...middlewares),
  reduxReactRouter({ createHistory, routes })
)(createStore);

export default function configureStore(initialState) {
  return finalCreateStore(rootReducer, initialState);
}

import React, { PropTypes } from "react";
import { Provider } from "react-redux";
import { ReduxRouter } from "redux-router";

const Root = ({ store }) => (
  <Provider {...{ store }}>
    <ReduxRouter />
  </Provider>
);

Root.propTypes = {
  store: PropTypes.object.isRequired,
};

export default Root;

import React from "react";
import { Route, IndexRoute } from "react-router";

import App from "../containers/App";
import Home from "../containers/Home";

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
  </Route>
);

import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import { logout } from "../actions/auth";
import App from "../components/App";

function mapStateToProps(state) {
  return {
    user: state.auth.user,
    logginIn: state.auth.logginIn,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ logout }, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

import React, { PropTypes } from "react";
import Icon from "react-fa";

const App = ({ children, loggingIn, logout, title, user }) => {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-xs-12">
          <nav className="navbar navbar-fixed-top navbar-dark bg-primary">
            <a className="navbar-brand" href="#">
              {title}
            </a>
            <ul className="nav navbar-nav">
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Home
                  <span className="sr-only">(current)</span>
                </a>
              </li>
            </ul>
            {user && (
              <ul className="nav navbar-nav pull-right">
                <li className="nav-item dropdown">
                  <a
                    aria-haspopup="true"
                    aria-expanded="false"
                    className="nav-link dropdown-toggle"
                    data-toggle="dropdown"
                    href="#"
                    role="button"
                  >
                    {user.profile.name}
                  </a>
                  <div className="dropdown-menu dropdown-menu-right">
                    <a className="dropdown-item" href="#" onClick={logout}>
                      Sign out
                    </a>
                  </div>
                </li>
              </ul>
            )}
          </nav>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-12 main-content">
          {loggingIn && <Icon spin name="spinner" />}
          {!loggingIn && children}
        </div>
      </div>
    </div>
  );
};

App.propTypes = {
  children: PropTypes.node,
  loggingIn: PropTypes.bool,
  logout: PropTypes.func.isRequired,
  title: PropTypes.string,
  user: PropTypes.object,
};

App.defaultProps = {
  title: "Team Time Tracker",
};

export default App;

import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import { loginWithGoogle } from "../actions/auth";
import Home from "../components/Home";

function mapStateToProps(state) {
  return {
    ...state,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      loginWithGoogle,
    },
    dispatch
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

import React, { PropTypes } from "react";
import Fa from "react-fa";

const Home = ({ loginWithGoogle }) => {
  return (
    <div className="row">
      <div className="col-xs-12">
        <div className="jumbotron">
          <h1>Please sign in</h1>
          <p>
            <button className="btn btn-primary" onClick={loginWithGoogle}>
              <Fa name="user" />
              Sign in with Google
            </button>
          </p>
        </div>
      </div>
    </div>
  );
};

Home.propTypes = {
  loginWithGoogle: PropTypes.func.isRequired,
};

export default Home;