Tech Seeker

The main objectives of this article are: .NET7 Web API Install .NET7 SDK And IDE Create A .NET7 Web API Application SQL Database ConnectionString Entity Framework Core Install Entity Framework Core NuGet Packages Entity Framework Core DatabaeContext .NET7 Web API: Web API is framework for building an HTTP service that can be accessed by any clients like browser, mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data from their respective clients. Some of the key characteristics of API are: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML', and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to i

The main objectives of this article are: Vue(3.0) Vue(3.0) Composition API. Vue(3.0): Vue(3.0) is a javascript framework for creating a single-page application. Vue application built by components. The components are the smallest unit of the application which comprises 'Script', 'Template'(HTML), and 'Style'. Eventually, multiple components together create the Vue application. Vue(3.0) Composition API: VueJS application can be developed with either 'Options API' or 'Composition API' or 'Both combinations'. Using composition API we can import the functions(vue functions) instead of declaring them as options The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of composable functions. Example Vue Component - Composition API Technique 1: <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ count: 0 }) function increment() {

In this article, we are going to implement Vue 3 sample application that consumes GrpahQL Endpoint using the Vue Apollo library. Create Vue 3 Application: Let's create a sample Vue 3 application to accomplish our demo. Vue CLI Command To Create Project: vue create your_project_name GraphQL Server Endpoint: We should have a GraphQL server endpoint for our demo. So I created a GraphQL server endpoint using 'Dotnet', so I'm going to use it here so its URL be like 'https://localhost:6001/graphql'. So please make sure to have your own GraphQL server endpoint. Install Vue Apollo And Its Dependent Libraries: npm install --save @vue/apollo-option npm install --save @apollo/client npm install --save graphql npm install --save graphql-tag One more plugin we have to install 'react', at the time of this article written we will get an error that says that need to install the 'react', so this 'react' installation might be avoided in feature r

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