Authentication and authorization overview

🟨 Slightly different to Blazor Server

Authentication and authorization play a vital role in maintaining the security and privacy of web applications and their users in web development. In other words, implementing authentication and authorization enables you to display a unique user interface for each user based on their role. This tutorial will provide you with an overview of authentication and authorization in Blazor, covering the following topics:

• What is authentication?
• How does authentication work in Blazor?
• What is authorization?
• How does authorization work in Blazor?
• Key differences between Blazor WebAssembly and Blazor Server.

You can download the example code used in this topic on GitHub.

What is authentication?

Authentication refers to the process of confirming the identity of a user or system before allowing access to a resource or service. It is essentially the act of proving that you are who you claim to be.

To authenticate a user, their credentials must be checked against a data source, which is commonly a database table. However, other sources such as Azure Active Directory or Active Directory can also be used.

Users can provide their credentials through various means, including biometrics or SMS one-time passwords. However, the most common method is through a combination of username and password.

How does authentication work in Blazor?

To understand how authentication works in Blazor, you need to have knowledge about AuthenticationStateProvider and CascadingAuthenticationState, as well as how to use browser storage to store user credentials. Moreover, it is important to understand the 3 primary credential flows, which include the login flow, user revisit website flow, and the logout flow.

Understanding the Elements of Authentication

Implementing authentication in Blazor requires several key elements. These include:

• Browser data storage
• AuthenticationStateProvider
• CascadingAuthenticationState

Browser data storage can be achieved through memory, local storage, or session storage. This storage is responsible for maintaining the user's data and ensuring that it persists even when the user opens a new tab or refreshes the page. Local storage is recommended for this purpose.

The AuthenticationStateProvider is responsible for managing user authentication, determining whether a user is logged in or not. It contains your authentication business logic and is responsible for notifying other elements about the user's authentication status.

Finally, CascadingAuthenticationState is responsible for passing the authentication state across the website. As the root component, it operates seamlessly in the background, and there is no need to modify or configure it.

Login flow

When a user logs in, the AuthenticationStateProvider component processes the credentials using the following flow:

1. The AuthenticationStateProvider checks whether the credentials provided by the user are valid. Typically, this involves sending a request to the API to verify the credentials, and the API will respond with a JWT token.
2. If the credentials are valid, the AuthenticationStateProvider stores them in the browser data storage. It then creates a ClaimsPrincipal and calls the NotifyAuthenticationStateChanged method to inform all components to update their user interface.

The diagram below illustrates this authentication flow:

Users revisit website flow

When users revisit your website, the AuthenticationStateProvider checks for stored credentials in the browser data storage that were previously validated during the login process. If the credentials are still valid, the AuthenticationStateProvider uses them to create a ClaimsPrincipal, indicating that the user is authenticated. If the credentials are no longer valid or not found, the user remains unauthenticated. The following image illustrates this process:

Logout flow

When a user logs out of your website, the AuthenticationStateProvider clears the browser data storage and calls NotifyAuthenticationStateChanged to notify all components to update their UI. The following image illustrates this process:

What is authorization?

Authorization is the process of determining whether a user or entity is eligible to access a particular resource or perform a specific action based on their identity, role, or permission level. To answer the question of eligibility, you first need to authenticate the user to determine "who they are" and store their authentication data, such as roles and permissions. Authorization then involves composing the user's authentication data to determine if they have the necessary permissions or rights to perform the requested action or access the resource. In other words, authentication comes before authorization, and authorization uses the user's authentication data to decide if they are allowed to do something or not.

How does authorization work in Blazor?

To understand how authorization works in Blazor, it is essential to have knowledge about the Identity model, which includes ClaimsPrincipal, ClaimsIdentity, and Claim. Additionally, you need to be familiar with authorization rules and authorize resource metadata. This understanding will enable you to properly configure authorization policies, which define the rules for granting or denying access to resources or operations based on the user's role, permission level, or other criteria.

The Identity model

The Identity model is a framework that provides a set of classes and interfaces for managing user authentication and authorization in .NET applications, including Blazor. The Identity model defines a standard way to represent and manage user identity information, including their user ID, username, password, and any additional information or claims that may be associated with their identity.

The key elements of the Identity model include:

1. ClaimsPrincipal: Represents the user's identity and contains a collection of claims, which are pieces of information about the user such as their name, role, or email address.
2. ClaimsIdentity: Represents a set of claims associated with a specific identity and provides methods for adding or removing claims.
3. Claim: Represents a single piece of information about the user, such as their name, email, or role.

Together, these elements form the foundation of the Identity model, which can be used to implement authentication and authorization mechanisms in Blazor applications. By using the Identity model, developers can ensure that user identity and access control are managed consistently and securely across their application.

Authorization rule

An authorization rule consists of a set of conditions that a user must meet to access a protected resource. These conditions may include requirements such as belonging to a specific group, having a particular role, or meeting certain age criteria. If a user does not satisfy all the conditions of the authorization rule, they will be denied access to the resource.

Authorization resource metadata

Authorization resource metadata refers to the specific data or information associated with a resource that is used to make authorization decisions. This metadata can include various attributes, such as a user's role, permissions, and other relevant information. When a user attempts to access a protected resource, the authorization system checks the user's credentials and matches them against the metadata associated with the resource.

For example, consider a convenience store that sells various products. One of the products is alcohol, which has an age restriction of 18 years or older. Other products may have different age restrictions or no restrictions at all. In this case, the age requirement of 18 years is the authorizing resource metadata that is used to control access to the alcohol product.

Key differences between Blazor WebAssembly and Blazor Server

Blazor WebAssembly and Blazor Server differ in how they handle authentication. In Blazor WebAssembly, authentication is typically performed in the API, which then returns a JWT to identify the user.

While Blazor Server can use a similar flow, it is not considered the optimal scenario. Blazor Server is best used to directly access a database without relying on JWT authentication.