CODEWITHSUNDEEP
google-app-enginefirebase
Vartan Israelyan
Vartan Israelyan

Reputation: 341

Change display name for firebase google auth provider

I am trying to display the name of my website on AuthO popups. No issues with Facebook, Twitter or GitHub auth. But Google's popup keep showing 'Sign in to continue to projectName.firebase.com' Instead of 'example.com'. I mean it shows firebase's default domain instead of custom one.

Image 1

Even if I change display name to some custom name in console.developers.google.com.

Image 2

Upvotes: 23

Views: 6907

Answers (3)

Alon Ben Yaakov
Alon Ben Yaakov

Reputation: 329

For me it was a bit confusing trying to collect the steps from multiple answers and responses, so I will sum up what worked for me fast & easy.

My Stack:

  • Cloudflare (DNS)
  • Site hosted externally, not on Firebase Hosting
  • firebase package v9.14.0

Continuing to the steps:

  1. Choose a domain to use for the Google popup, for the sake of the example I will simply use auth.example.com. This domain will be shown for the user as 'example.com` instead of the Firebase project default domain. Also, this domain job is to redirect the request to Firebase auth URL.

  2. Activate Firebase hosting (even if you are not using it for hosting your application)

  3. Add & verify domain in the Firebase Hosting:

    • In the Firebase hosting, press Add custom domain, and enter the domain you selected in step 1 (auth.example.com)

    • Don't tick the redirect option and click continue

    • Now you need to verify ownership of the new custom domain and update your records based on the ones Firebase is requesting. Also, if you are using Cloudflare, make sure to disable the proxy in this step and then click verify(may take a few minutes).

  4. Add your domain as one of the authorized redirect URIs.

    • Open in GCP the APIs & Services dashboard, link
    • In the left side menu click: Credentials -> choose your client from the list under OAuth 2.0 Client IDs
    • Under the Authorized redirect URIs section add your domain with the schema: https://auth.example.com/__/auth/handler and click save

  5. Add your domain to Firebase Authentication allowed domains.

    • Enter your firebase project console
    • Find and enter the Authentication section and click Settings
    • Click Authorized Domains and add your domain: auth.example.com

  6. Once the custom domain certification is approved on the Firebase Hosting page update the CNAME to point at your Firebase app domain like this: auth.example.com -> example1234.firebaseapp.com

  7. Update your code to support this new change. When setting up the firebaseApp, provide your new auth domain in the authDomain property like this:

  import { initializeApp } from "firebase/app";
  const firebaseApp = initializeApp({
    apiKey: "",
    authDomain: "auth.example.com",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId:"" ,
    measurementId:"" ,
    });

Upvotes: 7

J. Williams
J. Williams

Reputation: 734

In the newest version of Firebase user guide they explain how to fix this, by pointing authDomain initialization property to your domain, and making a few other preparations: https://firebase.google.com/docs/auth/web/google-signin#customizing-the-redirect-domain-for-google-sign-in

  1. Create a CNAME record for your custom domain that points to your project's subdomain on firebaseapp.com:
    auth.custom.domain.com CNAME my-app-12345.firebaseapp.com
  2. Add your custom domain to the list of authorized domains in the Firebase console: auth.custom.domain.com.
  3. In the Google developer console or OAuth setup page, whitelist the URL of the redirect page, which will be accessible on your custom domain: https://auth.custom.domain.com/__/auth/handler.
  4. When you initialize the JavaScript library, specify your custom domain with the authDomain field

Update: one important detail that's missing from the instructions is that the custom auth domain must be configured for Firebase Hosting (i.e. add it to the list of custom domains for Hosting on the Firebase Console). Otherwise you will get a certificate mismatch error as @AmritanshSinghal correctly points out.

Upvotes: 16

Tim Philip
Tim Philip

Reputation: 321

Ok, for those following these instructions and running into issues, I have two other pieces of advice.

  1. In the Google developer console or OAuth setup page, whitelist the URL of the redirect page, which will be accessible on your custom domain: https://auth.custom.domain.com/__/auth/handler.

This was really confusing to me. Here is where to do that.

Once you do all of this, you'll then get a CERT failure. Follow the instructions on this stackoverflow issue, wait a few hours, and everything will magically work!

Good luck!

Upvotes: 12

Related Questions