How to replace the myApp-123.firebaseapp.com with my custom domain myApp.com

Question

I am using Firebase Auth signInWithPopup() which is absolutely great. But when initially configured, the popup reads:

Choose an account to continue to myApp-123.firebaseapp.com

I would really like it to read:

Choose an account to continue to myApp.com

How can I make the popup show my own domain?

Solution

I asked firebase support and got the following reply. Items in italics are my additions. This is more or less the same as Done's answer but with a custom domain. You do not need to host your app on Firebase.

--

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"

Comments

[Sameer]

I am glad I read your message in italics again.. I was missing to use new domain.. now I also configured custom subdomain to point to firebase and its working. Thanks.

[ads]

I can't seem to get this to work. Where do you set the apps configuration? I enabled my Firebase Hosting for this purpose and it created an index.html file which is pre-loaded with some firebase codes. Should I add it here? I should also mention that my client app is android and I see the firebase domain during authentication with google, twitter etc.

[Jayen]

the app's configuration is client-side and the code in the answer is for javascript/web.