Login with Facebook, Twitter and Google in Meteor

appId, consumerKey and clientId are quite inconsistent and confusing for new programmers. I have tried to use appId in every service, but it worked just for Facebook. Twitter needs consumerKey and Google needs clientId.

Create your Facebook app, disable sandbox mode and set site url with login:

Create your Twitter app and follow this settings:

For authentication we need Read only access. The Callback URL must be the same as on image (http://127.0.0.1:3000/_oauth/twitter?close). Twitter doesn't support address http://localhost so it must be localhost's IP. Organization name and website can be empty.

Switch to tab "OAuth tool", so you can see consumer key and secret:

Twitter is done.

Create your Google project and register your app:

Choose "Web Application":

And setup Oauth:

Web origin: http://localhost:3000/
Redirect URI: http://localhost:3000/_oauth/google?close

So now you have:
Facebook: appId, secret
Twitter: consumerKey, secret
Google: clientId, secret

And we can put it into Meteor server (/server/accounts.js for example):

// first, remove configuration entry in case service is already configured
Accounts.loginServiceConfiguration.remove({
  service: "facebook"
});
Accounts.loginServiceConfiguration.insert({
  service: "facebook",
  appId: "yourAppId",
  secret: "yourSecret"
});

// first, remove configuration entry in case service is already configured
Accounts.loginServiceConfiguration.remove({
  service: "twitter"
});
Accounts.loginServiceConfiguration.insert({
  service: "twitter",
  consumerKey: "yourConsumerKey",
  secret: "yourSecret"
});

// first, remove configuration entry in case service is already configured
Accounts.loginServiceConfiguration.remove({
  service: "google"
});
Accounts.loginServiceConfiguration.insert({
  service: "google",
  clientId: "yourClientId",
  secret: "yourSecret"
});

And thats' it. I hope it's clearer than it was to me.

Now you can call Meteor.loginWithFacebook(), Meteor.loginWithTwitter() or Meteor.loginWithGoogle().

Or just use accounts-ui package. If you want to customize you Accounts UI look at http://blog.benmcmahen.com/post/41741539120/building-a-customized-accounts-ui-for-meteor