Unable to authorize Blazor Webassembly with Static WebApp and Azure API Management

[apsthisdev]

Describe the bug

I have a Standalone Blazor Webassembly that is authenticated with MSAL using the standard authentication/login and authentication\logout paths

It is deployed on the Azure Static Web Apps free tier right now.

       // Add Msal
        builder.Services.AddMsalAuthentication<RemoteAuthenticationState, PiRemoteUserAccount>(options =>
        {
            builder.Configuration.Bind("LoginAd", options.ProviderOptions.Authentication);

            // For linux apps specify issues expliclity
            // - https://github.com/dotnet/AspNetCore.Docs/issues/21228
            // - https://github.com/dotnet/aspnetcore/issues/25430 <PropertyGroup>
            // !--https://github.com/dotnet/aspnetcore/issues/38082 --> < PublishTrimmed > false </ PublishTrimmed >
            // </PropertyGroup >
            options.ProviderOptions.Authentication.Authority = "https://login.microsoftonline.com/common";

            options.ProviderOptions.LoginMode = "redirect";

            options.ProviderOptions.DefaultAccessTokenScopes.Add("openid");
            options.ProviderOptions.DefaultAccessTokenScopes.Add("offline_access");
            options.ProviderOptions.DefaultAccessTokenScopes.Add("profile");
            options.ProviderOptions.DefaultAccessTokenScopes.Add("email");

       }).AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, PiRemoteUserAccount, ConsumerAccountFactory>();

I define MSAL config to get the access_token with custom scopes and make the API calls through the Azure API Management portal

I want to migrate this app to the Azure Static App's build in authentication and authorization with the following IdPs

• Azure AD
• Azure B2C
• Github

I was reading the authentication and authorization documentation and found that this is supported out-of-the box with Azure Paid Tiers

However its not clear for me the following:

1. How would an exiting Blazor Webassembly migrate its authentication paths to use the /.auth/login/aad, /.auth/login/ab2c, /.auth/login/github routes
2. With the new .auth/login/*** routes how do I specify additional scopes and get the access_token
3. How do I use the access_token to call the protected web APIs that are hosted on Azure API Management or any other external protected API that authorizes with the access_token received from the IdP

Expected behavior A clear and concise description on how to call protected API (Azure Functions, Azure API Management, External API) with access_token and custom scopes.

Visual Studio 2022 Blazor Standalone Webassembly Azure Static Web APP Azure API Management

[apsthisdev]

@anthonychu , Can you please take a look and advice ?