.NET 8 Blazor MSAL Error – There was an error trying to log you in: ‘”undefined” is not valid JSON’

When developing a Blazor WebAssembly application that uses the MSAL (Microsoft Authentication Library) for .NET packages, you may encounter an error message similar to the following after trying to log in.

There was an error trying to log you in: '"undefined" is not valid JSON'

The above error message is usually noticed after upgrading a Blazor application that uses .NET 7 or earlier to .NET 8.

Although it can be disconcerting to see an error message like this following a Framework upgrade, thankfully the issue is easy to resolve without requiring any logic changes to your project.

In this post, I explain why the issue occurs and how you can fix it for your application.

What causes it?

Blazor WebAssembly features IL (Intermediate Language) code ‘trimming’ to strip unneeded code from the published program. This process, also known as ‘tree shaking’ or ‘linking’, facilitates a smaller application download size and can help improve performance.

While trimming is very beneficial in most cases, it can also cause unintended side effects, especially for applications that use features like Reflection to enable dynamic behaviour. Given this, it is important to thoroughly test the published version of your application before deploying it to a production environment.

This particular issue surprised me when I first discovered it, as the application I was developing worked fine when running locally. The problem became apparent only after deploying to an Azure App Service where development testing occurs.

It appears that the trimming process unintentionally removes code vital to the authentication process, resulting in the ‘”undefined” is not valid JSON’ error.

Issue reproduction

Trimming occurs by default when your application is published. If you want to reproduce the issue locally, you can temporarily add the following XML to your Blazor WebAssembly client project (.csproj) file.

<PropertyGroup>
  <PublishTrimmed>true</PublishTrimmed>
</PropertyGroup>

Setting <PublishTrimmed> to ‘true’ in the project file ensures that trimming takes place on dotnet build, not just on dotnet publish.

Now that we know what causes the issue and how to reproduce it, let’s move on to the solution.

The solution

Thankfully, the .NET team have provided lots of Trimming options that allow us to do things like the following.

• Control how aggressive the IL Trimmer (ILLink) is when determining the IL code to discard.
• Show warnings for reflected types by adding the<SuppressTrimAnalysisWarnings> property with a value of ‘false’ to the project file.
• Disable trimming for the entire application by adding the<PublishTrimmed> property with a value of ‘false’ to the project file.
• Prevent the IL Trimmer from trimming specific assemblies.
• Define ‘Root’ assemblies for trimming.

Let’s look at how we can fix our particular issue by defining trimmer ‘Root’ assemblies.

Defining Root assemblies

In the project (.csproj) file for your Blazor WebAssembly (client) project, add the following XML.

<ItemGroup>
  <TrimmerRootAssembly Include="Microsoft.Authentication.WebAssembly.Msal" />
  <TrimmerRootAssembly Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" />
</ItemGroup>

Note that if you have an ASP.NET Core backend API, it is not the project file for it that you should update. Make sure you update the Blazor client project file with the above changes.

An example of what the updated Blazor WebAssembly project file should look like with the above changes in place has been shown below for added clarity.

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
 
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.5" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.5" PrivateAssets="all" />
    <PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" Version="8.0.5" />
  </ItemGroup>
 
  <ItemGroup>
    <TrimmerRootAssembly Include="Microsoft.Authentication.WebAssembly.Msal" />
    <TrimmerRootAssembly Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" />
  </ItemGroup>
 
</Project>

Note that your project file will likely contain additional groups of elements, other NuGet packages etc.

With the <TrimmerRootAssembly> elements in place, we are saying that the specified assemblies should be included as root assemblies for the trimming process. A Root assembly will be preserved in its entirety, serving as an entry point for the trimming process. The IL Trimmer will fully analyse a root assembly and keep all code reachable from it, ensuring that all dependent code is retained.

Testing the solution

Now, that you have updated your Blazor project file with the required changes, publish your application (e.g. to the Azure App Service) and test again by signing into the application using the Azure AD login option.

You should now find that the issue has been resolved. The additional trimming configuration that we have put in place will ensure that all essential functions related to the MSAL authentication will not be removed during the trimming process.

Note: If the issue still occurs immediately after deploying the changes, I recommend that you try running your application in an Incognito or InPrivate window to rule out a sticky cache.

Summary

In this post, I have explained the cause of the ‘”undefined” is not valid JSON’ error that may occur when using the MSAL for .NET packages in your .NET 8 project.

I shared how you can reproduce the issue locally and then looked at how to fix the issue with a simple configuration change in the Blazor project file.

If this solution worked for you please leave a comment to let me know!