ExpressJS and Angular - 'leaving' the app to do server-side authentication

Question

My app runs on NodeJS, ExpressJS and AngularJS. I'm trying to do Facebook authentication using PassportJS. To avoid posting a bunch of unnecessary code, let's just say that the Passport code works as intended and logs into Facebook, grabs the token and receives a response.

In ExpressJS my routes are set up as follows:

app.get('/', routes.index);
app.get('/fbauth', passport.authenticate('facebook', { scope: 'email' }));
app.get('/fbauthed', passport.authenticate('facebook',{ failureRedirect: '/' }), routes.loggedin);
app.get('/logout', function(req, res) {
  req.logOut();
  res.redirect('/');
});

My server is set up at localhost:3000 .

Question

My issue is that Angular is not behaving with this at all. When I put a link on my page which goes to href="/fbauth" (this goes to localhost:3000/fbauth ) I see the address bar change to localhost:3000/fbauth for a split second, then my main localhost:3000 page reloads.

However, if I type localhost:3000/fbauth into the address bar, the authentication happens and I'm passed along to facebook -> localhost:3000/fbauthed .

I think this is happening because Angular routes are trying to 'take over' the URL in the <a> link, but I have no idea how to achieve it. I've tried configuring my Angular routes to:

when('/fbauth', {
        redirectTo: '/fbauth'
      }).

But this loads a blank screen. How can I make the two work together?

Answer 1

Adding target="_self" works in Angular 1.0.1:

Sign in with Facebook

This feature is documented ( http://docs.angularjs.org/guide/dev_guide.services .$location - search for '_self')

If you're curious, look at the angular source (line 5365 @ v1.0.1). The click hijacking only happens if !elm.attr('target') is true.