How to add login authentication and session to ReactJS React Router and Redux with MongoDB + NodeJS Express?
<p>I have a MongoDB + NodeJS Express server, with Webpack running and able to register a user with credentials to the database. I now would like to add authentication and session when the user logs in. I'm looking into <code>Passport.js</code> but can't seem to grasp how all can be put together. </p>

<p>What would be the best approach to it? Any example and guidance would be greatly appreciated.</p>

<p>So far these are my set up. </p>

<p>For the server: </p>

<pre><code>var express = require('express');
var path = require('path');
var config = require('../webpack.config.js');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var bodyParser = require('body-parser');
var MongoClient = require('mongodb').MongoClient;
var ObjectId = require('mongodb').ObjectID;

var app = express();
var db;

var compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath}));

app.use(webpackHotMiddleware(compiler));

app.use(express.static('dist'));

app.use(bodyParser.json());

app.post('/api/users/', function(req, res) {
  console.log('Req body', req.body);
  var newUser = req.body;
  db.collection('users').insertOne(newUser, function(err, result) {
    if(err) console.log(err);
    var newId = result.insertedId;

    db.collection('users').find({_id: newId}).next(function(err, doc) {
      if(err) console.log(err);
      res.json(doc);
    })
  })
})

app.get('/', function (req, res) {
  res.sendFile(path.resolve('client/index.html'));
});

MongoClient.connect('mongodb://localhost/testdb', function(err, dbConnection) {
  if(err) console.log(err);

  db = dbConnection;
  var server = app.listen(3000, function() {
      var port = server.address().port;
      console.log("Started server at port", port);
  });
});
</code></pre>

<p>And as for the router (Login page being at <code>Login</code> and the register page being render at <code>Register</code>):</p>

<pre><code>//react-router
render(
  &lt;div&gt;
    &lt;Provider store={store}&gt;
      &lt;Router history={hashHistory}&gt;
        &lt;Route
          component ={MainPage}
          path='/'
        &gt;
          &lt;IndexRoute component={Login}/&gt;
          &lt;Route
            component={Register} path="Register"
          /&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;
  &lt;/div&gt;,
  document.getElementById('app')
)
</code></pre>

<p>API POST request in redux: </p>

<pre><code>//How registered user's credentials are stored via action in redux
  registerUser(username, email, name, password) {
    console.log('Started registering request')
    var user = {
      username: username,
      email: email,
      name: name,
      password: password,
    }

    var request = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    }

    console.log('Adding user: ', user)

    fetch(`http://localhost:3000/api/users`, request)
    .then(res =&gt; res.json())
    .then(user =&gt; {
      console.log(user);
      return user;
    })
    .catch(err =&gt; {
      console.log('Error is', err)
    })

    console.log('Ending registering request')
  },
</code></pre>