Skip to main content

Posts

Showing posts with the label Blazor

Part-4 |Blazor WebAssembly[.NET 7] JWT Authentication Series | Implement Refresh Token & User Logout

The main objectives  of this article are: Implement Refresh Token User Logout Refresh Token: When the JWT access token expires to renew it without user credentials we will use the Refresh Token. The user sends a valid 'User Name' and 'Password' to the server, then the server will generate JWT Access Token and Refresh Token sent as a response. The JWT Access Token is a short-lived token(eg: 20 minutes) and Refresh Token is a long live token(eg: 7 days). Now client application sends a JWT access token in the request header that makes the user authenticated. If the JWT token expires then the server returns a 401 authorized response. Then the client sends the refresh token to the server to regenerate the JWT Access Token. The server validates the refresh token and returns a new JWT Access Token and a new Refresh Token as a response. SQL Script To Create UserRefreshToken Table: Let's run the below sql script to create 'UserRefreshToken' table that contains colum

A CRUD Operation Demo With Blazor WebAssembly(.NET6) + Strawberry Shake GraphQL Client + MudBlazor UI + GraphQL API

In this article, we are to implement CRUD operation in Blazor WebAssembly(.NET6) by consuming GraphQL endpoint with help of  'Strawberry Shake'(Graphql Client Library). GraphQL Endpoint: In this demo, we have to consume the GraphQL endpoint from our Blazor WebAssembly application. Source code for .Net6 GraphQL CRUD operations. The article explains about creating .NET 6 GraphQL CRUD operations The video explains about creating .NET6 GraphQL CRUD operations Strawberry Shake: Strawberry shake is an open-source GraphQL client that is compliant with the newest GraphQL draft spec, which makes Strawberry Shake compatible with all GraphQL compliant servers like Hot Chocolate, Apollo Server, GraphQL Java, and various other servers out there. Strawberry Shake will generate the schema of GraphQL Server which will help to invoke the GraphQL endpoint very easily. Strawberry Shake CLI Tool: Strawberry shake CLI needs to be configured because CLI will help us to generate the GraphQL clie

Blazor WebAssembly File Upload Using MudBlazor UI Components

In this article, we are going to implement a Blazor WebAssembly application file upload using MudBlazor UI components. Create A Sample Blazor WebAssembly Application: Let's create a sample Blazor WebAssembly application to accomplish our demo on file uploading. Initial MudBlazor Setup: Install the 'MudBlazor' library package. Add Mudblazor namespace into the '_Imports.razor'. _Imports.razor: @using MudBlazor Add the below CSS files inside of the head tag in 'index.html'. wwwroot/index.html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> Now comment the 'bootstrap.min.css' and '{your_applicationname}.styles.css' links in the head tag. Add MudBlazor javascript file in 'index.html' just above the closing body tag. wwwroot/index.html: <script

Part-1 Blazor WebAssembly Standalone Application User Login Using Google Account

In this article, we will implement google authentication for the Blazor WebAssembly Standalone application. The Standalone app defines we directly implement authentication on Blazor WebAssembly without using dependent API for authentication. This Google authentication will be 3 parts series: Part-1(Current article) Create a Blazor WebAssembly application with individual authentication enabled and then configure with google authentication. Part-2 Register the users into our application database who log in to our application using a google account. Also, generate JWT authentication to consume secured API. Part-3 (Totally Optional article) Integrate google authentication into the existing Blazor WebAssembly application(an application that is created without enabling individual authentication). Create A Blazor WebAssembly App With Authentication: Let's begin our demo by creating the Blazor Web Assembly application by enabling the individual authentication option while selecting the