Introduction #
Hey there, would you like to use a custom domain instead of the one Firebase assigned to you? You have come to the right place!
You will learn:
- How to set up a custom domain for authentication
- How to use that domain for your email templates
- How to use that domain for your login via Google
Custom Domain #
Open https://console.firebase.google.com/.
Click on Build -> Hosting
Setup Hosting #
If you have not finished it, wrap up the Get started.
Click through the steps until you are done.
Dashboard (Hosting) #
When you are in the Dashboard screen, click on Add custom domain and type in the domain you would like to add.
Afterward, you are presented with a screen to set up the DNS for your domain. This is usually a CNAME entry which will redirect to your Firebase domain.
If you have set up the DNS properly, you should see something like “Site Not Found”
Try the authentication callback, open your domain like https://<DOMAIN>/__/auth/handler. You should see this error message:
Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared. Some specific scenarios are - 1) Using IDP-Initiated SAML SSO. 2) Using signInWithRedirect in a storage-partitioned browser environment.
If this error appears, you’re on the right track to adjust your login URLs.
Email Templates #
You now want to update the Email Template Actions, so that the emails sent (for example password forget) by Firebase will use your custom domain.
Navigate to Build -> Authentication -> Templates.
Customize Domain #
Click on Customize domain in the top right and follow the prompts to add your custom domain.
Custom Action URL #
Click on Customize action URL on the bottom right.
Adjust the URL and make sure to add this path /__/auth/action:
It should look like this:
https://<DOMAIN>/__/auth/action
Code Firebase Config #
Finally, you can change the authentication domain in your Firebase config.
const FIREBASE_CONFIG = {
authDomain: 'auth.altar.ai', // change this to your new authentication domain
// other properties
};
When you are using then using Google authentication, the dialog should look like this.
Conclusion #
This guide should have given you a good overview what is necessary to configure your custom domain for Firebase. If you have any questions or suggestions, feel free to reach out!
Contact me at [email protected]