Authentication and authorization
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:
- What is authentication?
- How authentication works?
- What is authorization?
- How authorization works?
You can download the example code used in this topic on GitHub.
What is authentication?
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.
How authentication works?
In this section, you will be able to answer the questions:
- How many parts involved?
- Website initial loading phase.
- User provided credential flow.
How many parts involved in authentication?
To implement authentication in Blazor WebAssembly, you are going to need:
- A browser data storage.
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.
Website initial loading phase
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:
User provided credential flow
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:
What is authorization?
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.
How authorization works?
In this section, you will be able to answer the questions:
- How many parts involved?
- The transition between authentication to authorization.
How many parts involved in authorization?
To implement authorization in Blazor WebAssembly, you are going to need:
- A list of
Claim. - Authorization rule.
- Authorizing resource data (optional).
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.
The transition between authentication to authorization
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.
