Javascript function not waiting for FB Api call to evaluate before returning

Question

Hi i'm implementing a FB login flow on my site with React. When the button is clicked it calls an external JS file that starts the login flow. My problem is I need to pass back true/false to see if they successfully logged in and then render a react component, but the JS function instantly returns undefined or false, not waiting for the FB Api call. The function looks like this

login: function(){
console.log('login');
FB.login(function(response){
  if(response.authResponse){
    return(externalScriptThatImIn.checkLoginStateStarter());
  }
},{scope:"public_profile,email"});
},

and then the function it calls returns another function which eventually goes to a return true or false based on if they got logged in, but even if I say return true; right in the FB.login call it doesn't wait for it to evaluate before returning and just returns undefined. Is there anyway to force it to wait?

http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call/14220323#14220323 — Teemu, Jun 27 '16 at 18:06

score 0 · Answer 1 · answered Jun 27 '16 at 18:02

You can pass a callback and return value using callback.

login: function(cb) {
    console.log('login');
    FB.login(function(response) {
      if (response.authResponse) {
        return cb(externalScriptThatImIn.checkLoginStateStarter());
      }
    }, {
      scope: "public_profile,email"
    });
  }

You can call it like

login(function(status){
    if (status){
       console.log('Logged in');
    }
});

Javascript function not waiting for FB Api call to evaluate before returning

1 Answers1