Angularx Social Facebook Login Popup Dialog is block in FB mobile browser

Question

The problem is, FB login dialog is blocked in FB mobile browser. The scenario is whenever I click the link of the app in the facebook mobile app it redirects me to the FB mobile browser and opens the login page of the page.

Then I try to click the FB login button, the FB login dialog is blocked and returns to the login page.

However when I try to open the link in other browsers (Chrome, Firefox, Edge) in mobile and desktop, the FB dialog is shown and there is no problem.

I try to debug the console of the FB mobile browser using chrome remote devices, however no errors are shown.

Below is the code of FB login and this function is called on button click (since I have read a lot of solutions that the FB login cannot be called on asynchronous such on onSuccess of AJAX) it must be called based on user interaction which in my case is the button click

signInWithFB() {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID).then(res => {
       this._fbData = {
            firstname: res.firstName,
            lastname: res.lastName,
            email: res.email,
            fb_id: res.id,
            username: res.firstName + Math.floor(Math.random() * 9999999),
            type: 'fb'
        }
    })
}

Please let me know if I miss something or what. And I'm not using firebase login, I'm using npm and the library right now in GitHub is currently dead and no replies in the issues opened.