How facebook-passport authentication using ionic2 and express app works?

So I am trying to add facebook authentication to my ionic2 app using express and passportjs. I almost got it working except the last part of redirecting the user back to ionic2 app after authorization. my both the apps are working on different ports; ionic2 running on http://localhost:8100 and express app for backend stuff running on http://localhost:8000 .

These are the steps I followed:

  1. Created app on developers.facebook.com and got the App ID and secret ID.

  2. Under Products>Facebook>settings, I have added callBack url as

  3. Then in my express app which is running on localhost:8000, I have added facebook authentication strategy as shown in https://github.com/jaredhanson/passport-facebook which is something like this:

      passport.use(new FacebookStrategy({
         clientID: FACEBOOK_APP_ID,
         clientSecret: FACEBOOK_APP_SECRET,
         callbackURL: "http://localhost:8000/auth/facebook/callback"
       },
       function(accessToken, refreshToken, profile, cb) {
          User.findOrCreate({ facebookId: profile.id }, function (err, user) {
             return cb(err, user);
          });
        }
     ));
    
      app.get('/auth/facebook',
          passport.authenticate('facebook'));
    
     app.get('/auth/facebook/callback',
         passport.authenticate('facebook', { failureRedirect: '/login' }),
         function(req, res) {
        // Successful authentication, redirect home.
         res.redirect('/');      //how to redirect back to ionic app instead of /
     });
    

so now whenever user clicks on facebook button on ionic2 app its going to facebook authentication page and once successfully authenticated it’s redirecting back to localhost:8000/auth/facebook/callback as expected but I want to redirect back to ionic app. how can I solve this problem? Need some guidance to solve this.

1 Like

Hey dasariyeshwant! I’m also trying to accomplish the same with Steam. If you’ve still have not solved this then I’ll let you know if i find something, otherwise i’d like some help on how you’ve accomplished this.

Same for me, I just started looking into it. I’m planning on using Facebook Native. Have you made anything work ?

Are you developing a website or a mobile app…?

I still didn’t get any solution yet. I am developing ionic mobile app.

For my part, I’m developing a mobile app

Hey guys, I wanted to share what I did, if this can help somebody.

First I use the Native Facebook login plugin where I am getting back some user infos and an access token. I send this to my server.

On the server side, I created my own strategy using the Custom Strategy plugin. To ensure a little bit of security, I use the access token to request the user ID from Facebook and compare it to the one I have in the request. If there is a match, I check if the user is already created using the Facebook ID. If this user doesn’t exist, I create it otherwise I return the user.

So far it seems to work ! If you have any advice on how to improve this solution, I would be more than happy to hear them :slight_smile:

var facebookLogin = new CustomStrategy(function(req, done) {

//Setting up the https request
var accessToken = req.body.accessToken;
var options = {
host : ‘graph.facebook.com’,
port : 443,
path : ‘/me?fields=id&access_token=’ + accessToken,
method : ‘GET’
}

//Getting the user ID from the token
var getReq = https.request(options, function(res) {
    console.log("\nstatus code: ", res.statusCode);
    res.on('data', function(data) {
        let parsed = JSON.parse(data);
        
        //If the return ID is the same as the one in the request body, login the user
        if(parsed.id == req.body.id){
          
          //Check if user exist
          User.findOne({
  	      facebookId: parseInt(req.body.id)
  	    }, function (err, user) {
  		    if(err)
  		    	return done(err);
  		    	
  			//If user don't exist, create the user
  			if(!user){
  				var user = new User({
  					facebookId: parseInt(req.body.id),
  					firstname: req.body.first_name,
  					lastname: req.body.last_name,
  					email: req.body.email,
  					role: "user"
  				});
  		
  				user.save(function(err, newUser){
  					console.log(newUser);
  					if(err){
  						return done(err);
  					}
  					
  					done(err, newUser);	
  				});
  			} else {
  				done(err, user);
  			}
  		}); 
        }
    });
});

//end the request
getReq.end();
getReq.on('error', function(err){
    console.log("Error: ", err);
}); 

});