Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Meteor cordova ios facebook login

How to get facebook login working with Meteor and Cordova on iOS

Step 1: Make your local dev site internet accessible

Because there is an issue with OAuth2 login and localhost development, you currently have to deploy your meteor site to be able to test the Facebook login. A nice little workaround for this is to make the local instance of meteor accessible externally.

There is a great online guide for setting up port forwarding with your router and you can check your public external IP here.

For example, If you have an Apple router, simply open up Airport Utility on your Mac and click edit on your router, then go to the Network tab. Under Port Settings click the + icon and select Personal Web Sharing, setting all of the public and private ports to 3000. Make sure the private IP is set to your current computer IP.

The end result of this is that if you meteor locally, you'll be able to access it at http://localhost:3000 on your computer and http://externalIP:3000 from anywhere.

Step 2: Add packages and plugins

For the sake of this walk-through, I'm going to set up a project from scratch.

Create the project

meteor create facebook-login
cd facebook-login

Add the required packages

meteor add accounts-ui
meteor add mrt:accounts-facebook-cordova

Note: The accounts-facebook-cordova package is used instead of the accounts-facebook package.

Add the IOS platform

meteor add-platform ios

Add the facebook button. Open up the HTML file in your project and put {{> loginButtons}} in the hello template.

Add the cordova plugin. This one is crucial to get right as it makes the facebook login use the native app on your phone, instead of an in-app 'popup'. It is also important to install this directly from a tarball, and not from the cordova library as to avoid a problem in x-code which results in a 'FacebookSDK/FacebookSDK.h' file not found error.

meteor add cordova:com.phonegap.plugins.facebookconnect@https://github.com/Wizcorp/phonegap-facebook-plugin/tarball/0e61babb65bc1716b957b6294c7fdef3ce6ace79

Step 3: Configure facebook

Start up your meteor app locally by typing meteor from within the directory in terminal. You will get an error saying Meteor settings for accounts-facebook-cordova not configured correctly. which you can ignore for now.

Go to your external IP that you set up earlier in a desktop browser and if you've done it correctly you should see the same result as visiting http://localhost:3000. Click "Configure Facebook Login" and follow the instructions. The only differences are:

  • Set your Site URL to http://localhost:3000/ and your Mobile URL to http://externalIP:3000/.
  • Choose "Redirect based login at the bottom.
  • Make note of your APP ID, name and secret. You'll need them again in a minute.

Step 4: Configure your app

Stop the meteor instance that is running by pressing control + c in terminal.

2 files are required for configuration. Both need to be created in the root directory of your project.

mobile-config.js

This is the equivalent of the cordova config.xml file. Place in here the following:

App.configurePlugin('com.phonegap.plugins.facebookconnect', {
	APP_ID: 'YourFacebookAppId',
	APP_NAME: 'YourFacebookAppName'
});

settings.json

This file tells the facebook cordova plugin what settings to use and which permissions to ask for.

{
  "facebook": {
    "appId": "YourFacebookAppId",
    "secret": "YourFacebookAppSecret"
  },
  "public": {
    "facebook": {
      "permissions": [
        "public_profile", 
        "email", 
        "user_friends"
      ]
    }
  }
}

Note: I think that if you are creating a hybrid app that needs to work in the browser also, you have to request the permissions the normal way as well.

Step 5: Run it on your phone!

Plug in your phone to your computer and type the following.

meteor run ios-device --mobile-server http://externalIP:3000 --settings settings.json

This tells meteor to run the app on your ios-device using the external IP you provided (which is really just your local machine) and with the settings.json file we created earlier.

After it has opened in XCode, run the app on your phone by selecting it from the dropdown at the top and then clicking the play button. Note - you may have to click "Trust" on your phone the first time you run it.

You should now be able to login using Facebook using the native app!

@ashmore11

This comment has been minimized.

Copy link

commented Jun 25, 2015

Thanks so much for this! Saved my life : )

@jamielob

This comment has been minimized.

Copy link
Owner Author

commented Aug 3, 2015

Hey @ashmore11 - glad it helped!

@patrickleet

This comment has been minimized.

Copy link

commented Sep 18, 2015

Any idea how you configure facebook when you want to deploy the site? The sites domain name is not working for me. Wondering if it has something to do with being from meteor.local or something?

