Firebase project custom Domain

Firebase project domain consists of {projectId}.firebaseapp.com. This domain is used everywhere in Firebase such as Verification email, Forgot password email, Firebase hosting, etc. Using the custom domain for such things looks more professional.

In this article, I will share the steps to use the custom domain for everything in Firebase Project.

#Adding a custom domain

1. Go to the Firebase project.
2. Click on Hosting under Develop from the left side menu.
3. Click on Get Started and follow the steps. Just click next, next ….
4. You will see your project domains {projectId}.web.app and {projectId}.firebaseapp.com. These are the default domains provided by Firebase for your project.
5. Click on Add custom domain button.
6. Enter the domain/subdomain that you own and want to use for the project. Click continue.
7. Add the displayed TXT records to your DNS provider so that Firebase can verify you own that domain/subdomain and click verify. Note the domain/subdomain verification can take time. So you may have to click on the verify button more than one time.
8. If your domain/subdomain is verified then you will be asked to add the A records to your DNS provider. After adding the A records click finish.
9. You will see your custom domain is added on the Hosting dashboard. But the status is Needs Setup.
10. Wait until the status becomes Connected.

#Customize Action URLs in Emails

In the Firebase emails such as Verification Email, Forgot Password and, Email Updated has action URLs. You can use the added custom domain/subdomain for these URLs.

The action URL in the email can work from all the domains displayed under the Hosting dashboard. Two domains are provided by the Firebase and one custom is added in the above. So the email action URL can work from

1. https://{projectId}.firebaseapp.com/__/auth/action?mode=<action>&oobCode=<code>
2. https://{projectId}.web.app/__/auth/action?mode=<action>&oobCode=<code>
3. https://{customDomain}/__/auth/action?mode=<action>&oobCode=<code>

The functionality from the above URLs is handled automatically by the Firebase. If you want to customize the handling then you have to write the code to handle the actions and need to upload that code on Firebase or third party hosting.

Follow the documentation for customize the email action handlers at https://firebase.google.com/docs/auth/custom-email-handler

customize the action url

#Customize the Email Domain

When we send an Email such as Verification, Forgot password, from Firebase to the user then the sender of the email by default is {projectId}.firebaseapp.com

default email sender domain

We can customize the email sender domain also. Just Follow the Steps:

1. Click on the edit icon in the above screenshot.
2. You will see the customize domain option below the domain.
3. Click on customize domain and add the domain/subdomain that you own and want to use.
4. Add the TXT and CNAME records to the domain/subdomain DNS provider and click verify. This will take up to 48 hours to verify.
5. After verification, you can use that domain as email sender.

#Customize the URL of Firebase HTTP cloud function

Suppose you created an HTTP cloud function

exports.date = functions.https.onRequest((req, res) => {
  // ...
});

The above function will have the URL like https://us-central1-<project-id>.cloudfunctions.net/date

Here you may also want to customize this URL using your custom domain. For that, you have to edit your firebase.json file and need to use rewrites under the hosting

"hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/date",
    "function": "date"
  } ]
}

After adding this rewrite rule and deploying to Firebase (using firebase deploy), your function is reachable via the following URLs:

1. Firebase subdomains: projectID.web.app/date and projectID.firebaseapp.com/date
2. Any connected custom domains: custom-domain/date

But your cloud function can still be accessible via https://us-central1-<project-id>.cloudfunctions.net/date

For more details read the documentation at https://firebase.google.com/docs/hosting/full-config

https://firebase.google.com/docs/hosting/full-config#direct_requests_to_a_function

Thank you for reading the article. I hope you learn the way to add/use the custom domain in Firebase. If you have any queries, do let me know in the response.

Don’t forget to clap and share the article.

Happy coding :)