How To Add Custom Authentication In Blazor

Introduction

Blazor Server is a web development framework developed by Microsoft that allows developers to build web applications using C# and . NET. Authentication is essential to any web application, and Blazor Server provides built-in authentication support. However, sometimes developers may need to add custom authentication to their Blazor Server application. This article will discuss how to add custom authentication to a Blazor Server application. Blazor server is one of the two hosting models of Blazor, which allows developers to build web applications using Razor components and C#.

What is Authentication

Authentication is the process of verifying the identity of a user or system. It involves the validation of credentials, such as usernames and passwords, to ensure that a user or system is who they claim to be. Authentication is a crucial component of any secure system, ensuring that only authorized individuals or systems are allowed access to sensitive information or resources. In the context of web applications, authentication is often used to restrict access to certain pages or features and ensure that only authorized users can perform certain actions. Authentication is an essential aspect of web applications, and the Blazor server has built-in authentication support. However, in some cases, you may need to implement custom authentication for your application. Custom authentication allows you to define your own authentication logic and integrate it with third-party authentication providers such as social media platforms or identity management systems.

Before we dive into how to add custom authentication in a Blazor server application, let's first understand the basics of Blazor server authentication.

Understanding Blazor server authentication

Blazor server authentication is based on ASP.NET Core authentication, which provides a flexible and extensible authentication system for web applications. The authentication process in the Blazor server is based on cookies, and it works as follows:

1. The user submits their login credentials to the server.
2. The server validates the credentials and creates an authentication ticket that includes the user's identity and any associated claims.
3. The server sends the authentication ticket to the client as a cookie.
4. The client includes the authentication cookie in all subsequent requests to the server.
5. The server validates the authentication cookie on each request and sets the HttpContext.User property to the authenticated user.

Blazor server authentication supports various authentication schemes such as JWT, cookies, OAuth, and OpenID Connect. You can configure the authentication scheme in the Startup class of your application.

Prerequisites

Before we get started, there are a few prerequisites that you need to have in place:

1. A basic understanding of C# and . NET.
2. Working knowledge of Blazor Server.
3. Visual Studio 2022 or later.
4. .NET Core 6.0 or later.
5. A basic understanding of authentication concepts such as tokens, claims, and roles.

Adding custom authentication in a Blazor server application

To add custom authentication in a Blazor server application, you need to implement your own authentication logic and integrate it with the authentication system provided by ASP.NET Core. Here's how you can do it:

Step 1. Create a New Blazor Server Application

The first step is to create a new Blazor Server application. Open Visual Studio and select "Create a new project." Choose "Blazor App" from the list of project types, and select "Blazor Server App" as the project template.

Enter a name for your project, and choose a location to save it. Click "Create" to create the project.

Step 2. Add a Custom Authentication Handler

The next step is to add a custom authentication handler to the Blazor Server application. An authentication handler is responsible for authenticating users and creating security tokens. 

Custom authentication is to create a custom authentication handler that implements the AuthenticationHandler<TOptions> class provided by ASP.NET Core. The TOptions parameter specifies the options for the authentication handler.

Here's an example of a custom authentication handler that validates the user's credentials against a database:

Open the Startup.cs file in your Blazor Server application and add the following code to the ConfigureServices method:

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = "CustomScheme";
})
.AddScheme<CustomAuthenticationHandlerOptions, CustomAuthenticationHandler>("CustomScheme", null);

This code adds a custom authentication handler to the application. The handler is identified by the "CustomScheme" string, which is used as the default authentication scheme.

Create a new class called "CustomAuthenticationHandler" and add the following code:

public class CustomAuthenticationHandler: AuthenticationHandler < CustomAuthenticationHandlerOptions > {
    private readonly IUserService _userService;
    public CustomAuthenticationHandler(IOptionsMonitor < CustomAuthenticationHandlerOptions > options, ILoggerFactory logger, UrlEncoder encoder, ISystemClock clock, IUserService userService): base(options, logger, encoder, clock) {
        _userService = userService;
    }
    protected override async Task < AuthenticateResult > HandleAuthenticateAsync() {
        string token = null;
        if (Request.Headers.ContainsKey("Authorization")) {
            string headerValue = Request.Headers["Authorization"];
            if (headerValue.StartsWith("Bearer ")) {
                token = headerValue.Substring("Bearer ".Length);
            }
        }
        if (string.IsNullOrEmpty(token)) {
            return AuthenticateResult.Fail("Invalid token");
        }
        ClaimsIdentity identity = null;
        // TODO: Validate token and create claims identity
        if (identity == null) {
            return AuthenticateResult.Fail("Invalid token");
        }
        AuthenticationTicket ticket = new AuthenticationTicket(new ClaimsPrincipal(identity), Options.Scheme);
        return AuthenticateResult.Success(ticket);
    }
}

