Different ways of Authorization in Blazor + Redirect To Login Blazor
Base on the fact that I couldn’t find a practical tutorial of Authorization in Blazor, I have decided to write one. I hope it will help some people to solve their problems.
References:
Simple Authorization
The first basic version of authorization in Blazor is using AuthorizeView for a simple user signed in check. AuthrozieView works base on the user authentication status and we can use it in the Razor Components like this:
AuthorizeView has 3 important sections:
- Authorized Section: Only authenticated users can see this part.
- Not Authorized Section: Everybody can see this section if they are not authenticated yet.
- Authorizing Check Section: Everybody can see this in the middle of the authorizing process which is normally passing very quickly!
The second approach for simple user signed in check is using Authorize Attribute in blazor page components like this:
Be careful about using the authorize attribute, it is only working as an aspect of routing. So if you need to authorize in any child component, you should use the AuthroizeView instead.
How to Redirect To Login in Blazor by using AuthorizeView
There are different ways of redirecting unauthenticated users to login page in blazor, but one the simplest way is using AuthrozieView. For this propose the first step is defining a new razor component which is used for redirection like this:
I made my RedirectToLogin component in the area of the pages, but you can add it whatever you want. Now we should open our App.razor in the project and change the AuthorizeRouteView like this:
You can see I simply add my RedirectToLogin component in the NotAuthorized section. Now check it out, it’s working perfectly!
Role-Based Authentication
Up to now, we learned how to use AuthorizeView and Authorize attribute, but they both have some advanced options like checking user roles. Let’s dig in by an example:
As you can see I added an AuthorizeView with Roles to one of my components, and the result is if you log in by having an administrator or superuser role, you will see an extra paragraph, but it can be whatever you want like buttons, menu, etc.
We can also use Authorize Attribute for role-based authentication, but it is working on the whole of a page not just a part of it.
In this example, the whole of the page would be inaccessible for other users and the only users in the ‘admin’ and ‘superuser’ role would be allowed to see this page.
Policy-Based Authentication
This part of the article is similar to the previous one and the only thing you need to change is replacing Roles with Policy.
In this example, I just add an AuthorizeView with ‘user-management’ Policy. So whatever the user role is, if the user has the required policy he can see this paragraph, buttons, etc. Again if you want to check policy for the whole of a page, you can use Authorize Attribute like this:
Claims-based authorization is a special case of policy-based authorization.
Authentication in Code Section
What if we want to check user authentication status in code, what should we do? The answer is AuthorizationService.
Implementation :
- Add Authorization namespace and inject authorization service above the component if you are using server-side blazor like this:
- Note if you are using WebAssembly Blazor, you should add these two namespaces in your end of your _import.razor like this:
- then you can declare a Cascading Parameter to keep AuthenticationStatus, in the Microsoft example is authenticationStateTask. Then You can easily set the current user to a variable by calling .user after authenticationStateTask. Now we have the current user, let's go to check if he is signed in or not by user.identity.IsAuthenticated, then we check the role of this user so the next it would-be user.IsInRole(“role name”) and in the end, if we want to check his policy we can use AuthorizeAsync( user, “Policy Name”)).succeeded).
To sum up, I hope this article would be understandable and easy to use for people who are new in blazor. If you have any questions, please feel free to ask.
Thank you for reading and supporting.
