Tech Seeker

In this article, we are going to explore and implement the usage of a refresh token in our Blazor WebAssembly. In Part 1 we have explored complete guidance for implementing authentication in the Blazor WebAssembly application from scratch. Store Refresh Token In-Browser LocalStorage: If we recall  Part1 , we have stored our access token in the browser localStorage, similarly, we need to store our refresh token in the browser localStorage. Now update the 'LoginAsync' method in the AccountService file to save the refresh token. Services/AccountService: public async Task<bool> LoginAsync(LoginModel model) { var response = await _httpClient.PostAsJsonAsync<LoginModel>("/account/login-token", model); if (!response.IsSuccessStatusCode) { return false; } AuthResponse authData = await response.Content.ReadFromJsonAsync<AuthResponse>(); await _localStorageService.SetItemAsync("token", authData.Token); await _localStorageService.SetIt

In this article, we are going to explore and implement custom authentication from the scratch. In this sample, we will use JWT authentication for user authentication. Main Building Blocks Of Blazor WebAssembly Authentication: The core concepts of blazor webassembly authentication are: AuthenticationStateProvider Service AuthorizeView Component Task<AuthenticationState> Cascading Property CascadingAuthenticationState Component AuthorizeRouteView Component AuthenticationStateProvider Service - this provider holds the authentication information about the login user. The 'GetAuthenticationStateAsync()' method in the Authentication state provider returns user AuthenticationState. The 'NotifyAuthenticationStateChaged()' to notify the latest user information within the components which using this AuthenticationStateProvider. AuthorizeView Component - displays different content depending on the user authorization state. This component uses the AuthenticationStateProvider

Overview On Dapper Object-Relational Mapping: Dapper is an Object-Relational Mapping framework for .Net applications. It is a mapping model between the database and .Net objects. The Dapper provides all query and command execution methods as extension methods under the 'System.Data.IDbConnection' interface. The Dapper works as a similar ADO.Net but with much more model mapping support. The Dapper key features are like: High performance in query execution Multiple query execution support An easy model mapping between the .Net Object and database result. Create A Sample .Net Core Web API Application: Let's understand the Dapper ORM query and commands execution steps by writing some sample code, so let's get started by creating a .Net Core Web API application. The IDE's for development can be chosen by personal preference but the most recommended IDE's are Visual Studio 2019 and  Visual Studio Code . SQL Table Schema: In this article we are going to work on 'T

In this article, we are going to explore file uploading in the Blazor WebAssembly application. From .Net5 onwards Blazor Assembly comes with an inbuilt file rendering blazor component like 'InputFile' Component. Overview On InputFile Component: InputFile blazor component renders an input field of type 'file' which by default supports single file upload. To support multiple file selection we need to add an attribute 'multiple' to the Html tag of the InputFile blazor component. InputFile blazor component provides an event called 'OnChange'. This event gets invoked on every file selection. This 'OnChange' event has to be configured with a callback method in our blazor code block. The callback method receives an argument of type 'InputFileChangeEventsArgs'. This 'InputFileChangeEventsArgs' captures all images and it information. This argument helps to read the stream of files. Create A Sample Blazor WebAssembly: Let's understand t

  In .Net Core applications, HttpClient instance should be managed by HttpClienFactory with the support of Dependency Injection(DI). Blazor Assembly applications also have those capabilities to use the  HttpClient object in an efficient manner. The techniques provided by the .Net  framework are: Register HttpClient Object Explicitly In DI(Dependency Injection Service) Named Client Type Client HttpRequestMessage Object In this article, we are going to implement Get API call with the above techniques mentioned using a sample Blazor WebAssembly application. Create Blazor WebAssembly Sample App: To follow up on the steps let's begin by creating a sample Blazor WebAssembly application. Use any of the editors of your choice most recommended are like VisualStudio 2019(Support .Net 3.0 plus) or  Visual Studio Code . Third-Party Rest API: To show sample implementation of the Blazor WebAssembly application here I'm going to use external free Rest API for our demos - "https://jsonpl