Role Based Authorization In Blazor

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
            
    services.AddDefaultIdentity<IdentityUser>()
        .AddRoles<IdentityRole>()
        .AddEntityFrameworkStores<ApplicationDbContext>();
        
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();
    services.AddSingleton<WeatherForecastService>();
}

We have created a new user “[email protected]” as a username. We can create one more user “[email protected]”. Currently, no roles are created. We can add two roles “Admin” and “Normal” into the table “AspNetRoles”.

We can add user roles to the table “AspNetUserRoles”. We need a user ID along with a role id. You can copy the corresponding user ID from the AspNetUsers table.

I have added the first user with an admin role id and the second user with a normal role ID.

We can create two Razor components “Admin” and “Normal” inside the “Pages” folder. The Admin component will be accessible for admin users and the Normal component will be accessible for both admin and normal users. We must decorate these components with the Authorize attribute later.

We can create a second component “Normal” in the same way.

Modify the shared component “NavMenu” with below changes. So that, these new components will be visible only for authorized users.

NavMenu.razor

<p class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorAuth</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</p>

<p @class="NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <AuthorizeView Roles="Admin">
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="admin">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Admin Component
                </NavLink>
            </li>
        </AuthorizeView>
        <AuthorizeView Roles="Admin, Normal">
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="normal">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Normal Component
                </NavLink>
            </li>
        </AuthorizeView>
    </ul>
</p>

@code {
    bool collapseNavMenu = true;

    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

I have modified the above component with a Blazor attribute “AuthorizeView” along with the “Roles” property. First NavLink is assigned with Admin roles and second NavLink is assigned with Admin and Normal roles. Hence, this link will be visible for both Admin and Normal users. Run the application again and log in as an admin user.

We can notice that the navigation links for the Admin component and Normal component are visible for this admin user. If you log in with a normal user, only the Normal component link will be visible. You can notice one important thing even without login, these two components are accessible via the direct page route. We have not yet restricted these components. We can use the “Authorize” attribute to restrict these components for authorized users.

We can modify the Admin component with the below changes.

We have added the Authorize attribute along with the Roles property in this component.

Admin. razor

@page "/admin"
@attribute [Authorize(Roles = "Admin")]
<h3>Admin Component</h3>
<p>This page is only accessible to users with 'Admin' roles</p>
@code {
}

We can modify the Normal component with the below changes.

Normal. razor

@page "/normal"
@attribute [Authorize(Roles = "Admin, Normal")]
<h3>Normal Component</h3>
<p>This page is only accessible to users with 'Admin' or 'Normal' roles</p>
@code {
}

In the above component, we have decorated the Authorize attribute with both Admin and Normal roles.

Run the application again as a normal user and try to access the Admin component by directly entering the route in the browser.

You will get an unauthorized access error message on the page. We have successfully implemented role-based authorization in two components.

Conclusion

In this post, we have seen how to create a Blazor application with individual user account authentication. We have created all seven tables for the identity framework using entity framework database migration. Later, we added two different identity users by clicking the register button in the application. We have added two roles Admin and Normal manually to the table. We have also added user roles into the other table with the corresponding user id and role id. We have added an authorization attribute in the NavMenu component to control the visibility of components with corresponding roles. We have decorated Admin and Normal components with Authorize attribute and Roles property to restrict unauthorized access to these components. This is only a basic application to show authentication and authorization in the Blazor app. I will create more real projects with authentication and custom authorization in the forthcoming days. Please feel free to share your valuable feedback about this post.