title: How to add login authentication and session to ReactJS React Router and Redux with MongoDB + NodeJS Express?
body: <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>