How to implement Facebook native login with Meteor?

Login seamlessly with Facebook in Meteor App

3 min readAug 13, 2017

About Meteor & Facebook Login

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor provides in build methods for logging in to various services like Facebook, Google, GitHub, etc. However, these methods are not configured to login with these services natively i.e. using credentials from the Facebook app installed on your device. In this article, I am going to explain how you can implement native Facebook login for your Meteor App.

Prerequisites

Prerequisites for android development in meteor.
Facebook App in Facebook Developer Console.
Meteor app with default Facebook login i.e. Meteor.loginWithFacebook() along with ServiceConfiguration.configurations, more details about the same over here.

Procedure

Configure Facebook App

Open https://developers.facebook.com
Select your Facebook App.
Go to Settings (Basic).
Click Add Platform.
Select Android.

Provide Google Play Package Name as com.example.app, replace it with your app name.
Provide Class Name as com.facebook.LoginActivity.
Generate Key Hashes using

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Click Save Changes.

Configure Android Platform

Run meteor add android-platform in your Meteor project.
Add mobile-config.js at the root of your Meteor project.

Configure Cordova Plugin

Run meteor add cordova:cordova-plugin-facebook4@1.9.1 in your Meteor project.
Add following configuration in your mobile-config.js

App.configurePlugin('cordova-plugin-facebook4', {
    APP_ID: '[app_id]',
    APP_NAME: 'NativeFacebook'
});

Override Meteor Login Methods

Run meteor remove accounts-facebook in your Meteor project.
Run meteor add btafel:accounts-facebook-cordova in your Meteor project.
Add settings.json to your Meteor project.

Run Meteor Project

Since Meteor’s OAuth2 login doesn’t work with mobile apps in local development mode. This limitation is because you need a public Internet address to register as an authorized redirect URL with the login provider. As a workaround, you can deploy your app and modify your app’s configuration to test OAuth login on a mobile app when developing locally.
Run meteor run android-device --mobile-server http://deployed-server-url.com --settings settings.json --verbose to run your Meteor project.

You can follow these steps to integrate Facebook native login to your Meteor Android App. Also, you can generalize certain steps and extend it to iOS also. I hope you will find this procedure helpful.

If you liked this article, be sure to recommend it and help spread good ideas as far and wide as possible just like the broadness of Technology. Please also leave your responses below :-)

Aman Gupta is Co-founder & CEO of YourMarch. He is working with his team on this disruptive platform to bring governance and technology on the same plate. He is very passionate about the way technology can be used to disrupt old models of democracy where the contribution of citizens was limited.

In his free time, you can find him playing games, lots of games :-). You can follow him on Twitter, Facebook or connect with him on LinkedIn.