@jamielob

This comment has been minimized.

Copy link
Owner Author

commented Sep 20, 2015

@patrickleet Did you add your deployed URL to the facebook developer portal?

@bartonhammond

This comment has been minimized.

Copy link

commented Oct 21, 2015

In Step 3, you wrote

Set your Site URL to http://localhost:3000/ and your Mobile URL to http://externalIP:3000/

I didn't see any reference to Mobile URL.

@alekhurst

This comment has been minimized.

Copy link

commented Nov 3, 2015

hey @jamielob, thanks for this post. Looks like you used the log in buttons. Without the log in buttons I can't seem to get this working using the Wizcorp documentation, facebookConnectPlugin.login(), or by using Meteor.loginWithFacebook(). Do you know how I would do this?

@alekhurst

This comment has been minimized.

Copy link

commented Nov 3, 2015

whoops... that was my error. I'll leave it here for reference, but if you're not using {{> loginButtons}} you just log in the same way as usual with Meteor.loginWithFacebook().

@ashtynabell

This comment has been minimized.

Copy link

commented Nov 6, 2015

Really solid post, man. The best one out here BY FAR. However, I'm having the same issue as @bartonhammond: I'm not seeing where Mobile URL is referenced. I'm assuming "Configure Facebook Login" is inside of {{> loginButtons}}, but it's unclear in Step 3.

@jamielob, can you specify exactly where you configure Facebook on the client? All my configuration has been done on the FB Developer Portal and by files in my root directory (settings.json and mobile-config.js) or my server directory (social-config.js, which handles my 'service-configuration' package).

Not sure the configuration on the client is necessary, but just want to make sure I'm missing not missing something because I still can't get the native login/permissions from the Facebook iOS app to work properly. My login is still opening up Safari.

@hetdev

This comment has been minimized.

Copy link

commented Nov 25, 2015

Hi, if you have problems compiling your app, maybe it's for the phonegap-facebook-plugin version, you can try with this:
meteor add cordova:com.phonegap.plugins.facebookconnect@https://github.com/Wizcorp/phonegap-facebook-plugin/tarball/d8b0f6935a7c6e586188bf85f9da88a1c160790b
Thanks a lot @jamielob, this works pretty fine.

@shadowzick

This comment has been minimized.

Copy link

commented Mar 31, 2016

It always stops on 88% it says that it failed to fetch the cordova plugin. help!

@karldanninger

This comment has been minimized.

Copy link

commented May 19, 2016

hey @jamielob, nice article! This has gotten pretty old, any ideas if this implementation will still work with Meteor 1.3? Currently, it does not.

@erkkimon

This comment has been minimized.

Copy link

commented May 29, 2016

If someone manages to make Facebook login with Meteor 1.3 working, I'm more than interested in every single detail.

@lpender

This comment has been minimized.

Copy link

commented Jun 10, 2016

Just worked all day to make this: https://github.com/lpender/cordova-plugin-facebook-meteor

It's

  • Cordova 5.0+ compatible (so Meteor 1.3+ compatible)
  • Lets you use ENV variables instead of --variables cordova cli flag which isn't supported in Meteor (yet)

If someone can write an Accounts integration (or fork something like mrt:accounts-facebook-cordova or https://github.com/buildhybrid/accounts-facebook), we're in business.

@arthuryeti

This comment has been minimized.

Copy link

commented Jul 1, 2016

@lpender I'm in to contribute. Do you think that we can't use facebook without the native facebook login?

@NicholasEli

This comment has been minimized.

Copy link

commented Oct 26, 2016

Is this still a relevant guide? I have been trying to get Meteor iOS login for facebook to work since May(ish). I have semi popular stackoverflow post here http://stackoverflow.com/questions/39936777/meteor-1-3-accounts-facebook-login-for-ios-not-working. I would like to solve this because I know many others trying to get this to work.

@jamielob

This comment has been minimized.

Copy link
Owner Author

commented Dec 14, 2016

Hey everyone - I would think that by now some items have probably changed behind the scenes stopping this from working. Sorry I haven't been replying - I don't get notifications from Gists for some reason.

@jpmoyn

This comment has been minimized.

Copy link

commented Jan 23, 2017

Does anyone have an update on this? I'm not able to get facebook login working on mobile.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.