fix: FluentIcon fails to load the SVG when using the default authorization policy from Azure AD as global fallback policy

🐛 Bug Report

The component FluentIcon fails to load the SVG when using the default authorization policy as a global fallback policy. Microsoft.Identity.Web (based on Azure Active Directory) is the backend used for authentication and where the issue is currently happening to me.

💻 Repro or Code Sample

With the web application built and run as next:

// Program.cs
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
using Microsoft.Fast.Components.FluentUI;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.AspNetCore.Authorization;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));
builder.Services.AddControllersWithViews()
    .AddMicrosoftIdentityUI();

builder.Services.AddAuthorization(o =>
{
    // This sets the default policy (requiring an authenticated use only) for
    // every route which doesn't specify any authorization or anonymous filter.
    o.FallbackPolicy = o.DefaultPolicy;
});

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor()
    .AddMicrosoftIdentityConsentHandler();

builder.Services.AddHttpClient();
builder.Services.AddFluentUIComponents();

var app = builder.Build();

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapControllers();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

And with any usage of a valid Fluent icon:

@* Pages/Index.razor *@
@page "/"

<FluentIcon Name="@FluentIcons.Add" />

🤔 Expected Behavior

It should render the icon, just as we would expect.

😯 Current Behavior

After some seconds of trying to load the SVG file for the icon, the authorization pipeline redirects to the AD instance with the following error:

We can’t sign you in. JavaScript is required to sign in. Your browser either does not support JavaScript or it is being blocked. Enable JavaScript in your browser or use one which supports it.

💁 Workaround

Aside from removing the default policy as the fallback policy and setting up authorization manually for every view.

Also, I could fix it by providing the default policy only to razor pages on the Program.cs:

builder.Services.AddRazorPages()
    .AddMvcOptions(o =>
    {
        var policy = new AuthorizationPolicyBuilder()
            .RequireAuthenticatedUser()
            .Build();
        o.Filters.Add(new AuthorizeFilter(policy));
    });

And it can have a similar solution to what I intended initially (at least, inside my context.

However, I think the library itself should mark its static files in the icons folder to allow anonymous requests, or at least, optionally be configurable easily that way. This should be solvable out of the box as the Program.cs shown above is mostly based on the current template of Blazor in .NET 7 when using SingleOrg authentication option.

🌍 Your Environment

• OS & Device: Windows 11
• Browser: Google Chrome
• .NET Version: 7.0.0
• FAST Versions where this happens: 1.6.0 and 2.0.0-rc1
• Microsoft.Identity.Web Version: 1.16.0

[smartinick]

i had a similar issue with a slightly different problem/solution, so i want to update this thread for any other readers:

In my case i used the blazor server app example without fluent/fast,… but with the builtin bootstrap. then i added userdetection in program.cs like this:

        builder.Services.AddAuthentication(NegotiateDefaults.AuthenticationScheme)
                .AddNegotiate();
            builder.Services.AddAuthorization(options =>
            {
                options.FallbackPolicy = options.DefaultPolicy;
            });

which leads my program to know the user, check against windows-ad for group-memberships,… but NOT to have the user to provide login data. - sort of single-signon. and the 2 lines you discussed above are commented out, not used in my scenario (well, so far…):

        //app.UseAuthorization(); //not needed for getting userid
        //app.UseAuthentication(); //force login-dialog

when i migrated the project manually to this fast/fluent lib, i had the problem that the fluenticons, e.g.

<FluentButton Appearance="Appearance.Neutral"><FluentIcon Slot="start" Name="@FluentIcons.ArrowCircleLeft" /> Button with icon in ‘start’ slot</FluentButton> (just from the samples page…) did not display the icons.

after some hours i stumbled over this issue, commented out the addauth block above and the icons worked. using the addauth again, i came to this version:

        app.UseAuthorization(); //not needed for getting userid, but needed for fluent icons to display
        //app.UseAuthentication(); //force login-dialog

which still does not trigger the login-dialog, and also displays the fast-fluent-icons…

So what i’d suggest from this post: please add this details to the readme to safe others some time… or fix it this issue 😉

[vnbaaij]

Consider this solved by adding the UseAuthentication and UseAuthorization lines.