I have an angularjs and node,expressjs application. where when I am trying to implement the facebook login (passport). But the problem here is when I tried -
app.get('/auth/facebook',passport.authenticate('facebook'));
app.get('/auth/facebook/callback',passport.authenticate('facebook',
{
successRedirect: '/profile',
failureRedirect: '/'
}));
and the configuration is as follows -
passport.use(new FacebookStrategy({
clientID: 'xxxx',
clientSecret: 'xxxx',
callbackURL:'http://campustop.in/auth/facebook/callback'
},
function(accessToken,refreshToken,profile,done){
console.log(profile);
}
));
So, the problem here is that on my client side if I try -
<a href="/auth/facebook">Login with Facebook</a>
then the angularjs $routeProvider catches this route first and displays a blank layout since no template or controller is specified with this URL. so, this link never reaches the routes function in my express route configuration in server. But, when I open this url directly in the browser, it reaches the server but then It is not getting redirected to any page. It just stays there with the following response showing in the network tab -
Request URL:https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Fcampustop.in%2Fauth%2Ffacebook%2Fcallback&client_id=1440645942863962
Status Code:302 forced.302
and some response headers in the network tab. you can check them by going to http://campustop.in/auth/facebook
I solved this by adding target="_self" to the link tags like so.
<a href="/auth/google" target="_self">Sign in with Google</a>
When you do this the angular route provider ignores it and allows the request to hit your server instead.