Tutorial built with ASP.NET Core Blazor WebAssembly 3.2.1

This is a quick post to show how to implement custom authentication in ASP.NET Core Blazor without the Identity membership system.

The below code snippets are from a Blazor JWT authentication tutorial I posted recently, for the full tutorial and live demo of the code see Blazor WebAssembly - JWT Authentication Example & Tutorial.

There are only a few pieces you need to implement custom authentication without Identity in Blazor:

• An authentication service for logging in and out, and that provides access to the currently logged in user.
• A custom route view to guard access to authenticated routes / pages (pages decorated with the [Authorize] attribute).
• Login and logout pages that call the authentication service.
• Some secure pages to test out your custom authentication system.

Authentication Service without Identity

The authentication service is used to login and logout of the Blazor app, and allows access to the currently logged in user via the User property.

The Initialize() method is called from Program.cs on startup and assigns the "user" object from local storage to the User property, which enables the user to stay logged in between page refreshes and browser sessions. This couldn’t be put into the constructor because getting data from local storage is an async action.

The Login() method sends the user credentials to the API via an HTTP POST request for authentication. If successful the user object (including a JWT auth token) is assigned to the User property and stored in local storage to keep the user logged in between page refreshes.

The Logout() method sets the the User property to null, removes the user object from local storage and navigates to the login page.

using BlazorApp.Models;
using Microsoft.AspNetCore.Components;
using System.Threading.Tasks;

namespace BlazorApp.Services
{
    public interface IAuthenticationService
    {
        User User { get; }
        Task Initialize();
        Task Login(string username, string password);
        Task Logout();
    }

    public class AuthenticationService : IAuthenticationService
    {
        private IHttpService _httpService;
        private NavigationManager _navigationManager;
        private ILocalStorageService _localStorageService;

        public User User { get; private set; }

        public AuthenticationService(
            IHttpService httpService,
            NavigationManager navigationManager,
            ILocalStorageService localStorageService
        ) {
            _httpService = httpService;
            _navigationManager = navigationManager;
            _localStorageService = localStorageService;
        }

        public async Task Initialize()
        {
            User = await _localStorageService.GetItem<User>("user");
        }

        public async Task Login(string username, string password)
        {
            User = await _httpService.Post<User>("/users/authenticate", new { username, password });
            await _localStorageService.SetItem("user", User);
        }

        public async Task Logout()
        {
            User = null;
            await _localStorageService.RemoveItem("user");
            _navigationManager.NavigateTo("login");
        }
    }
}

#blazor #webassembly #aspdotnet #security #developer