Search⌘ K
AI Features
Home
Courses
Securing Blazor Applications with Auth0

Protect the Blazor WebAssembly Application UI

Discover how to secure the Blazor WebAssembly application UI by enabling authorization support, creating access control components for login and logout, and protecting pages from unauthorized users. Learn to integrate Auth0 authentication with key components to manage user access and enhance application security.

We'll cover the following...

We’ll learn how to grant access only to authenticated users in the Blazor WebAssembly application.

Enable authorization support

To start, we need to enable support for authorization in our Blazor WebAssembly application. We can do this by using a few Razor components.

Let’s add the references to the needed namespaces for authorization support. Open the _Imports.razor file in the Client folder and add the two namespace references, as highlighted in the following code snippet:

C#
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Authorization 
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using MyBlazorWasmApp.Client
@using MyBlazorWasmApp.Client.Shared

We added the following two lines:

  • Line 3: This is a reference to the Microsoft.AspNetCore.Components.Authorization namespace, which makes authorization-related components available to our application.
  • Line 4: This is a reference to the Microsoft.AspNetCore.Authorization namespace, which makes ASP.NET authorization support available to our application.

Now, let’s replace the current content of the App.razor file in the Client folder with the following code:

HTML
<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <p>Determining session state, please wait...</p>
                </Authorizing>
                <NotAuthorized>
                    <h1>Sorry</h1>
                    <p>You're not authorized to reach this page. You need to log in.</p>
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Let’s ...