Facebook SDK FB.login() dialog box doesn't appear in Angular app

Question

UPDATE: Answer below.

Implementing Facebook social-auth login, I have the Facebook SDK loaded and have an Angular component that uses it. The code I have is below:

 ngOnInit() {
    console.log('calling FB.getloginStatus()');
    FB.getLoginStatus(s => this.statusFacebook(s));
  }

  statusFacebook(status) {
    console.log('got facebook status', status);
    if (status.status === 'connected' && status.authResponse && status.authResponse.userId) {
      console.log('facebook is logged in.');
      this.login(status.authResponse.userID, status.authResponse.accessToken);
    }
    else {
      console.log('facebook is not logged in');
      FB.login(r => this.fbLogin(r));
    }
  }

  fbLogin(response) {
    console.log('fbLogin called', response);
  }

What I get is that FB.getLoginStatus call works as advertised and the method statusFacebook gets called once the SDK checks in with the mother ship.

The callback tests whether FaceBook is logged in or not and if it is not (the else block) it calls FB.login. The dialog box that allows the user to log in never appears.

If I move the FB.login call to the ngOnInit method the dialog box does appear. (It complains if the user is already logged in but it seems to function).

So my question is why cannot the callback function invoke the login dialog box even though the ngOnInit method can?

Answer 1

OK the answer is this: modern browsers implement popup blockers. In order to avoid being blocked the popup has to be invoked immediately after some kind of UI event such as a mouse click.

A SO posting on this is here.

The offered solution is one that I don't really like, which is to call FB.getLoginStatus before my component gets invoked. That way the method doesn't do an AJAX call. Instead it just responds out of local state and therefore the browser pop-up blocker sees that the FB.login dialog box is the result of user input that invoked my component in the first place.

The reason I don't like this answer is that I am checking Facebook status even though the user has no intention of authenticating with Facebook. Other than requiring the user click something to cause FB.login to be called I can't think of anything else. Suggestions welcome.