Adding Facebook login to Angular2-Meteor app

I am attempting to add Facebook authentication into an Angular2-Meteor app that started off as the Socially app from the tutorial and is slowly being modified into something less generic. There doesn't seem to be much posted on this particular use case however.

Note: I've asked in the Meteor forums and Gitter without success already.

Here are the steps I've taken:

Added Service Configuration package using

meteor add service-configuration

Created a file at server/services.ts containing (with my actual keys):

ServiceConfiguration.configurations.upsert({
    "service": "facebook" 
}, {
    $set: {
        "settings": {
            "appId": “appid”,
            “secret": "secret",
            "loginStyle": "popup"
        }
    }
});

But on compile, I get an error saying

cannot find name 'ServiceConfiguration'

Which makes me think the package didn't install properly, but uninstalling/reinstalling it has not resolved the issue and it is showing in my .meteor directory.

Client side I'm calling this method with a click event on a button in a component that does have Meteor imported:

facebook() {
    Meteor.loginWithFacebook((err) => {
      if (err) {
        //Handle error
      } else {
        //Handle sign in (I reroute)
        this.router.navigate(['/home']);
      }
    })

Which throws the console error

meteor_1.Meteor.loginWithFacebook is not a function

But I suspect this is secondary to the fact that ServicesConfiguration isn't registering.

Git repo of the project is here: https://github.com/nanomoffet/ng2-starter with the referenced files being server/services.ts and client/app.ts

Solution

Currently it is not possible to use the ServiceConfiguration in TypeScript. What I did in my application was that I created a Javascript file in which I did make the ServiceConfiguration calls.

meteor add service-configuration

Create the file ./server/service-config.js

Meteor.startup(() => {
    ServiceConfiguration.configurations.remove({
        service: "facebook"
    });
    ServiceConfiguration.configurations.insert({
        service: "facebook",
        appId: '<APP_ID_YOU_GET_FROM FROM_FACEBOOK>',
        loginStyle: "popup",
        secret: '<SECRET_YOU_GET_FROM_FACEBOOK>'
    });
});

I only tested it with Google and works fine for me.