We need to go to the Facebook Developers site (https://developers.facebook.com) to register the app. Go to My Apps | Settings | Basic, and get App ID and App Secret. We also need to the site URL to http://localhost:9000/.

In case you need to set up the callback URL you can use http://localhost:9000/auth/facebook/callback.

Once you have the ID and secret, go to local.env.js, and fill it out:

/* server/config/local.env.js */
module.exports = {
  DOMAIN: 'http://localhost:9000',
  SESSION_SECRET: "meanshop-secret",

  FACEBOOK_ID: '123…',
  FACEBOOK_SECRET: 'abc..',

  TWITTER_ID: 'app-id',
  TWITTER_SECRET: 'secret',

  GOOGLE_ID: 'app-id',
  GOOGLE_SECRET: 'secret',
};

Now, restart the server and try it out. It should work but the release 3.0.0-rc4 has a bug. Let's fix it by removing JSON.stringify in line 81:

/* server/auth/auth.service.js:81 *excerpt */
function setTokenCookie(req, res) {
  if (!req.user) {
    return res.status(404).send('Something went wrong, please try again.');
  }
  var token = signToken(req.user._id, req.user.role);
  res.cookie('token', token);
  res.redirect('/');
}

In the facebook/passport.js (passport.use), this time we look up the users by facebook.id instead of e-mail:

passport.use(new FacebookStrategy({
    clientID: config.facebook.clientID,
    clientSecret: config.facebook.clientSecret,
    callbackURL: config.facebook.callbackURL
  },
  function(accessToken, refreshToken, profile, done) {
    User.findOne({
      'facebook.id': profile.id
    },
    function(err, user) {
      if (err) {
        return done(err);
      }
      if (!user) {
        user = new User({
          name: profile.displayName,
          email: profile.emails[0].value,
          role: 'user',
          username: profile.username,
          provider: 'facebook',
          facebook: profile._json
        });
        user.save(function(err) {
          if (err) done(err);
          return done(err, user);
        });
      } else {
        return done(err, user);
      }
    })
  }
));

We get the Facebook data in the profile variable, and use it to populate all of the user's information.

Finally, we define the route using passport.authenticate('facebook', …). The scope and callback were not defined in the local strategy. The scope refers the pieces of Facebook data that we want to get from the users. The callback is the route that handles the data once the user is redirected from the Facebook login form.

Let's go to the Twitter Developers' site at https://apps.twitter.com, and get our app registered. This time, use the following callback URL: http://127.0.0.1:9000/auth/twitter/callback.

Furthermore, you need to go to the settings tab and enable Sign in with Twitter.

Then, fill out the App ID and secret in local.env.js. Take a look at twitter/passport.js and twitter/index.js. They are almost identical to the ones in Facebook. The main difference is that Twitter doesn't have scopes.

Create our app at https://console.developers.google.com/project. Use the URL and callback using 127.0.0.1 or localhost as shown in the following image:

Again, fill out the local.env.js with it, and take a look at the google/passport.js and google/index.js.

That's it! We just learnt how to set up the app with several social network providers.