MEAN Stack + passport local: using sessions on a single page app - authentication

Question

I tried implementing this tutorial on how to add an authentication process to a MEAN app:
http://mherman.org/blog/2015/07/02/handling-user-authentication-with-the-mean-stack/#.VgUaT_mqpBc
The change i tried to implement is to make the app a single page app ... so the only routes i left were the post routes for login ... i am addressing the login because if i can make that work ... the rest will follow
So my app consists of a google map that fills the page and two buttons (login and register) that open a modal window ... inside i have login form ... here are the codes for the angular controller of the modal window and the jade template
Controller:
angular.module('myApp')
.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'settings', '$location', 'AuthService', function ($scope, $modalInstance, settings, $location, AuthService) {
$scope.settings = settings;
$scope.texts = {
login: {
title: "Login details",
button: "Login"
},
register: {
title: "Registration form",
button: "Register"
}
};
$scope.register = function () {
$modalInstance.close();
};
$scope.login = function () {
// initial values
$scope.error = false;
// call login from service
AuthService.login($scope.loginForm.username, $scope.loginForm.password)
// handle success
.then(function () {
console.log(AuthService.getUserStatus());
$modalInstance.close();
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Invalid username and/or password";
});
//$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.close();
};
}])
Jade template for modal window:
div(class="modal-header")
h3(class="modal-title") {{texts[settings.action].title}}
div(class="modal-body")
div(ng-show="error", class="alert alert-danger")
form(class="form", ng-submit="login()")
div(class="form-group")
label Username
input(type="text", class="form-control", name="username", ng-model="loginForm.username")
div(class="form-group")
label Password
input(type="password", class="form-control", name="password", ng-model="loginForm.password")
div(class="modal-footer")
button(ng-show="settings.action=='login'", class="btn btn-primary", type="button", ng-click="login()") {{texts.login.button}}
button(ng-show="settings.action=='register'", class="btn btn-primary", type="button", ng-click="register()") {{texts.register.button}}
button(class="btn btn-warning", type="button", ng-click="cancel()") Cancel
So my pb is this: the passport authenticate gets executed correctly .. I get the login success message ... but on refresh ... if I run AuthService.isLoggedIn() .. I get false ...
Here is the service:
angular.module('myApp').factory('AuthService',
['$q', '$timeout', '$http',
function ($q, $timeout, $http) {
// create user variable
var user = null;
// return available functions for use in controllers
return ({
isLoggedIn: isLoggedIn,
getUserStatus: getUserStatus,
login: login,
logout: logout,
register: register
});
function isLoggedIn() {
if(user) {
return true;
} else {
return false;
}
}
function getUserStatus() {
return user;
}
function login(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/user/login', {username: username, password: password})
// handle success
.success(function (data, status) {
if(status === 200 && data.status){
user = true;
deferred.resolve();
} else {
user = false;
deferred.reject();
}
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
}]);
Here is the post route for the passport.authenticate
router.post('/login', function (req, res, next) {
passport.authenticate('local', function (err, user, info) {
if (err) {
return next(err)
}
if (!user) {
return res.status(401).json({err: info})
}
req.logIn(user, function (err) {
if (err) {
return res.status(500).json({err: 'Could not log in user'})
}
res.status(200).json({status: 'Login successful!'})
});
})(req, res, next);
});