How to Create SessionStorage in Blazor Server?

using BlazorDemo.Data;
using BlazorDemo.Interfaces;
using Dapper;
using Microsoft.Exchange.WebServices.Data;
using System.Data;

namespace BlazorDemo.Interfaces
{
    public class UserDetails : IUserDetails
    {
        private readonly DapperContext _context;
        private readonly ILogRepo _logRepo;

        public UserDetails(DapperContext dapperContext)
        {
            _context = dapperContext;
            _logRepo = new LogRepo(dapperContext);
        }
        public async Task<UserDetailsModel>LoginClick(LoginModel loginmodel)
        {
            UserDetailsModel lst = new UserDetailsModel();
            try
            {
                using (var connection = _context.CreateConnection())
                {
                    var procedure = "[Project_UserLogin]";
                    var values = new { EmailId = loginmodel.Email, Password= loginmodel.password};
                    lst = await connection.QueryFirstAsync<UserDetailsModel>(procedure, values, commandType: CommandType.StoredProcedure);           
                }
            }
            catch (Exception ex)
            {

            }
            return lst;
        }   
    }
}

Step 6. Create a class named Session.cs

Inside the Data folder create a Session.cs class and write this code here.

using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
namespace BlazorDemo.Data
{
    public class Session
    {
        public readonly ProtectedSessionStorage ProtectedSessionStorage;

        public Session(ProtectedSessionStorage _ProtectedSessionStore)
        {
            ProtectedSessionStorage = _ProtectedSessionStore;
        }

        public async Task<String> GetUserFirstName()
        {
            var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionFirstName");
            return val.Value;
        }
        public async Task<String> GetUserLastName()
        {
            var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionLastName");
            return val.Value;
        }
        public async Task<String> GetUserName()
        {
            var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionFirstName");
            var val1 = await ProtectedSessionStorage.GetAsync<String>("UserSessionLastName");
            return val.Value + " " + val1.Value;
        }
        public async Task<Int64> GetUserId()
        {
            var val = await ProtectedSessionStorage.GetAsync<Int64>("UserSessionUserID");
            return val.Value;
        }
        public async Task<String> GetEmailId()
        {
            var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionEmailId");
            return val.Value;
        }

        public async Task<String> GetPassword()
        {
            var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionPassword");
            return val.Value;
        }
        public async Task RemoveSession()
        {
            await ProtectedSessionStorage.DeleteAsync("UserSessionFirstName");
            await ProtectedSessionStorage.DeleteAsync("UserSessionLastName");
            await ProtectedSessionStorage.DeleteAsync("UserSessionUserID");
            await ProtectedSessionStorage.DeleteAsync("UserSessionEmailId");
            await ProtectedSessionStorage.DeleteAsync("UserSessionPassword");
        }
    }
}

Code Explanation

public Session(ProtectedSessionStorage _ProtectedSessionStore)
{
    ProtectedSessionStorage = _ProtectedSessionStore;
}

The constructor takes an instance of ProtectedSessionStorage and assigns it to the ProtectedSessionStorage field.

public async Task<String> GetUserFirstName()
{
    var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionFirstName");
    return val.Value;
}
public async Task<String> GetUserLastName()
{
    var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionLastName");
    return val.Value;
}
public async Task<String> GetUserName()
{
    var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionFirstName");
    var val1 = await ProtectedSessionStorage.GetAsync<String>("UserSessionLastName");
    return val.Value + " " + val1.Value;
}
public async Task<Int64> GetUserId()
{
    var val = await ProtectedSessionStorage.GetAsync<Int64>("UserSessionUserID");
    return val.Value;
}
public async Task<String> GetEmailId()
{
    var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionEmailId");
    return val.Value;
}
public async Task<String> GetPassword()
{
    var val = await ProtectedSessionStorage.GetAsync<String>("UserSessionPassword");
    return val.Value;
}

GetUserFirstName, GetUserLastName, GetUserName, GetUserId, GetEmailId, and GetPassword methods retrieve session values for user details.

public async Task RemoveSession()
{
    await ProtectedSessionStorage.DeleteAsync("UserSessionFirstName");
    await ProtectedSessionStorage.DeleteAsync("UserSessionLastName");
    await ProtectedSessionStorage.DeleteAsync("UserSessionUserID");
    await ProtectedSessionStorage.DeleteAsync("UserSessionEmailId");
    await ProtectedSessionStorage.DeleteAsync("UserSessionPassword");
}

The removeSession method deletes all session values related to user details and the methods use await to asynchronously retrieve values from the ProtectedSessionStorage.This class provides a convenient way to manage and retrieve user session information using the ProtectedSessionStorage. It encapsulates the logic for getting and removing session values related to user details.

