Table of Contents
By default, when you use Firebase Auth, your auth domain is
So when your users verify their emails or login with an identity provider like Google, they
<PROJECT_ID>.firebaseapp.com domain instead of your site's domain. This, of course, is not great as your users
may find it suspicious when they get emails telling them to click on links to a domain they may not recognize, like
I have been wrestling with this issue while building Geofyi and recently figured out how to fix it. The relevant documentation definitely leaves some details making this process tricker than it needs to be. Luckily, someone gave instructions on GitHub which helped me figure this out. This article consolidates my learnings to help you get your custom domain linked to Firebase Auth.
By the way, Geofyi is hosted on Vercel which provides a way to manage DNS records. The tutorial however is agnostic to whichever provider you're using to host your site. You just need to be able to add some DNS records.
First head over to the Firebase console and go to the Authentication dashboard.
Click the Sign-in method tab where you will find a section to add Authorized domains. Click Add domain.
Create a subdomain for your domain to handle authentication via Firebase. For me, I set my auth domain to be
auth.geofyi.com. The subdomain doesn't have to be named
auth. I could've named it
auth.geofyi.com seemed most fitting.
Go ahead and also add your root domain as well. For me, this is simply
geofyi.com. This is so the client app running on
geofyi.com can access
While we're still in the Authentication console, head over to Templates. In the Email address verification tab, click the pencil icon near the email template. This will open a view where you can click customize action URL.
Change the action URL so that it's using your new auth domain. For me, this is
Now we're going to use Firebase to host the new
auth subdomain. From the Firebase console, head over to Hosting.
Click the Get started button in the main hero. They'll show you a 3-step tutorial to set up Firebase Hosting. Just click Next until you get through the tutorial. They show the tutorial every time you go to Firebase Hosting. I'm not sure why. 👀
Once you're in the Hosting console, click Add custom domain and add the new subdomain you created in the previous steps. For me,
They'll ask you to add some A records to your DNS provider. Once you've added the records, you should see Firebase Hosting's state for your new domain set to Pending.
It can take a few hours for
Google to issue an SSL certificate for the new
auth domain. Once everything is set up, the state
will change to Connected but feel free to continue on with the rest of the tutorial since there's still more that needs to be set up.
Next, head over to the Google Cloud Platform console. Make sure your Firebase project is selected in GCP.
Under OAuth 2.0 Client IDs, you will see a row for your Web client. Click the pencil icon to edit this record.
Next, add the authorized redirect URIs. You should already see
https://<PROJECT_ID>.firebaseapp.com/__/auth/handler as one of the authorized redirect URIs. Add the URI that uses
auth domain. So for me, this was
You'll need to update your app code to use the new
auth domain. I store my auth domain as an environment variable,
so the change was as follows:
- FIREBASE_AUTH_DOMAIN=<PROJECT_ID>.firebaseapp.com + FIREBASE_AUTH_DOMAIN=auth.geofyi.com
If you're deploying to Vercel, make sure you also update the environment variables in the Vercel dashboard as well.
Once your DNS provider is connected to your new
auth domain hosted with Firebase Hosting, you should
be ready to redeploy your app and start using your new domain intead of the default Firebase domain.
Hope this article helped you out!
If you're interested, check out Geofyi, which is a project I've been building that let's people find information and connect with people from any location around world. ✌️