Pushing user data from Nodejs server to Angular after successful login

Question

I am trying to connect to my user via Facebook using PassportJS and transfer the user data to Angular. On the server side, everything looks fine with the following code for Facebook callback in user controller:

exports.facebookCallback = function() { return function(req, res, next) { passport.authenticate('facebook', function(err, user, email) { if (err || !user) { return res.redirect('/auth'); } req.login(user, function(err) { if (err) { return res.redirect('/auth'); } return res.redirect('/'); }); })(req, res, next); }; }; 

From what I understand from PassportJS docs, calling req.login should put the user data in the session.

My server side routes look like this:

 app.get('/auth', usersCtrl.auth); app.get('/auth/signout', usersCtrl.logout); app.get('/auth/facebook', passport.authenticate('facebook', { scope: ['email', 'user_hometown'] })); app.get('/auth/facebook/callback', usersCtrl.facebookCallback()); 

Express and passport configuration includes:

 app.use(express.cookieParser()); app.use(express.session({secret: '1234567890QWERTY'})); app.use(express.bodyParser()); app.use(passport.initialize()); app.use(passport.session()); 

Now on the angular side, I am trying to get user data from a session in a service defined as follows:

 module.exports = require('angular') .module('HomeModule', []) .controller('HomeCtrl', function ($scope) { //home controller code ors here }).controller('NavbarCtrl', ['$scope', 'Authentication', function ($scope, Authentication) { $scope.authentication = Authentication; //rest of the navbar controller goes here }]).factory('Authentication', [ function() { var _this = this; _this._data = { user: window.user }; return _this._data; } ]); 

At ease, user data is not available in the window.user window on the angular side. Any ideas what I'm doing wrong here?

Answer 1

As Girish said, the object of the passport session will not be available on the client side. As you seem to be using express , an easy way to do this is to use express-expose .

If you want user data to be accessible on all pages during user authentication, you can add something like this before declaring routes

 app.use(function (req, res, next) { if (req.isAuthenticated()) res.expose(req.user, 'user'); next (); }); 

User data will be available on the client side as window.user .

Answer 2

The passport session object will not be accessible on the window object; instead, you need to get it from the server using some service or redirect URL.

After successful authentication, the main route function will be called, which in this case will redirect the user to the home page.

  app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/login' }), function(req, res) { res.redirect('/'); }); app.get('/', function(req, res){ res.render('index', { user: req.user }); }); 

or you can create a route to get registered user data

  app.get('/account', function(req, res){ if (req.isAuthenticated()) { res.send({user : req.user}); }else{ res.redirect('/login'); } }); 

On the Angular side, you can set user data to the root directory from the $ http response,

 $rootScope.session = {} $rootScope.session.user = res.user;