Azure AD and Blazor WASM with SSO

Question

Hi,

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/"))
	.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();


builder.Services.AddMsalAuthentication<RemoteAuthenticationState, CustomUserAccount>(options =>
{
	builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("api://.../API.Access");
	options.UserOptions.RoleClaim = "appRole";
	options.ProviderOptions.LoginMode = "redirect";
})
.AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, CustomUserAccount,
	CustomAccountFactory>();

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:

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
				.AddMicrosoftIdentityWebApi(options =>
				{
					builder.Configuration.Bind("AzureAd", options);
					options.TokenValidationParameters.RoleClaimType =
						"http://schemas.microsoft.com/ws/2008/06/identity/claims/role";
				},
				options => { builder.Configuration.Bind("AzureAd", options); });

Answer 1

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.