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.