in ember, facebook onlogin method fires an undefined function error

Question

I'm an Ember newbie (using ember-cli) and started working on app where I have a facebook login that fires a login dialog that successfully logs me into facebook but in the console hits an "Uncaught ReferenceError: checkLoginState is not defined".

I am using an initializer for facebook sdk code: app/initializers/facebook-sdk.js

/* global FB */

export function initialize(application){
  application.deferReadiness();
};
export default {
  name: 'facebook-sdk',

  initialize: function(){
    var fbAsyncInit = function() {
      FB.init({
        appId: 'XXX',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true,
        version: 'v2.7'
    });
  };

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = fbAsyncInit;
}

and my login buttons: app/templates/components/login-form.hbs

<button {{action 'authenticateWithFacebook'}} class="btn btn-primary" data-auto-logout-link="true" style="cursor: pointer;" > Login</button>

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" data-auto-logout-link="true"> Connect with Facebook

all the action code inside my components folder: app/components/login-form.js

/* global FB */
import Ember from 'ember';
const{ inject: {service}, Component} = Ember;

export default Component.extend({
  session: service('session'),
  torii: service(),

  actions: {

    authenticateWithFacebook() {
      FB.login(function(response){
        console.log(response);
      });
    },

    checkLoginState() {
      FB.login(function(response){
        console.log(response);
      });
    },
    authenticates() {
      let { identification, password } =    this.getProperties('identification', 'password');
      return this.get('session').authenticate('authenticator:devise', identification, password).catch((reason) => {
      this.set('errorMessage', reason.error || reason);
      alert("Hey! I tried, but I don't know how to authenticate.");
      });
    }
  }
});

The first button that triggers the authenticateWithFacebook action works out fine(even showing its status response == connected and everything it contains such as accessToken, expiresIn.. etc in console). It's only when I click on the second button is when I get the error. So im assuming that the SDK needs to load first before the action is called. If thats the case, I'm not sure if I should separate the SDK code and FB login methods or put them all in the same folder.

Any help or clarification will be very much appreciated. Or let me know if I need to add more code to make this even more clearer. Thank you.