This code creates a custom authentication handler that uses a user service to validate tokens and create a claims identity. The HandleAuthenticateAsync method is called for each request that requires authentication. It extracts the token from the request headers and validates it using the user service. If the token is valid, it creates a claims identity and returns an authentication ticket.

Step 3. Create a User Service

The next step is to create a user service that validates tokens and creates claims identities. The user service is responsible for authenticating users and retrieving their information from a database or other data source.

public interface IUserService
{
    Task<User> AuthenticateAsync(string token);
}

This code defines an interface for the user service with a single method called AuthenticateAsync. This method takes a token as a parameter and returns a user object if the token is valid.

Create a new class called "UserService" and implement the IUserService interface. Add the following code:

public class UserService: IUserService {
    private readonly IConfiguration _configuration;
    public UserService(IConfiguration configuration) {
        _configuration = configuration;
    }
    public async Task < User > AuthenticateAsync(string token) {
        string secret = _configuration["Jwt:Secret"];
        var handler = new JwtSecurityTokenHandler();
        try {
            var claimsPrincipal = handler.ValidateToken(token, new TokenValidationParameters {
                ValidateIssuerSigningKey = true,
                    IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(secret)),
                    ValidateIssuer = false,
                    ValidateAudience = false,
                    ClockSkew = TimeSpan.Zero
            }, out SecurityToken validatedToken);
            JwtSecurityToken jwtToken = (JwtSecurityToken) validatedToken;
            string userId = jwtToken.Claims.First(x => x.Type == "userId").Value;
            string userName = jwtToken.Claims.First(x => x.Type == "userName").Value;
            string userEmail = jwtToken.Claims.First(x => x.Type == "userEmail").Value;
            string[] userRoles = jwtToken.Claims.Where(x => x.Type == "userRoles").Select(x => x.Value).ToArray();
            User user = new User {
                Id = userId,
                    UserName = userName,
                    Email = userEmail,
                    Roles = userRoles
            };
            return user;
        } catch (Exception) {
            return null;
        }
    }
}

This code creates a user service that validates tokens using a secret key stored in the appsettings.json file. It uses the JwtSecurityTokenHandler to validate the token and extract the user information from the claims. If the token is valid, it creates a user object and returns it.

Step 4. Add Authentication Middleware

The final step is to add authentication middleware to the Blazor Server application. Authentication middleware is responsible for authenticating users and creating security tokens.

Open the Startup.cs file in your Blazor Server application and add the following code to the Configure method:

app.UseAuthentication();
app.UseAuthorization();

This code adds authentication middleware to the application, which is responsible for authenticating users and creating security tokens.

Step 5. Test Custom Authentication

Now that you have added custom authentication to your Blazor Server application, it's time to test it. To test the custom authentication, you must create a token and pass it to the application in the Authorization header.

Create a new token using a tool such as JWT.io. Paste the token into the Authorization header of a request to your Blazor Server application.

If everything works correctly, the application should authenticate the user and allow access to protected resources.

Advantages and Disadvantages of Custom Authentication

Custom authentication can have advantages and disadvantages, depending on the specific implementation and context in which it is used. Here are some of the advantages and disadvantages of custom authentication:

Advantages

1. Flexibility: Custom authentication can be tailored to meet specific security requirements, making it more flexible than off-the-shelf solutions.
2. Scalability: Custom authentication can be designed to scale with the growth of the application, which is especially important for large or complex systems.
3. Security: Custom authentication can provide a higher level of security than off-the-shelf solutions, as it can be designed to be more resistant to attacks.
4. Control: Custom authentication gives developers greater control over the authentication process, allowing them to fine-tune it to meet the needs of their application.

Disadvantages

1. Complexity: Custom authentication can be complex and time-consuming to implement, requiring much development time and expertise.
2. Maintenance: Custom authentication requires ongoing maintenance and updates to stay secure, which can burden smaller development teams.
3. Cost: Custom authentication can be more expensive to implement than off-the-shelf solutions, requiring more development resources.
4. Compatibility: Custom authentication may not be compatible with existing systems or tools, which can be a challenge for organizations that rely on a variety of technologies.

Conclusion

This article discussed how to add custom authentication to a Blazor Server application. We covered the steps in creating a custom authentication handler, a user service, and adding authentication middleware to the application. Following these steps, you can add custom authentication to your Blazor Server application and provide a secure user authentication experience.