Azure AD and Blazor WASM with SSO

71185955 20 Reputation points


I have a .NET6 Web API with a hosted Blazor WASM client. This pair use azure AD for authentication and authorization. I'm trying to get the user to be authenticated and authorized with SSO, more precisely he need not to enter his usernames and passwords but browser log him in automatically.

Now my application almost beahives like that but after I open it and the index page loaded the app is redirected to Azure AD (a white screen for automatic login) and jump back to the index page.

It can be solved when I open the app it log the user automatically in so the user do not notice this process just when his name is showed at the top right corner on the page, please?

The client Program.cs

builder.Services.AddHttpClient("ServerAPI", client => client.BaseAddress = new Uri($"{builder.HostEnvironment.BaseAddress}api/"))

builder.Services.AddMsalAuthentication<RemoteAuthenticationState, CustomUserAccount>(options =>
	builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
	options.UserOptions.RoleClaim = "appRole";
	options.ProviderOptions.LoginMode = "redirect";
.AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, CustomUserAccount,

I use these three lines in Razor pages:

@using Microsoft.AspNetCore.Authorization

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

@attribute [Authorize(Roles = "ABC")]

This is the server Program.cs:

				.AddMicrosoftIdentityWebApi(options =>
					builder.Configuration.Bind("AzureAd", options);
					options.TokenValidationParameters.RoleClaimType =
				options => { builder.Configuration.Bind("AzureAd", options); });
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,213 questions
Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
17,587 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Bruce ( 49,051 Reputation points

    first you need to understand what is happening. blazor uses a version of the msal javascript to get the access token. to get the token the msal js library must:

    1. msal library loads
    2. msal generates a verification key (PKCE)
    3. msla redirects browser to the azure ad oauth server login
    4. the azure login server logins and redirects back to client
    5. the msal library loads
    6. msal parses the url to get verification tokens
    7. msal call oauth server with verification tokens to get actual tokens
    8. msal stores the token in session or local storage depending on configuration

    now you add blazor.

    1. the blazor init js loads blazor wasm
    2. the blazor app config phase loads the msal library
    3. the blazor app detects authorization is required and call the msal library to get a token
    4. msal library starts at step 2 above.

    you could speed up by calling msal directly. your hosting page could call msal js to get token before loading the blazor wasm. then blazer could call msal to get token.

    note: in the past an iframe could be used for the login, but most oauth server longer support this.