How to use passport js with client side templating?

Question

I am using passport js to handle some authentication. However, I am also using angular $route service to handle my templating on the client side. Because of this, I am unsure how to proceed in using passport, as the examples on the doc page assume server side templating. For example,

app.post('/login',
    passport.authenticate('local', { 
        successRedirect: '/',
        failureRedirect: '/login',
        failureFlash: true
    })
);

So based on this, it seems like "/" and "/login" are meant to serve templates, not just the response to a RESTful query or something. The way I am doing things, my templating happens client side. In my angular file that sets everything up

$routeProvider
    .when('/', {
        templateUrl: 'templates/login.html',
        controller: 'MainCtrl'
    })
    .when('/home', {
        templateUrl: 'templates/home.html',
        controller: 'MainCtrl'
    });

It seems like I am trying to mix and match, and not really understanding either method of doing things.

So I know I have probably worded this horrendously thus far, but what I want to do is something like this

html (login.html)

<h3> Login </h3>
<form action= "login" method="post">
    Username:<br>
    <input type="text" name="username" value="">
    <br>
    Password:<br>
    <input type="password" name="password" value="">
    <br><br>
    <input type="submit" value="Submit">
</form>

node backend

i realize I am not authenticating anything, but this much is not yet working for me

passport.use(new LocalStrategy(
    function (username, password, done) {
        console.log(username);      // this does not fire
        return done(null, null);
    }
));

app.post('/login',
    passport.authenticate('local', { 
        successRedirect: '/home',
        failureRedirect: '/',
        failureFlash: true
    })
);

So I want to authenticate using passport, but use the client side templating/routing to keep the single page application feel.

Can someone please point me in the right direction? Or tell me if what I am doing is completely misguided?

edit : the error I AM getting with my code is

TypeError: undefined is not a function

this is probably not enough to be useful to any of you, but I can go more in depth if needed. The specific error message isn't so much the spirit of what I was trying to ask though.

browser gives you that error or it happens servers-side? that error may occurs due to missing parameters, you should look at the stack trace and pin point exactly where it happens — tu4n, Oct 07 '16 at 09:56

tu4n · Answer 1 · 2017-01-12T02:57:21.417

You can use what Passport call custom callback

app.get('/login', function(req, res, next) {
  passport.authenticate('local', function(err, user, info) {
    if (err) { return next(err); }
    if (!user) { return res.status(401).end('wrong credentials'); }

    //If you use session, skip if you dont
    req.logIn(user, function(err) {
      if (err) { return next(err); }
      return res.status(200).end('user authenticated' + user.username); //That, or hand them a session id or a JWT Token
    });

    // If you don't use session just response directly to client
    res.status(200).end(jwt.createToken(user));
  })(req, res, next);
});

http://passportjs.org/docs/authenticate#custom-callback
So, no server side-redirecting here, all routing logic can be done front-end

score -2 · Answer 2 · answered Dec 06 '15 at 07:32

For using passport js you need to include this piece of code in app.js

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

Your code

passport.use(new LocalStrategy(
    function (username, password, done) {
        console.log(username);      // this does not fire
        return done(null, null);
    }
));

does not have a name local you call in passport.authenticate

Use

passport.use('login', new LocalStrategy(
    function (username, password, done) {
        console.log(username);      // this does not fire
        return done(null, null);
    }
));

Even for serialization and deserialization you should implement passport's serialize and deserialize methods

passport.serializeUser(function (user, done) {
    done(null, user);
});
passport.deserializeUser(function (id, done) {
    done(null, id);
});

`

In LocalStrategy return

if (valid) {
    return done(null, username);
} else {
    return done(null, false, {"message": "User not found."});
}

How to use passport js with client side templating?

2 Answers2