External system login does not work when publishing Blazor WASM to Azure

[maxim-shlain]

Hi!
When I publish my simple .net 5 blazor web assembly to Azure app service, the external login stops working. Please advise.

Details:

Business requirement

Allow users to login to my system without creating account - login with Google, Microsoft, Facebook etc.

I've built a really simple system using .NET 5 Blazor WASM application with VS2019, 'Individual Accounts' as authentication type, configured for HTTPS, hosted by ASP.NET Core and marked 'Progressive Web Application':

After that, i've installed the packages

• Microsoft.AspNetCore.Authentication.MicrosoftAccount
• Microsoft.AspNetCore.Authentication.Google

And configured my keys as described in MSFT documentation:

public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddLogging(c => c.AddSerilog());

            services
                .AddDbContext<ApplicationDbContext>(
                        options => options.UseSqlite(Configuration.GetConnectionString("DefaultConnection"))
                );

            services.AddDatabaseDeveloperPageExceptionFilter();

            services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = false)
                .AddEntityFrameworkStores<ApplicationDbContext>();

            services.AddIdentityServer()
                .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

            services.AddAuthentication()
                .AddIdentityServerJwt()
                .AddMicrosoftAccount(options =>
                {
                    IConfigurationSection microsoftAuthenticationConfiguration = Configuration.GetSection("Authentication:Microsoft");

                    options.ClientId = microsoftAuthenticationConfiguration["ClientId"];
                    options.ClientSecret = microsoftAuthenticationConfiguration["ClientSecret"];

                    options.AuthorizationEndpoint = "https://login.microsoftonline.com/consumers/oauth2/v2.0/authorize";
                    options.TokenEndpoint = "https://login.microsoftonline.com/consumers/oauth2/v2.0/token";
                })
                .AddGoogle(options =>
                {
                    IConfigurationSection googleAuthNSection = Configuration.GetSection("Authentication:Google");

                    options.ClientId = googleAuthNSection["ClientId"];
                    options.ClientSecret = googleAuthNSection["ClientSecret"];
                })
            ;

            services.AddControllersWithViews();
            services.AddRazorPages();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseMigrationsEndPoint();
                app.UseWebAssemblyDebugging();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseBlazorFrameworkFiles();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseIdentityServer();
            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllers();
                endpoints.MapFallbackToFile("index.html");
            });
        }
    }

When I run the app on my dev machine, everything works fine, external login works fine in edge and chrome - as expected

The Problem

When I deploy my system to Azure App service (with secrets configured properly), the system starts and works almost fine. When I try to log in with external user, I'm getting following screen (mind the URL):

The only log error record that I can connect with the problem is attached below, but I cannot find any actionable fix , please help

021-01-06 10: 04: 47.284 +00: 00 [INF] 
{
    "ClientId": "XXXXXX.Web.Client",
    "ClientName": "XXXXXX.Web.Client",
    "RedirectUri": "https://xxxxxxxxxxx.azurewebsites.net/authentication/login-callback",
    "Endpoint": "Authorize",
    "SubjectId": null,
    "Scopes": "XXXXXX.Web.ServerAPI openid profile",
    "GrantType": "authorization_code",
    "Error": "login_required",
    "ErrorDescription": null,
    "Category": "Token",
    "Name": "Token Issued Failure",
    "EventType": "Failure",
    "Id": 2001,
    "Message": null,
    "ActivityId": "80008dbb-0002-e900-b63f-84710c7967bb",
    "TimeStamp": "2021-01-06T10:04:47.0000000Z",
    "ProcessId": 11048,
    "LocalIpAddress": "x.x.x.x:443",
    "RemoteIpAddress": "y.y.y.y",
    "$type": "TokenIssuedFailureEvent"
}