26

I'm building a simple web site where I'd like to let users log in using Facebook, and then show a page with customized items based on whether or not they're logged in. ie if not logged it, it shows some info, but if logged in, it shows other info based on their user information.

I'm using the passportjs Facebook module, Express, and Angular. I believe I have passport implemented correctly, but don't know 1) how I should be checking if a user is logged in, and 2) best practice for showing views based on the user state using Angular & Express. I've looked at an example here, but don't think this is what I should be doing using Angular (https://github.com/jaredhanson/passport-facebook)

Thanks!

laggingreflex
  • 32,948
  • 35
  • 141
  • 196
manihiki
  • 682
  • 2
  • 12
  • 22

2 Answers2

51

To complete the @wpalahnuk answer you have to create a service or factory to deal the authentication and an httpInterceptor to intercept the response send by the server for know if the user is log or not (checking the staus code 401).

For the Express part you have to use the awesome passport node module to deal the server side authentication.

You have all the details here : https://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs

This article is really great, Brad Green (Engineering Director at Google for AngularJS) adivse me this post.

Hope it Helps.

If you want to know more things about security in Angular you have just to ask and i'll we be really happy to help you.

Thomas Pons
  • 7,709
  • 3
  • 37
  • 55
  • @Thomas this looks exactly what I need but I'm not sure how it plays with the mean.io stack, Where is the interceptor supposed to live? Thanks!! – Trufa Nov 17 '14 at 11:36
  • The article is great, what will happen if someone just remove that piece of code with "resolve". I guess they'll still see the front broken look because the service call will fail. – windmaomao Mar 24 '15 at 22:07
  • 1
    the link is down. – Kugan Kumar Nov 05 '17 at 17:27
3

I don't use node.js and express, but rather securesocial for the play! framework, but I assume the process is similar.

You need to create a service that contacts the server for user login status and then store this variable. You can then inject this service into each controller that needs to be aware or alter your users login status.

This blog is where I got my implementation from: http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

Here's the service :

services.factory('UserService', [function() {
    var sdo = {
        isLogged: false,
        username: ''
    };
    return sdo;
}]);

Here's an example of logging in a user in a controller

var User = UserService
scope.login = function() {
    var config = { /* ... */ } // configuration object

    $http(config)
    .success(function(data, status, headers, config) {
        if (data.status) {
            // succefull login
            User.isLogged = true;
            User.username = data.username;
        }
        else {
            User.isLogged = false;
            User.username = '';
        }
    })
    .error(function(data, status, headers, config) {
        User.isLogged = false;
        User.username = '';
    });
}

I would really recommend you read the blog article as it covers this in more detail and there's a few other related articles

You can then use the User.isLogged variable to hide or display different elements as well as using it to determine which routes are available

wpalahnuk
  • 47
  • 2