Tech Seeker

Part-1  we implemented user login and logout using the HttpOnly Jwt cookie in our Vue application. In this article, we are going to understand the refresh token(refresh token also stored in HttpOnly Jwt Cookie). Gaurd Routes: One of the important cases we always need to consider while implementing authentication is guard routes between user authenticated and non authenticates cases. Suppose an authenticated user can't access the login page. Similarly, a non-authenticated user can't access the dashboard page(any page that needs user authentication). So to fix this kind of case we have to define our navigation rules at our route guard. But before implementing our route guard logic, we need to set one flag in browser local storage. The flag we will add represents that the user is authenticated. This flag helps us to avoid unnecessary calls to the profile API if the user reloads the application. Now let's add the flag to browser local storage on user authenticated. So let&#

In this article, we will implement Vue3 application authentication with the JWT auth cookie. So in this portion, we mainly target access token utilization. To know about Jwt authentication in vuejs like managing token using browser storage then check below mentioned articles. Part-1 Jwt Access Token Auth In Vue3 Part2 Refresh Token In Vue3 HTTP Only JWT Cookie: The HTTP only cookie is only accessible by the server application. Client apps like javascript-based apps can't access the HTTP-only cookie. So if we use authentication with HTTP only JWT cookie then we no need to implement custom logic like adding authorization header or storing token data, etc at our client application. Because once the user authenticated, that auth cookie will be automatically sent to the server by the browser on every API call. Authentication API: To implement JWT cookie authentication we need to set up an API. For that, I had created a mock authentication API(Using the NestJS Server framework). So d

In this article, we will understand steps to integrate google authentication from scratch manually into the Blazor WebAssembly standalone application.  Part-1  google authentication steps by default bundled with blazor webassembly application on selecting the authentication checkbox while creating the project. But here we will inject the authentication into the project that is not previously enabled with authentication. Create Blazor WebAssembly Project: Let's create a Blazor WebAssembly project without checking the authentication. Install Authentication NuGet: Package Manager: Install-Package Microsoft.AspNetCore.Components.WebAssembly.Authentication -Version 5.0.5 .Net CLI: dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Authentication --version 5.0.5 Register Blazor Application In Google API's Console: Step1:  Create an account in Google API's Console(https://console.cloud.google.com/apis/dashboard). Step2: Select the 'Credentials' menu and

Part-1  implemented sample to work with Google authentication into a Blazor WebAssembly standalone application. Now in this article, we will create user records into our database on users authenticated into our application using a Google account. Also, create a custom JWT for our secured endpoint. Because token given by google for our blazor web assembly application can't be used against our own secured endpoint. So while saving the user record into our database we will also generate the JWT token. Configure Email Scope: By default, the Blazor WebAssembly template requests scope like 'openid', 'profile'. Now we have to add one more additional scope like 'email'. If you observe after login with a google account, the user email is not sent by google as a claim to our blazor application. So to add user record we should have the email address, so for that let's add a new scope like 'email', which will give us user email address as one of the claim

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