Authenticating With Facebook using Passport Not Working

Question

I'm trying to do Facebook authentication with my application. But so far, my attempts are unsuccessful. I'm completely new to Node.

When a user clicks that fb login button, the request need to be taken to /auth/facebook route where they will be passed to the Passport Strategy. There they will be sent to Facebook for authentication. But it never happens. The Facebook authentication windows never get showed. It seems like redirection not working. I did a few hours of searching but didn't get a solution.

Following is the parts of the code which I think important to this context

I had put my App ID and App Secret in config/auth.js

module.exports = {

    'facebookAuth' : {
        'clientID'      : 'my-AppID-here', 
        'clientSecret'  : 'my-App-secret-here', 
        'callbackURL'   : 'http://localhost:8080/auth/facebook/callback'
    }
};

The strategy to authenticate with Facebook and handle the callback goes in config/passport.js

    var LocalStrategy    = require('passport-local').Strategy;
    var FacebookStrategy = require('passport-facebook').Strategy;

    // load up the user model and auth variables
    var User       = require('../app/models/user');
    var configAuth = require('./auth');

    module.exports = function(passport) {

        passport.serializeUser(function(user, done) {
            done(null, user.id);
        });

        passport.deserializeUser(function(id, done) {
            User.findById(id, function(err, user) {
                done(err, user);
            });
        });    

        // Facebook Strategy
        passport.use(new FacebookStrategy({

            // pull app id and secret from our auth.js file
            clientID        : configAuth.facebookAuth.clientID,
            clientSecret    : configAuth.facebookAuth.clientSecret,
            callbackURL     : configAuth.facebookAuth.callbackURL

        },

        // facebook will send back the token and profile
        function(token, refreshToken, profile, done) {

            process.nextTick(function() {

                // find the user in the database based on their facebook id
                User.findOne({ 'facebook.id' : profile.id }, function(err, user) {

                    if (err)
                        return done(err);

                    // if the user is found, then log them in
                    if (user) {
                        return done(null, user); 
                    } else {
                        // if there is no user found with that facebook id, create them
                        var newUser            = new User();

                        // set all of the facebook information in our user model
                        newUser.facebook.id    = profile.id; // set the users facebook id                   
                        newUser.facebook.token = token; // we will save the token that facebook provides to the user                    
                        newUser.facebook.name  = profile.name.givenName + ' ' + profile.name.familyName; // look at the passport user profile to see how names are returned
                        newUser.facebook.email = profile.emails[0].value; // facebook can return multiple emails so we'll take the first

                        // save our user to the database
                        newUser.save(function(err) {
                            if (err)
                                throw err;

                            // if successful, return the new user
                            return done(null, newUser);
                        });
                    }

                });
            });

        }));

    };

The relevant routes from app/routes.js

    module.exports = function(app, passport) {

        // route for facebook authentication and login
        app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));

        // handle the callback after facebook has authenticated the user
        app.get('/auth/facebook/callback',
            passport.authenticate('facebook', {
                successRedirect : '/profile',
                failureRedirect : '/'
            }));

        // route for logging out
        app.get('/logout', function(req, res) {
            req.logout();
            res.redirect('/');
        });

    };

The the Login Button code in view

<a href="/auth/facebook" class="btn btn-primary"><span class="fa fa-facebook"></span> Facebook</a>

Answer 1

The problem was I didn't attach the domain name (in my case it is http://localhost:8080) in Facebook app settings.

Go to the Settings page under the Basic tab

1. Click "+ Add Platform" and choose "Website"
2. In the box that comes up for the website you just added: Site URL: http://localhost:8080/
3. In the box above that (Settings => Basic): App Domain: localhost
4. At the bottom right - click "Save Changes"

Once I done that my problem get solved.