How to change the name of a firebase authentication application (what the user sees)

Question

Thanks to firebase v 3.9.0, my social OAuth works fine in my ionic application. I have one small change that I would like to make. When prompted to log in, it says: "Log in to continue my-real-appname-12345f.firebaseapp.com."

How can I change this to something more user-friendly, as you know, the application is actually called.

To clarify, I use firebase for authentication for both Google and Facebook. The message is the same for both.

Thanks! Wayne

Answer 1

I asked for firebase support and got the following response. The items in italics are my additions.

-

Hi Jayen

Thank you for contacting us. I will be happy to help you.

To update firebase-project-id.firebaseapp.com on 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 on Firebase Hosting. You must specify your own domain at firebase-project-id.firebaseapp.com.

When connecting a custom domain, if you do not host your application on firebase, use a new subdomain (for example, app.yourdomain.com) and do not redirect it. Firebase will prompt you to add a DNS record and obtain an SSL certificate automatically.

After connecting your user domain to the Firebase project, you must also follow these steps:

• Go to the Firebase console> Select a project> Authentication> Login method> Facebook> Copy the URL under "To complete the setup, add this OAuth redirect ORI to the configuration of your Facebook application."

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

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

• Go to the GCP console> Choose a project> API Manager> Credentials> Add the link in # 2 to the "Authorized Redirect URIs"

• Then make sure yourdomain.com is used as authDomain in your application 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.

Hello,

Yes

-

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

• Firebase Host URL
• Handler URL: https://app.yourdomain.com/__/auth/handler
• Gcp credentials
  • Choose the correct option under OAuth 2.0 client identifiers . The client ID will match the one you configured Firebase in the code.
• authDomain: "app.yourdomain.com"

Answer 2

I think I may have found why some people can change the display name and others not. Check the Hosting tab. If you have deployed something, it will probably be deployed to the same URL that is listed on your login page. Try adding your domain name to this page and see if it works.

Answer 3

You must make these changes to the Google API Console ( https://console.cloud.google.com ). Go there, find your credentials for the project, click “OAuth consent screen”, and then a text box appears that says “Product name displayed to users”, change the current name to your application name and click “Save”.