Facebook login failure using Angular, and Google Firebase - INVALID_IDP_RESPONSE: Error getting access token from facebook.com

I am developing a basic web app to measure some political popularity. To get correct polls, we gonna need to authenticate users with their social media accounts such as Facebook, Twitter, and Google accounts.

I have selected Angular as my front-end technology which sits on Google Firebase platform which come to following this instruction to make authentications.

For Firebase Facebook Login Auth Provider Service (auth.service.ts)

@Injectable({
   providedIn: 'root'
})

export class AuthService {

  constructor(
    public afAuth: AngularFireAuth, // Inject Firebase auth service
) { }

// Sign in with Facebook
FacebookAuth() {
   return this.AuthLogin(new auth.FacebookAuthProvider());
}  

// Auth logic to run auth providers
AuthLogin(provider) {
   return this.afAuth.auth.signInWithPopup(provider)
     .then((result) => {
         console.log('You have been successfully logged in!')
     }).catch((error) => {
        console.log(error)
    })
   }
}

for the singin component codes is as simple as following

import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";

@Component({
   selector: 'app-sign-in',
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.css']
})

export class SignInComponent implements OnInit {

   constructor(public authService: AuthService) { }
   ngOnInit() { }

}

HTML codes for singin components

<!-- Calling FacebookAuth Api from AuthService -->
<div class="formGroup">
   <button type="button" (click)="authService.FacebookAuth()">
      Log in with Facebook
   </button>
</div>

Here is the configuration on Facebook for developer.

• App ID, and App Secret are put in Firebase to make the connection between two.
• In facebook login > settings : client Oauth login, web OAuth login are on and and added these URLs for redirect (taken from Firebase facebook enabling login popup)
• settings > Basics > Site URL is: https://political-monitor.firebaseapp.com/

What am I missing to get ride of following error?

{
  "error": {
  "code": 400,
   "message": "INVALID_IDP_RESPONSE : Error getting access token from facebook.com, OAuth2 redirect uri is: https://political-monitor.firebaseapp.com/__/auth/handler, response: OAuth2TokenResponse{params: error=OAuthException&error_description=This%20IP%20can't%20make%20requests%20for%20that%20application., httpMetadata: HttpMetadata{status=400, cachePolicy=NO_CACHE, cacheDurationJava=null, cacheImmutable=false, staleWhileRevalidate=null, filename=null, lastModified=null, retryAfter=null, headers=HTTP/1.1 200 OK\r\n\r\n, contentSecurityPolicies=[], cookieList=[]}}",
  "errors": [
     {
       "message": "INVALID_IDP_RESPONSE : Error getting access token from facebook.com, OAuth2 redirect uri is: https://political-monitor.firebaseapp.com/__/auth/handler, response: OAuth2TokenResponse{params: error=OAuthException&error_description=This%20IP%20can't%20make%20requests%20for%20that%20application., httpMetadata: HttpMetadata{status=400, cachePolicy=NO_CACHE, cacheDurationJava=null, cacheImmutable=false, staleWhileRevalidate=null, filename=null, lastModified=null, retryAfter=null, headers=HTTP/1.1 200 OK\r\n\r\n, contentSecurityPolicies=[], cookieList=[]}}",
      "domain": "global",
      "reason": "invalid"
    }
  ]
 }

}

BTW app is working on Google login, you can see that redirect URL is https://political-monitor.firebaseapp.com/profile