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?

Answer 1

In my solution that follows I should say that the steps I followed worked. It is possible that I did something that it not absolutely required, but to my knowledge and at this time, I have not broken anything.

This workflow (and the documentation) is a bit broken up because you must adjust both your Google Cloud Platform (GCP) credentials and the Firebase authentication. Documentation was provided by each side of this workflow but I was not able to find a document that covered the entire workflow to make this substitution.

GCP Console Setup

I first adjusted my GCP credentials for the OAuth Client:

1. Go to the GCP console > APIs & Services > Credentials page (https://console.cloud.google.com/apis/credentials?project=_ and select your project)

2. At the bottom of the page, find "OAuth 2.0 client IDs". There should be an entry titled "Web client (auto created by Google Service)"

3. To the right side of page click on the edit icon (pen), which opens the configuration page.

4. Under "Authorized JavaScript origins", you should see your yourFirebaseApp.firebaseapp.com domain. Click "+ Add URI" and add your custom URI. This should be an "https" domain, so use https://myApp.com

5. Under "Authorized redirect URIs", you should see https://yourFirebaseApp.firebaseapp.com/__/auth/handler. (The __/auth/handler bit on the tail is the auth callback that Firebase provides). Click "+ Add URI" and add your domain, with __/auth/handler at the end. (For example: https://myApp.com/__/auth/handler)

6. Click Save

7. Go to the OAuth Consent Screen (https://console.cloud.google.com/apis/credentials/consent/edit?project=_). Add your custom domain to "Application Homepage link", and fill in the "Application Name" and "Logo", and "Application Privacy Policy link" with custom values for your app.

Firebase Console Setup

Then, you'll need to add your custom domain to the Firebase auth authorized domain list:

1. Go to the Firebase Console > Authentication > Sign-in Methods page (https://console.firebase.google.com/project/_/authentication/providers and select your project)

2. Under "Authorized Domains" you should see localhost and the default yourFirebaseApp.firebaseapp.com domain. Click the "Add Domain" and enter your custom domain name, then click add.

Web App Setup

You will likely remember the block of code that you copied from your firebase project and pasted into the code from which you compile and deploy your Web App. (Some people use the hosting default init.js script - if you do, go back and setup your app using the config snippet instead)

Find the "authDomain" field in the code snippet, and change it to your custom domain, then re-deploy.

This procedure worked for me and my project, I have posted this in the hopes that these instructions may be refined via feedback from others performing this or similar operations.

Answer 2

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"