Search code examples
web-applicationsfirebase-authenticationangularfire2google-oauth

Changing the domain shown by Google Account Chooser


In a web app we are using Firebase Auth to manage logins and (basic) account creation. When using the Google Login option with the user active with more than one Google account, the user is shown the Google Account Chooser to choose which of the accounts to use on our site. Its heading looks something like this:

Choose an account
to continue to mydomain.com

In my web app's case, instead of showing mydomain.com, it is showing <firebase-project-id>.firebaseapp.com.

What do I have to do to change is so that the account chooser popup shows mydomain.com?


Solution

  • If you want to customize that to: Choose an account to continue to: https://auth.example.com You would need to follow the following instructions:

    • You would need to have your custom domain auth.example.com point to example.firebaseapp.com which is hosted by Firebase Hosting.
    • You would then make sure you whitelist the following URL in the Firebase Console as an authorized domain (Authentication -> SIGN-IN METHOD->Authorized domains): auth.example.com
    • You need to whitelist this page as the OAuth redirect URL for all your supported providers (Google, Facebook, Twitter, LinkedIn): https://auth.example.com/__/auth/handler
    • Finally, you need to substitute that domain as your authDomain in the JS client call:

      var config = { apiKey: "...", authDomain: "auth.example.com", ... };