Authenticatiwng and Authorizing Users in Blazor

All the features we have built and learned about so far are for any user who loads the app in the browser. Well, in real-world applications, that’s not always the case. In most of the scenarios you will face, some features require the app to know who is using it, and in other cases, the full app cannot be used until it knows who is using it.

In this chapter, we are going to learn about authentication and how it happens on the client side, what authentication means, and how we can implement it in Blazor WebAssembly.

We will explore the Blazor authentication library in depth, alongside most of its capabilities that enable you to build enterprise-level single-page applications. To understand everything in detail, we will build a custom authentication flow. After building the core, we will take advantage of the authentication library to restrict access to some pages to only logged-in users, show or hide partial content in the...

Technical requirements

The Blazor WebAssembly code used throughout this chapter is available in the book’s GitHub repository in the Chapter 9 folder: https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_09/Chapter_Content.

The API project we used in Chapter 8 will also be needed, as more endpoints have been added to it. You can find the project in the API folder in the GitHub repository folder for Chapter 9: https://github.com/PacktPublishing/Mastering-Blazor-WebAssembly/tree/main/Chapter_09/API.

In the last section, we will introduce Azure AD and AD B2C. If you are curious about using them with Blazor WebAssembly, an Azure account with an active subscription is required. If you don’t have an Azure account already, you can get started for free at the following link: https://azure.microsoft.com/en-us/free/.

Understanding authentication in Blazor WebAssembly

With the word authentication, probably the first thing that comes to your mind is the login process with a username and password. I think that’s mostly right, but the story is a bit deeper than that.

An overall general definition for authentication is validating whether the user or the system that is trying to access certain protected resources has a valid identity or not. Think of authentication as an employee trying to access a company office. The employee passes the work ID over the scanner beside the main entrance. The system then checks whether it is a valid ID and, if it is, the door opens and allows the employee in. The employee gets their work ID in the onboarding process after getting hired, so you can map the entrance validation to the login process and the issuing of the ID to the registration process in the software world.

Authentication is not only for users (actual people who open and use the app). It can...

Building a custom JWT authentication flow

This is the section that will contain all the action! We will put together everything we have learned so far about developing components and forms and calling a web API, in addition to all the parts we mentioned in the previous section, to add authentication to our BooksStore project.

For this exercise, we will use the /authentication/login POST API endpoint. This endpoint will accept an object with two properties – Username and Password. If they are valid, it will return an object containing the access token.

By default, the API has two users registered that we can use to test:

• John Smith: He is an admin in the company. His email is [e-mail] and his password is Test.123.
• Ahmad Mozaffar: He is a customer of the BooksStore library. His email is [e-mail] and his password is Test.123.

The custom flow we will build will consider the user authenticated when there is a valid...

Implementing authorization and advanced authentication features

We now have a new term to learn about – authorization. We have mentioned authentication many times, but what is authorization? It is a mechanism on top of authentication that restricts access to resources even for authenticated users.

We gave the example of an employee being allowed access to their company building because they proved that they are an employee. That’s authentication. Authorization, on the other hand, means the employee cannot access all the departments inside the building. They require a special role, or permission, to do that.

In software, the same concepts apply: the user is authenticated after successfully logging in, but authorization means that the user cannot take certain actions or access certain features without a specific role or permission.

In this section, we will discover how to implement authorization using the Blazor authentication library with roles or policies. After...

Accessing authorized API endpoints

In the API of BooksStore, or any APIs you are working with, either some or all the endpoints will be secured and will require an authorized user with the right roles and permissions. In this book, we are looking at web APIs from the client’s perspective, so we are not going to explain how the API authentication system works internally. The API documentation should tell you how the authentication works and what you should do to access the protected endpoints; if you are the developer of the API, you should know how it works directly.

In this chapter, we used JWT authentication, which is the most common form of authentication nowadays, even if you are dealing with identity providers such as Microsoft, Google, and Facebook, rather than the custom flow that we built; they all work the same. With this authentication scheme to access a protected endpoint in the API, all you should do is send the access token that the API gave to you in the login...

Integrating with the Microsoft Identity Platform

We have taken advantage of many features the Blazor authentication library provides. We have implemented all those features step by step and from scratch. Microsoft has some of the best identity solutions on the market, though: Azure AD and AD B2C. What’s great about it is that Microsoft also provides a library for all possible clients (JavaScript frameworks, Xamarin, .NET MAUI, native Windows frameworks, and, of course, Blazor). The client library Microsoft provides is called the Microsoft Authentication Library (MSAL). When it comes to Blazor WebAssembly, MSAL is built on top of the Blazor authentication library and already provides much of what we have done out of the box. What’s even better is that .NET provides a couple of project templates that allow you to create the Blazor app with authentication and MSAL set up for you, so you just build components and the business logic because everything else is ready.

In...

Summary

In this chapter, we saw how to get the best out of Blazor WebAssembly when it comes to authentication, from making the API call and getting the token to setting up the authentication infrastructure, such as the authentication state provider and the authentication components. After that, we covered as many scenarios as possible that you may face in your real-world applications, such as role-based authorization and custom policies, and how to integrate them with built-in authentication components to secure and control the UI and the logic of the app based on the user identity.

We ended the chapter with a brief introduction to the Microsoft Identity Platform with Azure AD and Azure AD B2C, in addition to MSAL and what it provides out of the box when it comes to Blazor WebAssembly.

After completing this chapter, you should be able to do the following:

• Understand the client-side authentication flow for single-page applications
• Build a powerful authentication mechanism...

Further reading

• Securing the Blazor WebAssembly project: https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/?view=aspnetcore-7.0
• The Blazor Authentication Library: https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-authentication-library?view=aspnetcore-7.0&tabs=visual-studio
• Blazor WebAssembly authentication with Microsoft accounts: https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-accounts?view=aspnetcore-7.0
• Blazor WebAssembly authentication with Azure AD: https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-azure-active-directory?view=aspnetcore-7.0
• Blazor WebAssembly authentication with Azure AD B2C: https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-azure-active-directory-b2c?view=aspnetcore-7.0