Connecting Firebase Dynamic link authentication with the edge-cases of Branch.io

Note: I am not the worlds best writer, but I just wanted to share some useful information with all of you.

I recently was excited to see Firebase had released a “Email link (passwordless sign-in)” to their sign-in methods. Given the recent Facebook blowback, I wanted to move our platform away from using their login platform, which was convenient, but ultimately brought up some security risks we felt.

Setting up the Firebase email link was pretty simple in the grand scheme of things. It was a simple matter of installing the firebase-dynamic-links SDK.

@ionic-native/firebase-dynamic-links

Afterwards it was a simple manner of setting up Firebase dynamic links to handle the link within the application

this.firebaseDynamicLinks.onDynamicLink()
.then((res: any) => directTheUserToContent(res))
.catch((error: any) => console.error(error));

And then setting up your environment appropriately.

export const environment = {
production: true,
firebase: {
...
},
actionCodeSettings: {
// URL you want to redirect back to. The domain (www.example.com) for this
// URL must be whitelisted in the Firebase Console.
url: 'URL',
// This must be true.
iOS: {
bundleId: '...'
},
android: {
packageName: '...',
installApp: true,
minimumVersion: '12'
},
handleCodeInApp: true,
}
};

But right away I noticed that there were issues clicking on the link, and having it reliably open the application. Often times it would open the link in Safari, asking me to continue to the application, and then it would open the Apple Store, despite a local build being on the phone.

After a little bit of Googling, I came across this article.

It accurately described the problems that I was running into, and showed that Branch.io was the clear winner in the race of “dynamic links” A.K.A deep links, which is the industry term. Dynamic links is Google’s own terminology.

Implementing Branch.io was a little bit more involved, but ultimately I figured it out. Here’s a link to the Cordova/Ionic documentation

But then I was running into another issue. Since I was no longer using Firebase’s Dynamic links, I wasn’t able to get my authentication from Firebase.

I Googled whether it was possible to integrate Branch.io (which has amazing end cases) with Firebase (for authentication purposes). But ultimately came up short.

I looked through Branch.io’s Github issue tracker. And other people had asked questions similar to mine, but none of them had a real solution to the problem.

I submitted a question of my own, and kept plucking away at the problem. After a few hours of thinking about it, I came up with a solution that hadn’t been used yet (at least to my knowledge).

Basically the solution breaks down to be this:

  1. Set up Firebase Dynamic Links.
  2. Set up Branch.io deep links & create a deep link.
  3. Whitelist the Branch.io deep link URL in your Firebase Console, Authentication section.
  4. Go back into your Enviroment.actionCodeSettings and set the url to be your Branch.io link url.
actionCodeSettings: {
// URL you want to redirect back to. The domain (www.example.com) for this
// URL must be whitelisted in the Firebase Console.
url: 'BRANCH.IO_LINK_URL',
...
}

What this essentially does, is it allows your user to click on the emailed link, which will then ask them if they would like to open the application. Normally this would redirect to the Apple Store, or to whatever URL you designated. But since we specified the redirect URL to be our Branch.io link, it will open the Branch.io link, conveniently passing this variable.

data['+referrer']

Which contains the authentication link url from Firebase, which we can now use to authenticate into Firebase. A seemingly innocuous variable which turns the tides in our battle to set up a “simple” authentication method in Firebase.

Conclusion

Sometimes a simple implementation isn’t as simple as it seems. But keep plucking away, and you’ll find all of the answers that you need.

Questions?

You can find me on:
- GitHub: https://github.com/bengejd/
- Medium: https://medium.com/@JordanBenge

Who am I? I am a Software Developer who loves helping others and contributing to Open-Source. I’ve been working in the Ionic Framework since Ionic 1, and have tried to keep up to date on the latest and greatest when it comes to Hybrid Mobile App Development.

If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment below if you need any help.