--- title: "Using a custom domain for Firebase email action links" url: "https://www.bekk.christmas/post/2023/03/custom-domain-for-firebase-email-links" authors: ["Petter Sæther Moen"] published: "2023-12-03" updated: "2024-12-11T08:58:56Z" language: "en-US" type: "article" tags: ["Sky"] keywords: ["Authentication", "Auth", "Email", "Action", "URL", "Custom", "Handler", "firebase"] --- # Using a custom domain for Firebase email action links You might have noticed that the links Firebase uses in their email actions (password resets, email verifications, etc.) are using a URL with [firebaseapp.com](https://firebaseapp.com) as the origin. Visiting some random [firebaseapp.com](http://firebaseapp.com) URL feels a bit fishy, doesn't it? How can your users be sure that this password reset form isn't a phishing site? Links pointing to our custom domain would certainly make me feel more confident that I am not falling victim to a phishing scam! Let's look at how we can achieve this. ## In short Firebase email action links can be moved from the default firebaseapp.com origin to a custom domain by changing the action URL in Authentication settings. If you still want to use Firebase’s built-in action handler, your app can proxy /__/auth/* requests back to Firebase, for example with Next.js rewrites or Vercel rewrites. - **For:** Developers using Firebase Authentication - **Good to know beforehand:** Basic familiarity with Firebase Authentication and web hosting rewrites _AI-generated_ By default, Firebase will use the URL [https://.firebaseapp.com/__/auth/action](https://example-project-c5919.firebaseapp.com/__/auth/action) as your project's default _email action handler_ URL. Email action handler is the term Firebase uses to describe the service that is in charge of performing email actions, such as resetting passwords, verifying emails, etc. Changing this action URL is easy. In the Firebase dashboard, under the Authentication section, there is a tab for editing the email templates. If you edit one of the templates there will be a “Customize action URL” link you can press to edit the URL that points to your email action handler. This can be set to whatever your heart desires. ![Inside the Firebase Authentication dashboard, editing the email address verification template. At the bottom of the page the link to customize action URL is highlighted in red.](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/a9ec71e9b35840e17381f15afe82701dc48ca58a-2666x2304.png) _After clicking edit on the "Email address verification" template we can find the "Customize action URL" link near the bottom. Here outlined in red._ After updating this URL to point to our custom domain, we can try sending a password reset to ourselves. The links in our emails are now using our custom domain. Awesome! However, if we try following the link it will likely not work. Why is that? Firebase Hosting websites always have an email action handler at the `/__/auth/action` URL. That is what the default action URL was using. So, if you are using Firebase Hosting you will be good as long as you ensure your action URL points to this path. Firebase Hosting isn’t the right fit for everybody though. If you are in this category you will have to set up your own email action handler. However, I’m lazy, and I don’t wanna do that! We can circumvent rolling our own handler by proxying the calls to our custom domain's action URL to the default action URL Firebase was using initially. This will enable us to re-use Firebase's action handler. Let’s look at how this could be done. In the following example, I will be using Next.js to illustrate how the proxying could be implemented. Next.js uses _rewrites_ for URL proxying, which can be defined in the `next.config.js` file, like so: ```jsx // next.config.js module.exports = { async rewrites() { return [ { source: '/__/auth/:path(.*)', destination: 'https://.firebaseapp.com/__/auth/:path*', } ] }, } ``` This proxies all calls to `/__/auth/*` to the Firebase's action handler. As a side note. Vercel also supports rewrites like these. If you are hosting on Vercel you could pretty much copy the above code snippet into your `vercel.json` and it should also work, even though you are not hosting a Next.js app. Now, if we follow the link from our password reset email again, we will see that things are back to normal! We are again able to reset our passwords, verify our emails, and whatever other actions that might be thrown at us! If you'd rather roll your own action handler, so that you for instance could have forms that are more aligned with your products identity, I urge you to check out the related links below! ## Relevant resources recommended by the author - [Create custom email action handler](https://firebase.google.com/docs/auth/custom-email-handler)