title: How can I log an end user into my single page application, and redirect them to the Single page application?
body: <p>How can I log an end user into my single page application, and redirect them to the Single page application, using Backbone.js. Express.js and passport.js. </p>
  
  <p>I have passport, mongo.db, express, and backbone all working on my application. However, upon successful login, I want to load up the single page, backbone js, web application. As of right now, I have the login system working fine. But when I go to redirect the user to the application, after successful login, for some reason it just redirects right back to the login page. I have used console log to make sure that there is nothing wrong with the login code on the server side and everything is working fine. The strange thing is that when I open chrome developer tools, and look at the headers and response, I'm getting the correct index page back, but it's not loading in the browser and the Url remains <code>http://localhost:3000/login</code>. </p>
  
  <p>Here is the code that I suspect must somehow be the culprit:</p>
  
  <p><strong>See edit #2</strong></p>
  
  <p>I've tried both <code>res.sendfile(__dirname + '/public/index.html');</code> and <code>res.render('index', { user: req.user });</code> in my base ('/') route but neither of them seems to be loading the index.html. Note that public/index.html and the ejs index are essentially the same files. I started off having my entire app load up on the client side but now I'm trying to move the main index.html file over to the server side so that it can be password protected. </p>
  
  <p>Please let me know if there is any questions at all that will help me better explain this problem, or if there is anymore code that you would like to see. I really want to get this thing figured out.</p>
  
  <p><strong>Edit</strong> As you can see with this screenshot of my browser, I have nothing more than simple form. When that form is submitted, I do get back the desired page in the response, but it's not loading up in the browser. I'm also getting a failed to load resource error in the console, but it's failing to load /login for some reason - even though I'm trying to load index.
  <img src="https://i.stack.imgur.com/9vMRX.png" alt="enter image description here"> </p>
  
  <p><strong>Edit #2</strong> As much as I hate to paste endless blocks of code, I think the only way to resolve this issue is to paste endless blocks of code. 
  So here is server.js in all it's glory - minus some of the api routes that are irrelevant:</p>
  
  <pre><code>var express = require('express')
    , http = require('http')
    , passport = require('passport')
    , LocalStrategy = require('passport-local').Strategy
    , bcrypt = require('bcrypt')
    , SALT_WORK_FACTOR = 10
    , mongoose = require('mongoose')
    , path = require('path');
  
  var app = express();
  var server = http.createServer(app);
  var io = require('socket.io').listen(server);
  server.listen(3000);
  
  app.configure(function(){
    app.set('port', process.env.PORT || 3000);
    app.set('views', __dirname + '/views');
    app.set('view engine', 'ejs');
    app.engine('ejs', require('ejs-locals'));
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(express.cookieParser('your secret here'));
    app.use(express.session());
    app.use(passport.initialize());
    app.use(passport.session());
    app.use(app.router);
    app.use(express.static(path.join(__dirname, 'public')));
  });
  
  app.configure('development', function(){
      app.use( express.errorHandler({ dumpExceptions: true, showStack: true }));
  });
  
  io.sockets.on('connection', function (socket) {
    socket.emit('news', { hello: 'world' });
    socket.on('my other event', function (data) {
      console.log(data);
    });
  });
  
  //Connect to database
  var db = mongoose.connect( 'mongodb://localhost/attorneyapp' );
  
  /*
  |-------------------------------------------------------------------------------
  | Schemas
  |-------------------------------------------------------------------------------
  */
  var userSchema = mongoose.Schema({
    username: { type: String, required: true, unique: true },
    email: { type: String, required: true, unique: true },
    password: { type: String, required: true},
  });
  // Bcrypt middleware
  userSchema.pre('save', function(next) {
      var user = this;
  
      if(!user.isModified('password')) return next();
  
      bcrypt.genSalt(SALT_WORK_FACTOR, function(err, salt) {
          if(err) return next(err);
  
          bcrypt.hash(user.password, salt, function(err, hash) {
              if(err) return next(err);
              user.password = hash;
              next();
          });
      });
  });
  // Password verification
  userSchema.methods.comparePassword = function(candidatePassword, cb) {
      bcrypt.compare(candidatePassword, this.password, function(err, isMatch) {
          if(err) return cb(err);
          cb(null, isMatch);
      });
  };
  var Client = new mongoose.Schema({
      first_name: String,
      last_name: String,
      status: String,
  });
  var Case = new mongoose.Schema({
      case_name: String,
      status: String,
  });
  
  /*
  |-------------------------------------------------------------------------------
  | Models
  |-------------------------------------------------------------------------------
  */
  var User = mongoose.model( 'User', userSchema );
  var ClientModel = mongoose.model( 'Client', Client );
  var CaseModel = mongoose.model( 'Case', Case );
  
  // Seed a user
  // var user = new User({ username: 'bob', email: 'bob@example.com', password: 'secret' });
  // user.save(function(err) {
  //   if(err) {
  //     console.log(err);
  //   } else {
  //     console.log('user: ' + user.username + " saved.");
  //   }
  // });
  
  // Passport session setup.
  //   To support persistent login sessions, Passport needs to be able to
  //   serialize users into and deserialize users out of the session.  Typically,
  //   this will be as simple as storing the user ID when serializing, and finding
  //   the user by ID when deserializing.
  passport.serializeUser(function(user, done) {
    done(null, user.id);
  });
  
  passport.deserializeUser(function(id, done) {
    User.findById(id, function (err, user) {
      done(err, user);
    });
  });
  // Use the LocalStrategy within Passport.
  //   Strategies in passport require a `verify` function, which accept
  //   credentials (in this case, a username and password), and invoke a callback
  //   with a user object.  In the real world, this would query a database;
  //   however, in this example we are using a baked-in set of users.
  passport.use(new LocalStrategy(function(username, password, done) {
    User.findOne({ username: username }, function(err, user) {
      if (err) { 
          console.log('error: ', err);
          return done(err); 
  
      }
      if (!user) { 
          console.log('Unknown user ', username);  
          return done(null, false, { message: 'Unknown user ' + username }); 
      }
      user.comparePassword(password, function(err, isMatch) {
        if (err){
          console.log('error: ', err);
  
          return done(err);
        } 
        if(isMatch) {
          console.log('it is a match');
          return done(null, user);
        } else {
          console.log('invalid password');
  
          return done(null, false, { message: 'Invalid password' });
        }
      });
    });
  }));
  /*
  |-------------------------------------------------------------------------------
  | User
  |-------------------------------------------------------------------------------
  */
  // POST /login
  //   Use passport.authenticate() as route middleware to authenticate the
  //   request.  If authentication fails, the user will be redirected back to the
  //   login page.  Otherwise, the primary route function function will be called,
  //   which, in this example, will redirect the user to the home page.
  //
  //   curl -v -d "username=bob&amp;password=secret" http://127.0.0.1:3000/login
  //   
  /***** This version has a problem with flash messages
  app.post('/login', 
    passport.authenticate('local', { failureRedirect: '/login', failureFlash: true }),
    function(req, res) {
      res.redirect('/');
    });
  */
  
  // POST /login
  //   This is an alternative implementation that uses a custom callback to
  //   acheive the same functionality.
  app.get('/', function(req, res){
      console.log('base router is being called');
  
      // res.sendfile(__dirname + '/public/index.html');
      res.render('index');
  });
  app.get('/login', function(req, res) {
      return res.render('login');
  });
  
  app.post('/login', function(req, res, next) {
  
    passport.authenticate('local', function(err, user, info) {
      if (err) { return next(err) }
      if (!user) {
          console.log('NOT USER', info.message);
  
        req.session.messages =  [info.message];
  
        return res.redirect('/login');
  
      }
      req.logIn(user, function(err) {
        if (err) { return next(err); }
        console.log('YES USER is loged in');
        // return res.sendfile(__dirname + '/public/index.html');
        return res.redirect('/');
  
  
      });
    })(req, res, next);
  });
  
  app.get('/users', function(req, res){
    return User.find( function( err, users ) {
          if( !err ) {
              return res.send( users );
          } else {
              return console.log( err );
          }
      });
  });
  </code></pre>
  
  <p>Also, not sure if this is relevant, but here is my directory and file structure.
  <img src="https://i.stack.imgur.com/924z6.png" alt="enter image description here"></p>