Step 7. Add a component named ViewUserDetails

As we can see when the user login details are correct we will get the 1 as a result and navigate the ViewUserDetails page so we need to add a component named ViewUserDetails and write this code here.

@page "/ViewUserDetails"
@using BlazorDemo.Data;
@using BlazorDemo.Interfaces;
@inject IUserDetails iuserDetails
@inject Session session
@inject NavigationManager navigationManager

<div class="row">
    <div class="col-6">
        <h3>ViewUserDetails</h3>
    </div>
    <div class="col-6" style="padding-left:40%">
        <button class="btn btn-warning" title="View" @onclick="() => LogOut()">
            LogOut
        </button>
    </div>
</div>
<div class="row">
    <div class="container mt-3">
        <div class="card mx-4" style="width:1104px;">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="row mx-3">
                            <div class="col-md-6 mb-2">
                                <label class="fw-700">First Name :</label>
                                <span> @userDetailsModel.FirstName</span>
                            </div>
                        </div>

                        <div class="row mx-3">
                            <div class="col-md-6 mb-2">
                                <label class="fw-700">Last Name :</label>
                                <span> @userDetailsModel.LastName</span>
                            </div>
                        </div>

                        <div class="row mx-3">
                            <div class="col-md-6 mb-2">
                                <label class="fw-700">Email :</label>
                                <span> @userDetailsModel.Email</span>
                            </div>
                        </div>

                        <div class="row mx-3">
                            <div class="col-md-6 mb-2">
                                <label class="fw-700">Age :</label>
                                <span> @userDetailsModel.Age</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    UserDetailsModel userDetailsModel = new UserDetailsModel();
    protected bool loading = false;
    protected override async Task OnInitializedAsync()
    {
        loading = true;
        try
        {
            userDetailsModel.UserId = await session.GetUserId();
            userDetailsModel = await iuserDetails.GetUserDetailsByUserId(userDetailsModel.UserId);
        }
        catch (JSDisconnectedException ex)
        {
            // Ignore
        }
        catch (Exception ex)
        {

        }
        finally
        {
            StateHasChanged();
            loading = false;
        }
    }
    public async void LogOut()
    {
        await session.RemoveSession();
        navigationManager.NavigateTo("/");
    }
}

Create a method inside the IUserDetails.cs page named GetUserDetailsByUserId.

using BlazorDemo.Data;
namespace BlazorDemo.Interfaces
{
    public interface IUserDetails
    {
        public Task<UserDetailsModel>GetUserDetailsByUserId(Int64 UserId);
        public Task <UserDetailsModel> LoginClick(LoginModel loginmodel);
    }
}

And implement this method in the UserDetails.cs page.

public async Task<UserDetailsModel> GetUserDetailsByUserId(Int64 UserId)
{
   UserDetailsModel lst = new UserDetailsModel();
    try
    {
        using (var connection = _context.CreateConnection())
        {
            var procedure = "[GetUserByUserId]";
            var values = new { UserId = UserId };
            lst = (await connection.QueryFirstAsync<UserDetailsModel>(procedure, values, commandType: CommandType.StoredProcedure));
        }
    }
    catch (Exception ex)
    {

    }
    return lst;
}

Note. You must add services to the Program.cs file for all the interfaces and classes, similar to the example provided. just like this.

builder.Services.AddTransient<IUserDetails, UserDetails>();
builder.Services.AddScoped<Session>();

Then run the project and you can see this type of output.

Conclusion

In this article, we have learned about emphasizing the importance of using Protected Session Storage in Blazor Server applications for secure user session management. Encourage developers to implement these practices to enhance the overall security of their applications.

FAQ's

Q 1. What is Blazor?

Ans. Blazor is an open-source web framework developed by Microsoft that allows developers to build interactive web applications using C# and .NET instead of JavaScript. Blazor enables full-stack web development with a single programming language and runtime.

Q 2. What are the two primary hosting models in Blazor?

Ans. There are two primary hosting models for Blazor.

Blazor WebAssembly

This model allows you to run Blazor applications directly in the web browser using WebAssembly, enabling code execution in the browser.

Blazor Server

In this model, the application's user interface is rendered on the server, and UI updates are sent to the client over a SignalR connection.

Q 3. What is the role of ProtectedSessionStorage?

Ans. ProtectedSessionStorage is used to securely store and retrieve user session data such as user ID, first name, last name, email, and password.

Q 4. How does the Session class contribute to the application?

Ans. The Session class encapsulates methods for retrieving user session data and removing session values related to user details.