CODEWITHSUNDEEP
javascriptangularjsnode.jsexpresspassport.js
JVG
JVG

Reputation: 21170

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

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?

Upvotes: 0

Views: 435

Answers (1)

Serhii Kozachenko
Serhii Kozachenko

Reputation: 1401

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.

Upvotes: 5

Related Questions