70

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.

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Wayne F. Kaskie
  • 3,257
  • 5
  • 33
  • 43
  • Have you found a solution? – Sub 6 Resources Oct 18 '17 at 16:04
  • @Sub6Resources Check my ans. – RajeshKumar R Oct 20 '17 at 19:00
  • Possible duplicate of [How to replace the myApp-123.firebaseapp.com with my custom domain myApp.com](https://stackoverflow.com/questions/44815580/how-to-replace-the-myapp-123-firebaseapp-com-with-my-custom-domain-myapp-com) – zevdg Nov 16 '17 at 00:55
  • None of the solutions on this question work anymore. They used to, but the oauth consent screen no longer shows the public-facing name setting (aka "product name shown to users") and instead [shows the authDomain url](https://stackoverflow.com/questions/44754080/why-does-the-google-oauth2-consent-form-display-company-url-instead-of-product-n). The only correct answer now is to [change the default authDomain](https://stackoverflow.com/a/44815581/2012396). – zevdg Nov 16 '17 at 01:00

6 Answers6

94

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

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.example) and do not redirect it. Firebase will prompt you to add an entry on your DNS server and take care 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

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

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

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

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

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

  • Firebase Hosting URL
  • handler URL: https://app.yourdomain.example/__/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.example"
Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Jayen
  • 5,653
  • 2
  • 44
  • 65
  • Thanks Jayen! Always nice to have a K17 friend solve a problem for you :) – nornagon Jan 10 '18 at 05:59
  • Step #3 now doesn't let you paste inside "Authorized domains" subdomains or paths, so it only accepted me "yourdomain.com", even if i create it as app.yourdomain.com on firebase and created TXT and A records for it. Hope it will work.. – m4tt Sep 22 '18 at 23:39
  • @m4tt did you try to paste with the keyboard or mouse? if i recall correctly, one worked and the other didn't. – Jayen Oct 03 '18 at 02:12
  • 1
    What does `Firebase will prompt you to add a DNS entry and take of the SSL certificate automatically.` mean? Note: My domain is hosted on different provider – Orville Nov 08 '20 at 08:27
  • `Firebase will prompt you to add a DNS entry` means they will tell you to use your DNS provider to add an entry. – Jayen Nov 08 '20 at 20:42
  • @Stephen Ostermiller has changed the quoted text, and my text to match. the quote is NOT verbatim of what firebase support sent me – Jayen Jun 20 '22 at 03:23
18

This is what worked for me:

  1. Change the Firebase configuration you set in your code to have authDomain: "insertyourdomainnamehere.example"
  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.example/__/auth/handler.

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

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
kgaidis
  • 14,259
  • 4
  • 79
  • 93
  • 1
    Worked for me aug 2020! – Max Aug 16 '20 at 05:39
  • Nice! It works for me. I don't need to create a new OAuth 2.0 Client ID. Just used existing one that Google generated and update the auth handler there. – damingzi Dec 18 '20 at 05:04
  • This worked for me, but I use custom domain for app hosting, so I had to add this domain in Firebase Hosting and adjust DNS A-record for it. – Serhiy Jan 17 '23 at 09:58
12

For my case on web app with email sign in i just need to go into project settings on console, under general tab change Public-facing name and the %APP_NAME% in email got changed

Linh Nguyen
  • 3,452
  • 4
  • 23
  • 67
10

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".

doubleOrt
  • 2,407
  • 1
  • 14
  • 34
  • Can you direct me to credentials? I've never used console.cloud.google.com and had no luck finding it. Also, does this apply to FB logins as well? – Wayne F. Kaskie Sep 10 '17 at 02:28
  • @WayneF.Kaskie Well, you login with the account that owns the credentials, from there it is just some simple UI, hover over some dropdowns, etc. And it doesn't apply to Facebook logins, just Google. – doubleOrt Sep 10 '17 at 03:04
  • Unfortunately, I have no idea where this information is, and haven't been able to find it. I'm working in firebase and the link provided is for google cloud. I know they are related in some way, but I haven't found it yet. I haven't gone live with the project yet, so I'm still hoping that someone can answer soon! – Wayne F. Kaskie Oct 19 '17 at 19:42
  • @Yuki Check my ans – RajeshKumar R Oct 20 '17 at 19:00
  • @WayneF.Kaskie : Taurus means here: https://console.cloud.google.com/apis/credentials/consent but it doesn't work for me. I already had it set. – Jayen Jan 06 '18 at 07:07
  • Thanks Jayen. At least I know where Taurus meant. But my app isn't even listed there. My auth is handled by Firebase not the Google API Console. – Wayne F. Kaskie Jan 06 '18 at 21:12
  • 1
    Doesnt work if you're using Firebase for managing authentications. It still shows the old app name. – Karthik Kannan Jan 25 '18 at 13:46
  • 2
    Keeping this answer for "historical" purposes only, apparently, it doesn't work for most cases. – doubleOrt Jan 25 '18 at 16:19
0

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.

Sub 6 Resources
  • 1,674
  • 15
  • 31
0

This help page is fairly comprehensive – but one of the key things you have to do is change the authDomain parameter in your firebase.config() settings.

But what if you are using their "easier configuration" for firebase on the web where you just load /__/firebase/3.7.4/init.js without specifying the config? Since it's automatically handled, is there a way to modify just the authDomain part of the config?

ehed
  • 804
  • 1
  • 8
  • 18