Asbestos Supply

2022-01-17 Firebase magic links with custom login url

Background

I’m using Firebase for authentication in a project. We don’t use username & passwords, though, rather we send magic links via email. Because we want to use completely custom emails we generate magic links and then send our own emails. We generate the magic link via the Firebase SDK like so:

const magicLink = firebase.auth().generateSignInWithEmailLink(email, {
  url: redirectUrl,
  handleCodeInApp: true
});

Then we send the email with that link embedded. So far, so good.

Enter SpamAssassin

By default these magic links point to a project-name.firebaseapp.com domain. Since that redirects immediately to our domain it was pretty low priority to change that. Things changed quickly, though, when we started seeing emails going to spam. It turns out SpamAssassin really doesn’t like Firebase urls in emails. This was having a significant impact on our login email deliverability!

Custom domain

After configuring a custom domain on Firebase, I confirmed that the login path worked on this new domain. I was almost there! But I couldn’t figure out how to get the Firebase SDK to generate the magic link with my custom domain.

Firebase Support Unhelpful

After spending an hour or two Googling with no luck I reached out to Firebase support. I didn’t get a response for a week so I reached back out. I received an email the same day that stated:

I believe you need to configure your dynamic link from the console.

That’s was it. I played around with the instructions at that link to no avail. It just didn’t really address what we’re trying to do. I replied with some followup questions but never got a response.

The solution

I asked a colleague, Peter Maczo, for help. He eventually figured this out. It turns out that there is a Firebase setting that controls this. But it’s hidden and very, very poorly named. It’s hidden under Authentication -> Templates -> Email address verification

Email Address Verification Settings Form

If you click edit on this then at the bottom you will see a textbox for Action Url

Action Url Settings Form Field

it’s this url that will be used as the prefix for magic links!