@attribute [AllowAnonymous] in Blazor server-side component has no effect

Question

I have created a fresh Blazor server-side project with .NET Core 3.0 and have closed down the application for non-authenticated users.

I am now trying to allow anonymous access to Index.razor component by placing [AllowAnonymous] at the top of the file. This however, does not seem to do anything.

Scenario

After using the default Blazor template "WeatherForecast" I added the following to Startup.cs

services.AddMvcCore(options =>
{
    var policy = new AuthorizationPolicyBuilder().RequireAuthenticatedUser().Build();
    options.Filters.Add(new AuthorizeFilter(policy));
});

This piece of code blocks all requests toward my application if the user is not authenticated.

After adding that piece of code I would like to open up the default Index.razor component for non-authenticated users. I do that by adding @attribute [AllowAnonymous] to Index.razor:

@page "/"
@attribute [AllowAnonymous]

<h1>Hello, world!</h1>

Welcome to your new app.

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
    <CascadingAuthenticationState>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </CascadingAuthenticationState>
</NotFound>
</Router>

Expected result

When running my application non-authenticated users would be allowed to visit the index page at https://localhost:XXXX

Actual result

My users are forwarded to my OpenIdConnect URI.

Answer 1

You need to think of entire Blazor app as a single html page in terms of ASP.NET Core. In other words, Blazor app is hosted in single html page. That's why it is called Single Page Application framework :)

If user does not have access to that single page, any Blazor code does not matter.

---

@attribute [AllowAnonymous] only works within Blazor app, but services.AddMvcCore(options => options.Filter.Add(...)) disallows users to access the single page that hosts your Blazor App.

It's the same as with any other SPA framework. If you have a React/Angular/Vue app hosted in a HTML file, you need to make sure users have access to the HTML file.

I think you will have to do following:

1. Modify to ASP.NET Core authorization to authorize your other Controller/Pages, but allow anonymous access to your entire blazor app (all other routes).

   I haven't tried, but something like this instead auhtorization filter

   app.MapRazorPages().RequireAuthorization();
   app.MapControllers().RequireAuthorization();
   
   app.MapRazorComponents<App>().AllowAnonymous()
      .AddInteractiveServerRenderMode()
   

2. Modify you Blazor app to authorize all pages except index.