Angularfire: Firebase oAuth missing Authorized domain error message, through domain is added configured

[isawk]

Version info

Angular:
^5.1.0
Firebase:
^4.9.0
AngularFire:
^5.0.0-rc.4
Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem
Use Firebase Authorization angular api to do a federated authentication with Facebook, screen pops up and immediately closes with complains about missing configurations

Steps to set up and reproduce

1. Copy Firebase app configurations from Project Settings > "Add Firebase to your web app"
2. Ensure localhost is added to Firebase -> Authentication -> Sign-in Method -> Authorized domains

Sample data and security rules

<-- include/attach/link to some json sample data (or provide credentials to a sanitized, test Firebase project) -->

Debug output

* Errors in the JavaScript console *
Info: The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (localhost) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

* Output from firebase.database().enableLogging(true); *

* Screenshots *

Expected behavior

Login with Facebook to work as expected

Actual behavior

Throws error code auth/popup-closed-by-user, with message about domain not added to OAuth redirect domains list.

[isawk]

Fixed issue with solutions found here
and here

• Added referrer (firebase authDomain and localhost) to API keys Browser key (auto created by Google Service) in Google Cloud Console > APIs and Services
• Added referrer (firebase authDomain and localhost) to OAuth 2.0 client IDs Web client (auto created by Google Service) in Google Cloud Console > APIs and Services

[Terkwood]

Thanks @isawk - this really helped me out!

[sisimogangg]

Adding support email to the OAuth consent screen worked for me.