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
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.
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
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.
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.
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: