Login with Facebook using Meteor JS

Meteor JS makes it very easy to authenticate users with Facebook. The social authentication support comes built-in with use of a couple of packages in your application. I’ll demonstrate how easy it is by creating a website that lets users login with Facebook and shows their name and gender after logging in (if you’d like to show/use more user details they are available, but for simplicity we’ll just show these two). So let’s jump right into it:

Facebook allows developers to create test apps to validate the functionality from the localhost domain, so we’ll create a test app for our demo. Here’s how we create a test app:

Go to Facebook developers page and from the Apps tab select your app.

Then from the left menu hit Test Apps and on that page hit the Create a Test App button.

On the create a test app form enter a name for your app (I used “sample app – test1″). It will ask you to pass a captcha test and once you pass that your test app should be ready to use.

On the Basic settings, hit “+ Add Platform” to add a Website platform to our app.

Add “localhost” to the App Domains and “http://localhost:3000″ to the Site URL, then hit Save Changes.

On the Advanced settings, scroll down and add “http://localhost:3000/_oauth/facebook?close” to the Valid OAuth redirect URIs and save your change.

Go to the app’s Dashboard and copy your App ID and App Secret. We’re going to use these ids later for app configurations.

That was all we needed to do to set up our app configurations from the Facebook developers site. Now we can start writing our code to wire up things together.

I’m skipping the creation of a basic meteor app, but if you need help on that part you can follow the meteor’s official tutorial to learn more about creating a meteor site and read this  article tostructure your app.  I assume you have a “client” and “server” folders and a basic project that is up and running.

We need to add 2 packages to get the Facebook login functionality working. Let’s add these packages:

1 2	meteor add accounts-facebook meteor add service-configuration

The accounts-facebook plugin enables facebook login and service-configuration allows to store the setup for our Facebook app’s ids.

We’ll create a file “social-config.js” under the server folder to hold our Facebook configurations and add the following lines to the file (don’t forget to change the appId and secret with your app’s ids):

1 2 3 4 5 6 7 8 9

ServiceConfiguration.configurations.remove({     service: 'facebook' }); ServiceConfiguration.configurations.insert({     service: 'facebook',     appId: '12345678901234567890',     secret: 'secret12345678901234567890' });

In order to show a page with the login button we’ll create a basic login template:

1 2 3 4 5 6 7 8 9

<template name="login">     {{#if currentUser}}         {{currentUser.services.facebook.name}} -         {{currentUser.services.facebook.gender}}         <button id="logout">Logout</button>     {{else}}         <button id="facebook-login" class="btn btn-default"> Login with Facebook</button>     {{/if}} </template>

In the login template we check if the user is logged in. If the user is logged in we display the user’s name and gender, and we add a logout button. If the user is not logged in, we show the famous login with Facebook button. You can use other ways to display the login page or even use the “accounts-ui” package, but for the sake of simplicity we’ll stick to this template.

Then we’ll tie the click events to define the login and logout actions and we’ll use meteor’s loginWithFacebook and logout methods:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Template.login.events({     'click #facebook-login': function(event) {         Meteor.loginWithFacebook({}, function(err){             if (err) {                 throw new Meteor.Error("Facebook login failed");             }         });     },     'click #logout': function(event) {         Meteor.logout(function(err){             if (err) {                 throw new Meteor.Error("Logout failed");             }         })     } });

Now the app is ready to accept Facebook logins.

Go to your app’s page and try logging in with your Facebook account and you should see your name and gender displayed on the page. It’s that easy.

Credit to : http://bulenttastan.net/login-with-facebook-using-meteor-js/