How to handle passport-facebook callback in angular client?

Question

I am developing a MEAN application. I use passport for authentication - local, facebook and google strategies.

I am using angularjs client. All routing is done by the client. I only use apis server data.

When using the passport-facebook strategy, I use the code below on the node server according to the passport documents.

app.get('/auth/facebook',passport.authenticate('facebook-auth', { scope : ['email'] })); app.get('/auth/facebook/callback',passport.authenticate('facebook-auth', { successRedirect : '/home', failureRedirect : '/login', scope:['email'] })); 

The problem I am facing is when the user clicks the "Sign in with Facebook" button

 <a href="/auth/facebook" class="btn"><i class="fa fa-facebook"></i> Sign in using Facebook</a> 

The client will have access to the "/ auth / facebook" route, which will ultimately redirect the user to the facebook page to verify the user's credentials.

After successful verification, the user will be redirected to the "/ home" route, as defined in the "successRedirect" value.

Now the thing is, I want to use a custom callback function instead of defining a redirect for success or failure. It will look like this:

 app.get('/auth/facebook/callback',passport.authenticate('facebook-auth', function(err,user,info){ if(err){ throw err; } else if(user === 'userexists'){ res.json({ 'state':false, 'message':'User with this e-mail already exists' }); } else{ req.logIn(user,function(loginErr){ if(loginErr){ throw loginErr; } res.json({ 'state':true, 'message':'You logged in successfully!' }); }); } })); 

The root problem that I encountered here, I cannot use above the usual callback, because the Client does not call the route "auth / facebook / callback", it is called on facebook. Thus, there is no success handler waiting to catch the client’s response back.

I want some way to get a response in json form on the client, to eliminate server-side redirection, as well as a way to pass the message and username to the client after successful authentication using facebook.

I'm going to drop my passport. Waiting for any possible solution before removing a lot of code!

thanks

Answer 1

This can be accomplished by redirecting to another endpoint inside the facebook callback handler. There is no need to do res.json() in a callback from facebook, as they only make a request for this to tell you if auth failed or failed. From your documents :

 // GET /auth/facebook/callback // Use passport.authenticate() as route middleware to authenticate the // request. If authentication fails, the user will be redirected back to the // login page. Otherwise, the primary route function function will be called, // which, in this example, will redirect the user to the home page. 

So facebook takes control of the request process back when they call /auth/fb/callback , but it is up to you what to do next. Since once the user is authenticated successfully, you will have req.user available throughout the session. At this point, you can redirect to something similar in the /account example and check if there is req.user with req.isAuthenticated() and terminate the stream you want.