Meteor - Facebook authorization simply isn't working

Question

I'm running a meteor app from a server at http://example.com:3000 and trying to get it to authorize via Facebook using accounts-facebook.

My HTML looks like this:

<head>
  <title>appname</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  {{>loginButtons}}

  {{#if currentUser}}
    Logged in
  {{/if}}
</template>

I do have accounts-ui and accounts-facebook enabled. I went through the Facebook app registration process. Here are my basic settings:

Basic Settings

My advanced settings are default, and I have switched the "Do you want to make this app and all its live features available to the general public?" on in Status & Review.

When I actually try to log on using Facebook, the authorization window redirects to http://localhost:3000/_oauth/facebook?code=AQBaOoQ8XVQvzdqH8dyF03vVVP3daO9UO-tB0IZYCsYOYxL0LFWVrZUt2Rh34I2HI8Y5kofDP8sj46dn--N1pk6h0WOfoLAoaZxJzwSjocmBrRowjGv8JWcyN42msFuUdQAxQzbyrhnE2mQFUQISBOVzbnsR20ozS1pUmSdCb9BbmbidS8NvKvtEmSXm1lh9zPH7DYG4KfWQ2yIWSO8JMLEWa04TOP5rLDc75ak4WfXr1emb25T7981HUL8pCF_d_NgbFCNojoyY2yIB80e1nHxhovr-V3UWcCrNjH8aljTxy-qVGCmuLa4GravNIRfy9I8&state=eyJsb2dpblN0eWxlIjoicG9wdXAiLCJjcmVkZW50aWFsVG9rZW4iOiJlUkpSQjRja0FqVmJTWklCajhvQ01IdGlVdkktNnBXcF81d0RGR3Rod1lDIn0%3D#_=_, which isn't a valid address as the server is run and accessed remotely.

Additionally (and I suppose most problematically), the page doesn't acknowledge that any authorization has occurred, and acts like the login has failed (so I assume it has).

Can anyone tell me what I'm doing wrong? Thanks!

I'm pretty sure this has to do with the fact that facebook believes the app is hosted at localhost, but if I change the Valid OAuth redirect URIs to be example.com, the authorization still tries to go to the localhost address, but fails because that address isn't whitelisted. — River Tam, Jan 22 '15 at 02:01
Can you run console.log(process.env.ROOT_URL) somewhere in your server side code and see what your ROOT_URL is? — Will Parker, Jan 22 '15 at 10:32
@WillParker Thanks! Now I understand what the ROOT_URL does. I just had to change it to example.com — River Tam, Jan 23 '15 at 17:35

River Tam · Accepted Answer · 2016-07-01T03:20:17.980

To make Meteor try to redirect from the Facebook login to the correct landing page (hosted at example.com, not localhost), I needed to make Meteor acknowledge that it's being run on example.com, not localhost:3000. The way to do this was to set the environment variable ROOT_URL.

On bash:

export ROOT_URL=http://example.com:3000

If you're running the site on example.com on port 3000, be sure to put it in your .profile or equivalent to make the environment variable persist between sessions.

score 3 · Answer 2 · answered Nov 17 '15 at 19:49

3

Check the redirect URI on the "Advanced" tab.

It should be like this:http://localhost:3000/_oauth/facebook

NOT like this: http://localhost:3000/_oauth/facebook?close

answered Nov 17 '15 at 19:49

adamwong246

795
9
15

score 2 · Answer 3 · answered Jan 22 '15 at 03:50

2

Lets try this.

First go through

My apps > Test apps

example fB developers Now on the top-right there is a Green button create a test app

Green button facebook

Now some kind of modal appears, Test App Name and Test App Namespace, select whatever name you want

First

on Basic complete this 2 options

Now on App Domains select

localhost:3000

and on the site URL.

localhost:3000

and on advanced, on the Valid OAuth redirect URIs

http://localhost:3000/sessions/create

Second

on the /server/facebook-config.js for example, add this code.

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

And it should work

answered Jan 22 '15 at 03:50

Ethaan

11,291
5
35
45

When I try to add localhost:3000 to App Domains, it says Top-Level Domains aren't allowed. If I don't put the App Domain in (the site URL is localhost:3000), I get `Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.` when I try to log in. – River Tam Jan 22 '15 at 20:02
but you change the Secret and App id, from the `test app`? – Ethaan Jan 22 '15 at 20:03
Yes. I was able to change the App Domains to be `http://localhost:3000` instead of `localhost:3000`, but that didn't change anything either. – River Tam Jan 22 '15 at 20:17

score 1 · Answer 4 · answered Jun 09 '17 at 14:38

@RiverTam's answer did it for me! I have self-signed SSL cert on localhost with SSLProxy and I was under the wrong assumption that you could add custom routes to the callback URL, so I had to do several things:

1. In the meteor run command, export ROOT_URL first before meteor run

export ROOT_URL=https://localhost:3100; meteor --settings settings-development.json --port 3100

2. Add the callback url that FB wants, with localhost domain

Navigate to FB App in developer.facebook.com => Facebook Login => Settings => Client OAuth Settings and add URL like so:

3. Leave Domain empty

This is under FB App in developer.facebook.com => Settings => Advanced => Domain Manager

+999999 to River Tam for FireFly reference :P

Meteor - Facebook authorization simply isn't working

4 Answers4

1. In the meteor run command, export ROOT_URL first before meteor run

2. Add the callback url that FB wants, with localhost domain

3. Leave Domain empty

Linked