𝗥𝗼𝗹𝗲-𝗕𝗮𝘀𝗲𝗱 𝗔𝗰𝗰𝗲𝘀𝘀 𝗖𝗼𝗻𝘁𝗿𝗼𝗹 𝗶𝗻 𝗕𝗹𝗮𝘇𝗼𝗿 𝗪𝗔𝗦𝗠 𝘄𝗶𝘁𝗵 𝗔𝘇𝘂𝗿𝗲 𝗔𝗗
Blazor WebAssembly runs in the browser. This means you cannot trust the client. A user can open developer tools to change memory or flip booleans. They can bypass UI restrictions easily.
Role-based access control requires two distinct layers:
Cosmetic UI Show users only the parts of the app they need. This makes the app easy to use.
Enforced Security Make sure your API rejects unauthorized requests. The API is your real security boundary.
How to set this up with Azure AD:
Step 1: Create App Roles Go to your app registration in the Azure portal. Select App roles and create a new role. Use a clear value like BasicUser. This value goes into the token.
Step 2: Assign Users Go to Enterprise applications. Find your app and select Users and groups. Assign users to your new role. Azure AD will now include this role in the access token.
Step 3: Map Roles in Blazor Blazor does not link the roles claim to .NET checks automatically. You must configure this in your setup:
options.UserOptions.RoleClaim = "roles";
Step 4: Secure the UI Use the AuthorizeView component to hide or show elements. You can also use the [Authorize(Roles = "BasicUser")] attribute on pages. This prevents users from accessing pages via direct URL entry.
Step 5: Secure the API This is the most important step. Every API endpoint must check the role independently.
[Authorize(Roles = "BasicUser")] public async Task RunReport()
The server validates the role from the token. The client cannot forge this.
The two layers have different jobs:
- Blazor WASM makes the app pleasant. It shows relevant controls to the user.
- The API makes the app secure. It assumes the client is hostile.
If you only secure the UI, your API stays open. If you only secure the API, your UI becomes confusing. You need both to build a professional app.
Source: https://dev.to/mattia_armas/role-based-access-control-in-blazor-webassembly-with-azure-ad-5gp5