Implementing MSAL + AAD B2C in Xamarin – 6 Tips, Tricks and Facts

Inspired by Steven Thewissen’s excellent MSAL article, I thought I would share what I have learned about MSAL over the 3+ years I have worked with MSAL and Xamarin. If you’re just getting started, be sure to read Steven’s article, he does a great job covering how to use the tools. This article is a collection of my personal learnings and experience using MSAL in my apps.

Without further ado, here are 6 tips/tricks/facts about MSAL, AAD B2C and Xamarin:

  1. TIP: Careful with package upgrades!
    • I cannot emphasize how important this is, check out the older packages in nuget: https://www.nuget.org/packages/Microsoft.Identity.Client/ the library was in preview for nearly 3 years and I went through the pain of dealing with api changes and behaviour changes. Read the change log carefully!
  2. FACT: You cannot change the Android webview title from “Sign In” without a custom MSAL build.
  3. TRICK: Use a JWT parser to check your token expiry, if the token is expired, you can pro-actively refresh it avoiding a round trip.
  4. TIP: Android devices with older system browsers may have issues loading the sign in webview.
  5. TRICK: Careful with exceptions
  6. TIP: You don’t need your own code to save tokens to secure storage, MSAL does this for you!

My Implementation

This is roughly what I have used in my last few projects, not exact, I generally use dependency injection and a few other bits. For simplicity’s sake this is a self-contained sample implementation. I would advise using Lazy<T> for IPublicClientApplication at the very least in a real life application.

Note: The Secrets class is generated by Dan Siegel’s excellent mobile build tools.

Your thoughts?

Please let me know your thoughts, tweet at me @dylbot9000. Happy to hear good/bad/ugly/criticisms/suggestions.

Mobile Blazor Bindings – Getting Started + Why You Should Care

TLDR: The Experimental Mobile Blazor Bindings can result in much less XAML and C#, 64% less in my experiment, but the tech isn’t quite ready for prime time.

What are Mobile Blazor Bindings?

First off, Blazor is a new technology within ASP.NET Core which allows rich web applications to be written with C# instead of javascript (for the mostpart). My intent here isn’t to explain Blazor, if you wish to learn more, check out the resources listed at the end of this article.

Blazor uses the ASP.NET Razor template engine to deliver html content to browser clients. Html is markup, Xaml is markup…why not use the Razor engine to build Xamarin?

That’s the question Eilon Lipton answered with Mobile Blazor Bindings. In essence, this approach uses Razor syntax with Xamarin Forms Xaml to create mobile apps.

You may find yourself wondering why you should care…as I did when this was announced. I’m not a massive fan of Razor pages and lately I’m finding myself frustrated with the huge amount of Xaml code required to do some relatively simple things in Xamarin Forms. The Mobile Blazor Bindings approach doesn’t really solve the Razor pages issue, but it certainly helps simplify Xaml and at the same time, it also helps simplify your C# by using a binding which doesn’t rely on INotifyPropertyChanged.

Getting Started with Mobile Blazor Bindings

  1. Install Visual Studio 2019 or Visual Studio for Mac and install Xamarin
  2. Download and install .NET Core 3.0 or 3.1 SDK
  3. Install the Mobile Blazor Bindings project templates: dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta
  4. Create a new project: dotnet new mobileblazorbindings -o FirstMobileBlazorBindingsApp
  5. This will create a FirstMobileBlazorBindingsApp folder containing a solution and 3 projects:
    1. FirstMobileBlazorBindingsApp – .NET Standard 2.0 library containing Razor templates and cross platform code
    2. FirstMobileBlazorBindingsApp.Android – Xamarin.Android head project.
    3. FirstMobileBlazorBindingsApp.iOS – Xamarin.iOS head project.
  6. Open the solution in Visual Studio
  7. Run the Android project

Note: I had no luck with iOS, I would stick to Android for now.

Check out the official documentation for Mobile Blazor Bindings and the Github repo for Mobile Blazor Bindings. Be sure to log issues with a sample solution if you run across bugs.

Porting a Xamarin Forms MVVM screen

Let’s look at an example. Since everyone’s likely here for Xamarin, we’ll start with an options selection screen I built using Xamarin Forms and MVVM.

Xamarin Forms MVVM (188 lines)

Blazor Mobile Bindings (68 lines)

120 fewer lines for the Blazor Mobile Bindings approach. Wow. I am sold.

Check out my two solutions on Github.

Conclusion

I was not excited about this approach until I actually saw the results. There is huge upside and promise, I’m looking forward to seeing where this goes. No having to worry about INotifyPropertyChanged, no commanding, far more flexibility in Xaml with the tried and true Razor engine.

On the other side, I ran into 3 relatively major issues. OnClick methods would only fire once, an IsVisible flag set by a variable wasn’t working at all and iOS wouldn’t work (I didn’t look very close at this). There is also no hot reload support at this point, which you miss very fast after getting used to it.

Great job by Eilon Lipton and everyone else from the Xamarin and Blazor teams who brought this experiment to life!