Deploy to heroku without redirecting to localhost with passport callback

Question

I've deployed an app to Heroku, however once you click 'log in with facebook', you are redirected to http://localhost:3000/#=. I've tried the following (the first is where it is at the moment):

  passport.use(new FacebookStrategy({
    clientID: FACEBOOK_APP_ID,
    clientSecret: FACEBOOK_APP_SECRET,
    callbackURL: "http://localhost:3000/auth/facebook/callback"
  },

  function(accessToken, refreshToken, profile, done) {
    process.nextTick(function () {
      return done(null, profile);
    });
  }
));

but when I deploy using:

passport.use(new FacebookStrategy({
    clientID: FACEBOOK_APP_ID,
    clientSecret: FACEBOOK_APP_SECRET,
    callbackURL: "/auth/facebook/callback"
  },

or

passport.use(new FacebookStrategy({
    clientID: FACEBOOK_APP_ID,
    clientSecret: FACEBOOK_APP_SECRET,
    callbackURL: "https://fivemincatchup.herokuapp.com/auth/facebook/callback"
  },

it directs to facebook with the following error:

Given URL is not permitted by the Application configuration: One or more of the given URLs is not permitted 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.

Am I missing something really obvious?!

Answer 1

Did you add the callback URL to the app's settings? You have to add the site URL as that in the facebook developer app settings for it to allow facebook to make callbacks to any particular website.

Should be under either basic settings on site URL or advanced settings on "Valid OAuth redirect URIs"

(see also here)