req.isAuthenticated always returns false with using observable in angular2 app

Question

I'm using node with passport and I'm trying to execute a login process with the 'LocalStrategy'.

When using a REST client to execute the login request and then ask for another REST path to extract data the req.isAuthenticated() returns true as expected.

But when I'm doing so in my angular2 application it's always false.

Here is the code of server.js:

var express = require('express');
var session = require('express-session');
var app = express();
var passport = require('passport');
var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(session({
    secret: 'secret',
    saveUninitialized: true,
    resave: true
}));

app.use(passport.initialize());
app.use(passport.session());


var sections = require('./sections/routes/sections');
var users = require('./users/routes/users');

app.use('/api/v1/sections', sections);
app.use('/api/v1/users', users);

app.listen(9090, function () {
    console.log('Example app listening on port 9090')
});

Users.js:

var express = require('express');
var router = express.Router();
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;

var User = require('../models/users');


passport.use(new LocalStrategy({
        usernameField: 'email',
        passwordField: 'password'
    },
    function(email, password, done) {
        User.findOne({ $or: [ { userName: email },{ email: email} ] }, function(err, user) {
            if (err) { return done(err); }
            if (!user) {
                return done(null, false, { message: 'Incorrect username.' });
            }
            if (!User.verifyPassword(user.password,password)) {
                return done(null, false, { message: 'Incorrect password.' });
            }
            console.log('User found: ' + user);
            return done(null, user);
        });
    }
));


passport.serializeUser(function(user, done) {
    console.log('serialize user id: ' + user.id);
    done(null, user._id);
});

passport.deserializeUser(function(id, done) {

    console.log('deserialize user id: ' + id);

    User.findById(id, function (err, user) {

        if (err){
            console.error('User not found. ' + err);
        }

        done(err, user);
    });
});


router.post('/login', passport.authenticate('local'),function (req, res) {
    console.log('User authenticated');
    res.status(200).json({result: {}});
});


module.exports = router;

Sections.js:

var express = require('express');
var router = express.Router();

var Sections = require('../models/sections');

router.get('/', function (req, res,next) {

    if (!req.isAuthenticated()) { // Works with REST client only!
        res.status(401).json({result: 'UnAuthorized'});
    } else {

        console.log('User ' + req.user + " isAuth: " + req.isAuthenticated());

        Sections.findOne({userName: req.user.userName}, function (err, sections) {
            if (err) {
                // return done(err);
                res.status(500).json({result: err});
            } else if (!sections) {
                // return done(null, false, { message: 'Incorrect username.' });
                res.status(200).json({result: {}});
            } else {
                // return done(null, sections);
                res.status(200).json({result: sections});
            }
        });
    }

    // next();
});

module.exports = router;

Login.component.ts:

this._loginServer.login(user).subscribe( () => {
                    console.log('Login passed'); // Get's here
                    this._router.navigate(['sections']); // Get's 401 from server :(
                },
                error => {
                    console.log('Login failed');
                });

Answer 1

Hy, you have surely a service (_loginServer) in your angular app. Set coockies in your headers with {withCredentials: true}. I had the same issue and it helped me

the function login(user) shall look like as follow.

  login(user: string): Observable<any> { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers, withCredentials: true}); let body = JSON.stringify({ user: user }) return this.http.post('link to your server', body, options) .map(res => res.json()) .map(res =>{ if(res.success){ //.... } }) }