Blazor WebAssembly: builder.Services.AddMsalAuthentication throws Exception => Cannot read property 'join' of undefined

Check that the MSAL script is in your index page:

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

This fixed the same issue for me, when I was retro-fitting MSAL into an existing Blazor WASM app that was referencing the JS file:

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

If this JS ref exists, remove it and replace with the MSAL version.

Try something like this...

builder.Services.AddMsalAuthentication(options =>
{
    ...

    options.ProviderOptions.AdditionalScopesToConsent.Add(
        "https://graph.microsoft.com/Mail.Send");
    options.ProviderOptions.AdditionalScopesToConsent.Add(
        "https://graph.microsoft.com/User.Read");
}

https://learn.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/additional-scenarios?view=aspnetcore-3.1#request-additional-access-tokens

Hope it helps!

EDIT 1: My client Program.cs

using System.Net.Http; using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Add the below reference in Index.html page

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddHttpClient("BlazorWasmAADMsal.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
                .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

            // Supply HttpClient instances that include access tokens when making requests to the server project
            builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorWasmAADMsal.ServerAPI"));

            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.DefaultAccessTokenScopes.Add("api://XXXXXXXXXXXXXXXXXX/API.Access");
            });

            await builder.Build().RunAsync();
        }

EDIT 2: Did some minor changes. The working project has been uploaded here. Successful login screen shot added in answer for reference. :-)

EDIT 3:

Azure Active Directory (AAD) Microsoft Graph API scopes are required by an app to read user data and send mail. After adding the Microsoft Graph API permissions in the Azure AAD portal, the additional scopes are configured in the Client app.

Last time i missed to enabled below lines, I have enabled it in Program.cs

  builder.Services.AddMsalAuthentication(options =>
       {
options.ProviderOptions.DefaultAccessTokenScopes.Add("https://graph.microsoft.com/User.Read");
     }

It was a bizarre error, never expected and had seen it.

The reference of AuthenticationService.js in Index.html was not correct. I have corrected it to be...

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

I have also uploaded the latest code here

The IAccessTokenProvider.RequestToken method provides an overload that allows an app to provision an access token with a given set of scopes.

In a Razor component, you can write something like below:

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject IAccessTokenProvider TokenProvider

...

var tokenResult = await TokenProvider.RequestAccessToken(
    new AccessTokenRequestOptions
    {
        Scopes = new[] { "https://graph.microsoft.com/Mail.Send", 
            "https://graph.microsoft.com/User.Read" }
    });

if (tokenResult.TryGetToken(out var token))
{
    ...
}

AccessTokenResult.TryGetToken returns:

true with the token for use. false if the token isn't retrieved.

Hope it helps you.