Search code examples
facebookmeteorfacebook-loginmeteorite

Facebook authentication meteor


I'm experimenting with meteor and the sign in/up functionality.

I have these packages installed:

standard-app-packages
autopublish
insecure
accounts-password
accounts-facebook
bootstrap-3
accounts-ui-bootstrap-3
accounts-base

But when I run my app and try to configure the Facebook login nothing happens.

Here is my stack-trace:

Exception from Deps recompute function: TypeError: object is not a function
    at Object.Template._configureLoginServiceDialog.configurationSteps (http://localhost:3000/packages/accounts-ui-bootstrap-3.js?21b2fec0bad5c23734094f20fe2979c4b10cfde9:2021:59)
    at http://localhost:3000/packages/ui.js?9419ac08328918a04e7a49464a988d45f851e1b0:3031:25
    at _.extend.withValue (http://localhost:3000/packages/meteor.js?439f867e12888606900664d4463e1b3ee3644e44:790:17)
    at http://localhost:3000/packages/ui.js?9419ac08328918a04e7a49464a988d45f851e1b0:3028:33
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?8988006be5c29dbe17997e9691a21dce4e537665:170:18)
    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?8988006be5c29dbe17997e9691a21dce4e537665:107:25)
    at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?8988006be5c29dbe17997e9691a21dce4e537665:111:39)
    at http://localhost:3000/packages/accounts-ui-bootstrap-3.js?21b2fec0bad5c23734094f20fe2979c4b10cfde9:750:42
    at http://localhost:3000/packages/ui.js?9419ac08328918a04e7a49464a988d45f851e1b0:2482:21
    at _assign._compute (http://localhost:3000/packages/deps.js?4a82362ae66e863a1c1a8b0a5fec6f665e2038d1:228:38)

Here is a screenshot:

enter image description here

So when I press the Configure Facebook Login button nothing happens.


Solution

  • I'm not sure what's causing your issue but I can recommend a solution.

    add the package service-configuration

    Create a file on the server side called config.js or something similar and add:

    Meteor.startup(function () {    
      environment = process.env.NODE_ENV;
    
      try {
        if (environment == 'production') {
          ServiceConfiguration.configurations.remove({
            service: "facebook"
          });
          ServiceConfiguration.configurations.insert({
            "service" : "facebook",
            "appId" : "<APP_ID>",
            "secret" : "<APP_SECRET>"
          });
        }
      } catch(error) {
        console.log(error.message);
      }
    });
    

    The environment stuff is optional but can be useful as you'll likely need different app credentials for each host-server you login from.

    You can add any service to your application in the same way but be careful as some of them use different object keys.

    Twitter is {"service": "twitter", "consumerKey": "<KEY>", "secret": "<SECRET_KEY>"} Google is {"service" : "google", "clientId" : "<KEY>", "secret" : "<SECRET_KEY>"}

    I'll let you find out any others for yourself.

    More information about setting up service configuration can be found in the Meteor Docs