How to Show Custom Domain Name With Firebase Authentication Using Google?

By Hemanta Sundaray on 2022-11-15

You have a web app where users can authenticate themselves with Firebase using their Google accounts.

Let’s say you have a Sign-In page that looks like this:

page

When a user clicks on the Sign-In with Google button, a pop-up window prompts the user to sign-in with Google:

Auth screen

On the pop-up window, the user sees the name of a subdomain, which is created automatically when you implement Firebase authentication using Google. The subdomain takes the form of https://[PROJECT-ID]

You don’t want to show the user the name of the Firebase-generated domain; you want to show the user the name of a custom domain.

For example, when users sign in using Google to my web app, I show them the name of my domain

Auth Screen

You can see for yourself at this link:

Ok, before I explain to you the steps you need to follow, keep the following points in mind:

  • I have purchased my domain - - from Google Domains.

Google Domain

  • And my app is hosted on Netlify.



Go to Firebase console and click on Hosting.

Firebase hosting

Then, click on Get started.

Firebase hosting console

We don’t need to set up firebase hosting, so, keep clicking on Next until you reach the hosting console.

Firebase hosting instruction

In the Firebase hosting console, you have to add a custom subdomain.

In the pic below, you can see that I have added the custom subdomain named Note that the word auth is not mandatory; you can replace it with any word you like.

Custom domain

Let’s say you enter the subdomain

Custom domain

After you click on Continue, Firebase will give you a resource record that you need to add to your DNS provider.

When I added, Firebase gave me a A record to add to my DNS provider (which is Netlify in my case).

DNS A record


In step 2, click on Authentication in the Firebase console.

Firebase authentication

Next, click on Settings and then Authorised domains.

Authorized domains

Click on Add domain and enter the name of your subdomain.

Custom Domain


In step-3, you need to go to Google Cloud Platform console.

Then, you need to select your project and click on Credentials.

Google Cloud console


Click on the pen icon to edit the web client.

Web Client

Thereafter, you need to do two things:

First, you need to add the custom domain to the list of Authorized JavaScript origins:

JavaScript origin

Second, you need to add a callback URL to the list authorised redirect UIs.

Redirect UI

Don’t forget to add /__/auth/handler after the name of your subdomain.

Finally, click on Save.

We are almost done.


This is the last step.

In your app’s code, go to the file where you have the Firebase config object that you would have copied from the Firebase console’s Project Settings page.

In the Firebase config object, you need to update the value of the authDomain field.

By default, the value of the authDomain field is [YOUR_APP] You have to replace the value with your custom domain name.

For example, the value of the authDomain field for my project is

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  appId: "YOUR_APP_ID",

And that’s it. Now, when you click on the Sign in with Google button, you should see the name of your custom domain in the pop-up window.

Join the Newsletter