Azure AD Authentication Error with Blazor wasm

[Ryu-Sch]

Describe the bug

Fails when trying to log in to a Microsoft account with a published blazor wasm application using DotNet 6.
The error states as follows :
"There was an error trying to log you in.
Error: Cannot read properties of undefined (reading 'toLowerCase')"

When trying to to log in while in debug mode, it works fine.
The DotNet 5 application logs in the user successfully in both debug mode and with the published application.

To Reproduce

Create a blazor wasm application with DotNet 6 that uses Microsoft Graph authentication. Publish the application, then try signing in from the hosted application.

The public repository:
https://github.com/Ryu-Sch/GraphLogin

Further technical details

• ASP.NET Core version: 6.0.100-rc.2

dotnet --info Output

Host (useful for support):
  Version: 6.0.0-rc.2.21480.5
  Commit:  6b11d64e7e

.NET SDKs installed:
  3.1.414 [C:\Program Files\dotnet\sdk]
  5.0.102 [C:\Program Files\dotnet\sdk]
  5.0.104 [C:\Program Files\dotnet\sdk]
  5.0.402 [C:\Program Files\dotnet\sdk]
  6.0.100-rc.2.21505.57 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.0-rc.2.21480.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0-rc.2.21480.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.0-rc.2.21501.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

[IGx89]

Just encountered this exact same issue, using .NET 6 final. Thanks for writing this up! Going to have to put a stop to our .NET 6 migration until this is resolved.

We're using Azure AD for authentication.

[IGx89]

Did a little digging into the issue. The error comes from this line, due to loginMode being null: https://github.com/dotnet/aspnetcore/blob/v6.0.0/src/Components/WebAssembly/Authentication.Msal/src/Interop/AuthenticationService.ts#L197

We're setting loginMode so it shouldn't be null. Problem is due to the entire _settings object (AuthorizeServiceConfiguration) missing a lot of properties. The cause of that appears to be something in the trimming logic in .NET 6 that's dropping those properties -- if I set <PublishTrimmed>false</PublishTrimmed> then my app works when published. That's far from an ideal solution (adds 25 MB to the size of my app!) but is better than being completely broken at least.

[NateDuff]

In an effort to keep publish trimming enabled - I got around the immediate "Cannot read properties of undefined (reading 'toLowerCase')" error by running something similar to the snippet below after running dotnet publish:

$jsPath = "$(Build.ArtifactStagingDirectory)/client/wwwroot/_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"
$jsContent = Get-Content $jsPath -Raw
Set-Content $jsPath -Force -Value $jsContent.Replace(".loginMode.toLowerCase", "?.loginMode?.toLowerCase")

But like @IGx89 said, that error was a sign of a larger problem so I would not recommend pursuing this workaround.

The next error seems to be a missing client ID in the redirect URL:

Application with identifier 'null' was not found in the directory

Really hoping this gets resolved before .NET 7! 🙏

[albx]

Same for me using .NET 6 (GA), setting <PublishTrimmed>false</PublishTrimmed> resolve the error. Any updates about how to solve it?

[ddfxraven]

@albx @IGx89 Another workaround so you don't have to trim the whole publish (works for wasm and hosted wasm)

Under program.cs in client project set the login mode under msal authentication
builder.Services.AddMsalAuthentication(options => { builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication); options.ProviderOptions.DefaultAccessTokenScopes.Add("xxxx/API.Access"); options.ProviderOptions.LoginMode = "redirect"; // set preferred loginmode here });

Then in the csproj file for the client project below the ItemGroup with all your packagereferences add this itemgroup

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

Delete your client project folders bin and obj, clean the solution, close and open VS and then rebuild and publish.
If you don't do those last steps you'll still receive the issue, but only has to be done once.

[AlbertoPa]

I have the same issue in a hosted Blazor app which uses AD B2C. Using

<PublishTrimmed>false</PublishTrimmed>

works but what proposed by @ddfxraven does not in my app and an exception is thrown in the console saying that loading MSAL was blocked.

[apsthisdev]

Facing the same issue with Blazor Webassembly .NET6 deployed on Linux via GitHub pages.

<PublishTrimmed>false</PublishTrimmed> was not sufficient, had to follow additional https://github.com/rafgraph/spa-github-pages for MSAL to work..

[limitx3m]

Could you please me be more specific to the solution you found? Having the same issues as everyone above.

[apsthisdev]

@limitx3m GitHub Pages is Linux hosted so for SPA and Azure AD to work correctly I had to make changes at multiple places,

1. Exclude MSAL from trimming Azure AD Authentication Error with Blazor wasm #38082

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

2. For linux apps specify issuer explicitly again Specify the issuer explicitly when deploying to App Service on Linux AspNetCore.Docs#21228
   options.ProviderOptions.Authentication.Authority = "https://login.microsoftonline.com/common";

3. Add 404.html to your wwwroot and then redirect to your page, this is needed as Github Pages navigation expects explicit pages for each Blazor navigation so if a page e.g SPA frontend route is not found, GitHub will reroute to your 404.html and then you reroute from there to your Blazor page. This is not ideal but the only workaround that works. See https://github.com/rafgraph/spa-github-pages how to make this work, its straight forward

4. If you are building a progressive web app then you need follow this as well in wwroot\service-worker.published.js

With this we have deployed multiple Blazor WebAssembly SPA to GitHub pages, including Progressive Apps

[ayoussef-insight]

@albx @IGx89 Another workaround so you don't have to trim the whole publish (works for wasm and hosted wasm)

Under program.cs in client project set the login mode under msal authentication builder.Services.AddMsalAuthentication(options => { builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication); options.ProviderOptions.DefaultAccessTokenScopes.Add("xxxx/API.Access"); options.ProviderOptions.LoginMode = "redirect"; // set preferred loginmode here });

Then in the csproj file for the client project below the ItemGroup with all your packagereferences add this itemgroup

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

Delete your client project folders bin and obj, clean the solution, close and open VS and then rebuild and publish. If you don't do those last steps you'll still receive the issue, but only has to be done once.

This workaround worked for me

[javiercn]

We believe this was addressed recently as part of #43954. A fix will be available in 7.0-rc2.

If you still run into this issue after updating, please let us know and we'll reopen the issue.

[abonniko]

Hi, I am having this exact same issue and tried everything mentioned here.

I created a new Blazor Webassembly project as a poc with Identity scaffolded.
Works fine locally, when the browser opens it redirects to the Microsoft login page.

However, when I publish to Azure blob storage with static web app activated this error appears.
I added the TrimmerRootAssembly tag to the csproj file, deleted bin and obj folders, cleaned solution, rebuild the project, ...
The error keeps appearing: There was an error trying to log you in: 'Cannot read properties of undefined (reading 'toLowerCase')'

[javiercn]

@abonniko can you try with the latest 7.0 RC2 release?

[abonniko]

Hi @javiercn, yes it works when I target net7.0, thank you.