Authentication and authorization is a useful feature in Blazor WebAssembly. Those features will help you to identify the users and show different UI to different users. In this tutorial, you will discover:
You can download the example code used in this topic on GitHub.
Authentication is the process of answering the question "Who are you?". You will need to check if a user's credentials match the credentials in the data source. The most common data source can be a table in your database. Sometimes, the data source can be Azure Active Directory, Active Directory and so on.
The users can provide their credentials by many ways, they can use biometrics, SMS OTP, ... The most common way for a user to provide their credentials is via username and password.
In this section, you will be able to answer the questions:
To implement authentication in Blazor WebAssembly, you are going to need:
AuthenticationStateProvider
.CascadingAuthenticationState
.You can use memory, local storage or session storage as the browser data storage. Once the user has been authenticated, the user's data will persist in the memory, so this browser data storage is responsible for extending the lifetime of user's data. When the user open a new tab or refresh the page, the user's data will be restored from the browser data storage.
AuthenticationStateProvider
is responsible for answering the questions "How do you recognize the user? What is the user's information?". This class is where you put your authenticate business logic to determine if a user is authenticated or not.
CascadingAuthenticationState
is responsible for passing the authentication state across the website. This is why the component has to be the root component. CascadingAuthenticationState
does the work in the background, and you don't need to modify or config anything in this component.
When the user initial first load by refreshing the website or navigate to your website, the AuthenticationStateProvider
will look for stored credentials in the browser data storage. If found and valid, AuthenticationStateProvider
will use that credentials to create a ClaimsPrincipal
to mark the user as authenticated. Otherwise, the user stays unauthenticated. The following image illustrates this phase:
When a user provided their credentials, the AuthenticationStateProvider
will process the data. First, AuthenticationStateProvider
checks if the credentials are valid. If the credentials are valid, AuthenticationStateProvider
stores the credentials to the browser data storage, create a ClaimsPrincipal
and call NotifyAuthenticationStateChanged
to notify all the components to update their UI. The following image illustrates this flow:
Authorization is the process of answering the question "Are you eligible for something?" or "Are you eligible to do something?". To answer those questions, you first need to know the answer to the question "Who are you?". In the other words, you need to have authentication first, then you can implement authorization. In the authentication process, you will store the user's authentication data like their roles, their permissions, etc... Authorization is the process of composing the user's authentication data to determine if a user can do/see something or not.
In this section, you will be able to answer the questions:
To implement authorization in Blazor WebAssembly, you are going to need:
Claim
.A Claim
is a class to store authentication data, Claim
has many properties, 2 most important properties that you will use most of the time to authorization is Type
and Value
. Both properties are string
. The Type
will indicate which authentication data of the Claim
is. For example, you can store the user's age in the Claim
like this new Claim("Age", "17")
. There are also some predefined Type
in the System.Security.Claims.ClaimTypes
, those default types will help you to interact with the built-in authorization rules.
An authorization rule is a set of conditions that a user must pass in order to satisfy the authorization rule. For example, an authorization rule can require a user belongs to a group, older than 18, and have a specific rule. If any condition is not passed, the user cannot access the resource that is protected by the authorization rule.
Authorizing resource data is the data from the resource you are authorizing. This data will be tested against the Claim
in order to make a resource accessible for a user or not. For example, a convenient store sells many products, one of the product is alcohol which require the buyer to be over 18, all other products do not have age restriction. In this case, 18 is the authorizing resource data.
A part that the authorization process requires is a list of Claim
which can only obtained after the authentication process. The Claim
can be found in ClaimsPrincipal.Claims
. The ClaimsPrincipal
is stored in the memory, so if the user opens a new tab or refreshes the website, you need to recreate it from the browser storage.