How to Use Firebase Auth with Your Custom Domain
Introduction
By default, when you use Firebase Auth, your auth domain is <PROJECT_ID>.firebaseapp.com.
So when your users verify their emails or login with an identity provider like Google, they
see this <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 <PROJECT_ID>.firebaseapp.com.
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.
Add Authorized Domains to Firebase Auth
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 app.geofyi.com or poodle.geofyi.com, but 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 auth.geofyi.com.
Update the Firebase Auth Action URL
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 https://auth.geofyi.com/__/auth/action.
Host the Auth Subdomain on Firebase Hosting
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, auth.geofyi.com.
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.
Add an Authorized Redirect URI
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.
Add your domain name to the Authorized JavaScript origins. For me, I added
https://www.geofyi.comhttps://geofyi.com
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
your auth domain. So for me, this was https://auth.geofyi.com/__/auth/handler.
Update Your App Code to Use the New Auth Domain
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=auth.geofyi.com
If you're deploying to Vercel, make sure you also update the environment variables in the Vercel dashboard as well.
Conclusion
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. ✌️
