Fixing Blazor WebAssembly .NET 6 MSAL authorization bug

This post was most recently updated on November 28th, 2021.

Let’s make this short and sweet. In this particular case, upgrading a Blazor WASM solution to .NET 6 broke the authentication when deployed to Azure. The same issue could probably happen to a fresh project, though.

This is what you’re running into: If you open your browser console, you’ll see 2 interesting errors – first:

dotnet.6.0.0.o2we6pverp.js:1 mono_wasm_runtime_ready login.microsoftonline.com/common/oauth2/v2.0/token:1 Failed to load resource: the server responded with a status of 400 (Bad Request)

And a moment later, an error along the lines of:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot read properties of undefined (reading 'toLowerCase')
TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at u.signInCore (/_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js:2:193591)
at u.getUser (/_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js:2:191904)
Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'toLowerCase')
TypeError: Cannot read properties of undefined (reading 'toLowerCase')

And perhaps the most annoying is that it only happens in Azure! Locally, everything runs just fine. Another one of those situations when it’s not enough that it runs fine on your machine…

The first error might also contain some nonsense about your app not existing in the tenant, “perhaps you’ve sent your login request to the wrong tenant” and all that – but we know that’s not the case. Although… On a closer look, the tenant id in the error shouldn’t seem familiar at all.

Reason

Microsoft forgot to fix a bug in their WebAssembly package size optimizations – Assembly Trimming, namely – and that causes the authentication library to get confused between different tenants, and finally mess up the authentication altogether.

Funnily enough, this has been on their radar at least since .NET 6 Preview 4, as reported in June (see the GitHub link at the end of the article) – but sometimes even the “no-brainer”-looking issues won’t get fixed in time for GA/RTM, for a multitude of reasons.

Anyway, this is how you fix it:

Solution

That should be it. Happy Blazing! 😊

References

• GitHub issue & discussion about the topic: https://github.com/dotnet/aspnetcore/issues/33312

• Author
• Recent Posts

Antti K. Koskela

Developer / Speaker / Consultant at Koskila / Precio Fishbone / Norppandalotti Software Co / Alter - Experience Ideas Ltd

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as Solutions Architect for Precio Fishbone, building delightful Digital Workplaces.

He's been a developer from 2004 (starting with PHP and Java), and he's been working on .NET projects, Azure, Office 365, SharePoint and a lot of other stuff. He's also Microsoft MVP for Azure.

This is his personal professional (e.g. professional, but definitely personal) blog.

Latest posts by Antti K. Koskela (see all)

• How to output all Environment Variables in Azure DevOps with PowerShell? - April 9, 2024
• CSOM suddenly throwing exceptions when trying to access list contents in SharePoint? A weird fix. - April 2, 2024
• “Predefined type ‘System.Object’ is not defined or imported” and other System namespace stuff missing in your solution? - March 26, 2024