How to Use Firebase Auth with Your Custom Domain

Introduction

By default, Firebase Auth uses <PROJECT_ID>.firebaseapp.com as the auth domain. That means verification emails and provider redirects can point users at a domain that does not match your product.

That mismatch is easy to miss during development and hard to explain to users later. The fix is to put Firebase Auth behind a custom subdomain such as auth.example.com.

This article walks through the setup end to end. The hosting provider does not matter as long as you can add DNS records and serve Firebase Hosting.

Add Authorized Domains to Firebase Auth

First open the Firebase console and go to Authentication.

Open the Sign-in method tab, find Authorized domains, and add both your root domain and your auth subdomain.

For example, if your site is geofyi.com, add:

geofyi.com
auth.geofyi.com

The root domain needs to be authorized so the app can talk to the auth subdomain from the browser.

Update the Firebase Auth Action URL

While you are still in the Authentication console, open Templates. In the Email address verification tab, click the pencil icon and then customize action URL.

Set the action URL to your custom auth domain. For example:

https://auth.geofyi.com/__/auth/action

Host the Auth Subdomain on Firebase Hosting

Now host the new auth subdomain on Firebase Hosting.

From the Firebase console, open Hosting and click Get started. Firebase shows a short onboarding flow the first time you visit.

Once you reach the Hosting console, click Add custom domain and add the subdomain you created earlier.

Firebase will give you one or more A records to add to your DNS provider. After you add them, the domain will usually stay in a Pending state until Google finishes provisioning SSL.

That part can take a few hours. You can keep going with the rest of the setup while the certificate is still being issued.

Add an Authorized Redirect URI

Next open the Google Cloud Platform console and make sure the correct Firebase project is selected.

Under OAuth 2.0 Client IDs, you will see a row for your Web client. Edit the Web client entry.

Add your site domains to Authorized JavaScript origins.

https://www.geofyi.com
https://geofyi.com

Then add the authorized redirect URI for the custom auth domain. Keep the default Firebase URI if it is already present, and add:

https://auth.geofyi.com/__/auth/handler

Update Your App Code to Use the New Auth Domain

Update your app to use the new auth domain. If you keep the value in an environment variable, the change looks like this:

FIREBASE_AUTH_DOMAIN=auth.geofyi.com

If you deploy to Vercel, update the environment variable there as well.

Conclusion

Once DNS, Firebase Hosting, and the OAuth redirect URI are all configured, redeploy your app and verify that login and email links now use your custom domain instead of the default Firebase one.

If you want to compare the flow with a real implementation, Geofyi uses this setup too.