How to change the app name for firebase authentica

Question

Thanks to firebase v 3.9.0, my social OAuth is working great in my ionic app. I have one little change I'd like to make. When prompted to login, it says "Sign in to continue to my-real-appname-12345f.firebaseapp.com."

How to I change that to something more user-friendly like, you know, the app's actually name.

To clarify, I am using firebase to handle authentication for both Google and Facebook. The message is the same for both.

Thanks! Wayne

Answer 1

This is what worked for me:

1. Change the Firebase configuration you set in your code to have authDomain: "insertyourdomainnamehere.com"
2. Press on the "Sign In With Google" on your app and see the error you get due to this change. Follow directions of the error.

The error lead me to https://console.cloud.google.com/apis/credentials (Google Cloud Platform > APIs & Services > Credentials).

1. On that page, look at "OAuth 2.0 Client IDs" section.
2. For me, there is only one record "Web client (auto created by Google Service)." Click the edit button on it.
3. Look for "Authorized redirect URIs" section. In that section, add: https://insertyourdomainnamehere.com/__/auth/handler.

Then it should work! It should now say "Sign in to continue to yourdomain.com."

Answer 2

I think I may have found why some people are able to change the display name and others are not. Check your Hosting tab. If you have something deployed, it is likely deployed to the same url that is listed on your sign-in page. Try adding your domain name on that page and see if that works.

Answer 3

I asked firebase support and got the following reply. Items in italics are my additions.

--

Hi Jayen,

Thank you for reaching out. I'll be happy to assist you.

In order to update firebase-project-id.firebaseapp.com in the OAuth consent screen, you need a custom domain with Firebase Hosting (Firebase Console > Hosting > Connect Domain). This is because https://firebase-project-id.firebaseapp.com/__/auth/handler is hosted by Firebase Hosting. You need to point your custom domain to firebase-project-id.firebaseapp.com.

When connecting the custom domain, if you are not hosting your app on firebase, use a new subdomain (e.g. app.yourdomain.com) and do not redirect it. Firebase will prompt you to add a DNS entry and take of the SSL certificate automatically.

After connecting your custom domain to your Firebase project, you should also follow the steps below:

1. Go to the Firebase Console > Select Project > Authentication > Sign-in method > Facebook > Copy the URL under 'To complete setup, add this OAuth redirect URI to your Facebook app configuration.'

   • It will look something like https://firebase-project-id.firebaseapp.com/__/auth/handler

2. Replace the project ID with your custom domain. It will look something like: https://yourdomain.com/__/auth/handler

3. Go to the GCP Console > Select project > API Manager > Credentials > Add the link in #2 to the 'Authorized redirect URIs'

4. Then ensure to use yourdomain.com as the authDomain in your app's configuration instead of firebase-project-id.firebaseapp.com

   firebase.initializeApp({
       apiKey: ....,
       authDomain: 'yourdomain.com',
        ...
   });
   

Let me know if you have any other questions regarding this.

Regards,

Aye

--

In my case, yourdomain.com is where I host my site, so I used app.yourdomain.com where I needed it.

• Firebase Hosting URL
• handler url: https://app.yourdomain.com/__/auth/handler
• GCP Credentials
  • Choose the right one under OAuth 2.0 client IDs . The client ID will match the one you have configured Firebase with in your code.
• authDomain: "app.yourdomain.com"

Answer 4

You should make these modifications in the Google API Console (https://console.cloud.google.com). Go there, find your project's credentials, click "OAuth consent screen" and then there is a textbox that says "Product name shown to users", change the current name to your app's name and click "Save".