An error occurs when Blazor WASM is routed through Azure Front Door

Question

I have implemented Blazor WASM app with AAD refer to the URL below.

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/hosted-with-azure-active-directory?view=aspnetcore-7.0

This worked fine, but An error occured when I created a Azure Front Door and I requested from it.

An error massage is below.

There was an error trying to log you in: ''

When I click 'Log in', I get the following error.

There was an error trying to log you in: 'window.crypto.randomUUID is not a function.
(In 'winod.crypto.randomUUID()','window.crypto.randomUUID' i undefined)'

Do I need to change Azure Front Door or any settings?

Answer 1

@Anonymous

I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this! Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to "Accept " the answer.

Issue:

Blazor WASM app with AAD throws error when user tries to hit login after creating a front door

There was an error trying to log you in: ''

When click 'Log in', I get the following error.

There was an error trying to log you in: 'window.crypto.randomUUID is not a function.

(In 'winod.crypto.randomUUID()','window.crypto.randomUUID' i undefined)'

Solution:

Login mode value to be set "redirect". The framework defaults to pop-up login mode and falls back to redirect login mode if a pop-up can't be opened. Configure MSAL to use redirect login mode by setting the LoginMode property of MsalProviderOptions to redirect:

The default setting is popup, and the string value isn't case-sensitive.

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

Thanks,

Akshay Kaushik

Please "Accept the answer" (Yes), and share your feedback if the suggestion answers you’re your query. This will help us and others in the community as well.