Azure AD B2C vs Firebase

Coming from the Microsoft world it was natural for me to immediately jump to Azure AD B2C when I needed to implement authentication in an Angular 5 application. However, things weren’t so rosy, so I had to look for alternatives after an entire day playing around with Azure AD B2C and so I met Google Firebase. And after more days of playing around and comparing pros and cons, I thought it might be useful for others to share some thoughts on these two products.

What was everything about?

I am currently working on a personal project that might be some day a consumer app. Since I like Angular a lot, it was a natural choice for me to use it for my front end work. The larger picture involves also a .Net Core API and all needed application layers. When I started to work on the front end, one of the first things I wanted to do is to implement authentication. Here it’s important to note that my project will hopefully be some day a consumer app. So that’s why I was looking at Azure AD B2C and not the (let’s say) normal Azure AD.

Challenges with Azure AD B2C

Well the first major challenge was to implement it in Angular. Azure AD B2C relies on MSAL.js when thinking about implementing it client-side. Of course, the first problem is that MSAL.js is a standard JavaScript library, so it’s not so straightforward to integrate it in Angular 5. However, I’m not a total noob when it comes to Angular, so this was not a major problem. It didn’t take long and I was able to authenticate with Azure AD B2C using email and password or using Facebook as identity provider.

But that’s the part where my fun ended. As a next step after a successful authentication, I wanted to access user information on the ID token received from Azure AD B2C. But, surprise, surprise, that’s not possible. There’s even a GitHub issue that Microsoft developers quickly closed stating that:

Currently MSAL does not include claims added in B2C policy because there is no certainty that values will exist for these claims in all id_tokens. Your solution above is a good approach for now.

That’s kind of strange, since accessing the claims on an id token is kind of crucial for every application. Microsoft advises to retrieve user information by calling the Microsoft Graph API. This, however, adds a lot of overhead to a simple application for a scenario that any authentication provider should provide.

Another option was until few months ago to extend the Msal.IdToken class, and develop an own solution to read claims on the id token. However, this also was not possible anymore after a new release of MSAL.js.

So the main problem with Azure AD B2C is that it’s really not JavaScript friendly at all. In order to implement a decent authentication feature, developers need to hack around the JS library or make unnecessary calls to the Microsoft Graph API.

Finally, documentation is really scarce and often contradictory. On the MSAL.js GitHub repo there is few information and for more complex things you just need to look into the library and search the internet for hours.

Google Firebase to the rescue

Firebase is an entire suite of products meant to make it easier to develop mobile apps. It includes Firebase Authentication, which is a consumer oriented authentication service, just like Azure AD B2C, that provides several authentication options (email, Facebook, Google, Twitter and so on). And there’s also an Angular module wrapping the entire Javascript, making it very easy to integrate with Angular. In fact, after running a CLI command, adding the necessary imports to the Angular app and writing 10 lines of code I was able to authenticate with Facebook and Google. And of course, once authenticated, you can access all the information on the token. Just like that, I was able to also display a profile picture (coming from the Facebook or Google CDN), first name and last name, and email address.

The next logical step is to extend the information that is available in the token and add custom information about the authenticated user. Unfortunately, that’s not directly possible with Firebase Authentication, but the authentication service is tightly coupled to Firestore, a NoSQL document database. Integrating Firestore was again as easy as one, two, three and after few more line of code I had a very basic flow that authenticates the user and then creates a document in Firestore. Of course, it’s possible to already push some information about the user when the document is created, like unique identifier and so on. And the really cool thing about Firestore is that you can stream the user document for real time changes. So if you change the display name in Firestore, it will automatically change the display name on an Angular component. That’s really neat.

Firebase also has a so-called “Spark” plan, that is free. Sure, you have some limits on authentications per month and transactions in the database, but to be honest, I will be very happy to hit some day those limits. If you would like to use Azure Cosmos DB for a similar reason, you would have to pay around $60 per month for it.

Firebase drawbacks

When it comes to authentication, Firebase provides all the needed tools to implement standard authentication flows. However, when it comes to Firestore (the document database) there are some things that one needs to take into consideration. Firestore is a fairly new service and you can perform some different queries, but filtering and searching capabilities are fairly basic. So if you need to do some heavy data operations then maybe you should look elsewhere.  Still, for most consumer oriented apps, Firestore might be a good option.

Conclusions

Microsoft needs to invest a little bit more time and passion into making Azure AD B2C a viable option for most Javascript based web apps. Basic things like accessing claims on an id token are a must in today’s technology trends and appropriate documentation would also be appropriate. I can understand that the Azure AD B2C team may be focusing more on the .Net library, but neglecting Angular, React and other Javascript/TypeScript based frameworks might be a strategical mistake in my opinion. It might be a bad sign if Microsoft enthusiasts like me need to look in the competition’s yard for solutions to their most basic needs.

This article also got very long, so thanks for reading to the end. Feel free to drop a comment and share this article with your friends if you find it useful.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

Dan Patrascu-Baba

Dan Patrascu-Baba

Developer, consultant, trainer at Codewrinkles
,Net Developer.Focusing on both the .Net world and Microsoft Azure. Experienced speaker and trainer.
Dan Patrascu-Baba
Spread the word!

4 thoughts on “Azure AD B2C vs Firebase

  1. Thanks for the article – I just spent a few days trying to get B2C / MSAL to work with a native Xamarin app and I think it’s just not ready for prime time. Bugs that haven’t been fixed for 1.5 years and a very very klunky admin interface. Guess I’ll have a look at Firebase and Auth0 🙂

    1. I had a good experience with Firebase, which I think for mobile is optimal. I also had some very nice working experience with Auth0, which I find very powerful and suitable for more complex authentication and authorization needs.

  2. You posted this in April, however your experience matches exactly with mine. I don’t understand MS cannot get this thing working. Broken samples, msal still in preview, unanswered questions/issues on GitHub,etc. And B2C is a client side integration framework. No one uses MVC for any serious consumer facing frontend, so Angular/React/Vue should be their main priority.

    I too have some good experience with Auth0, but choose B2C because Azure gives me the possibility to deploy in EU data centers. Now I’m not so sure anymore…

  3. Any thoughts on replacing MSAL with the ‘angular-oauth2-oidc’ library? Seems to be well-supported, but hoping I don’t go down the road only to find a critical missing piece somewhere.

    I’ve been fighting with B2c in an angular app for a week now, I have experienced the same issues mentioned by other commenters. Very frustrating, and somewhat silly that MS B2C doesn’t (effectively) support Angular, the single most popular front-end framework.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.