Tech Seeker

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 the  Part-1  we have learned steps to build a VueJS application authentication by using an access token(Jwt token). This is the continuation article, here we are going to understand the steps for implementing refresh token and using access token in the request header to call secured API. NestJS(Nodejs) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our angular application. http://localhost:3000/todos Access Token Authorization To Access Secured Endpoint: Now let's try to access the secured endpoint 'todos' mentioned above in our 'Dashboard' page. Now for this todos, we are going to create another module file like 'todo.js'. src/store/modules/todo.js: import axios from 'axios'; const state = () => ({ todos :[] }); const getters = { getAlltodos(state){ state.todos; } }; const

In this article, we are going to understand the steps for JWT(JSON Web Token) authentication. Here our main focus to fetch the JWT access token to make users log into our VueJS 3.0 application. For maintaining user info we will use Vuex state management. JWT Token: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A VueJS 3.0 Sample Application: Let's begin by creating a VueJS 3.0 sample application. Command To Install Vue CLI Globally On Your System npm install -g @vue/cli Command To Create A Vue App: vue create your_app_name Required NPM Packages: Need to install the Vue routing library to configure routing into our application. Command To Install Vue Router Library(For Vue3.0) npm install vue-router@4 Need to install the Vuex Store library to configure state management to our application Command To Install Vuex Store Library(For Vue3.0) npm install vuex@next Install

In this article, we are going to understand the process of integration of jQuery Mask Plugin into the VueJS 3.0 application. Features Of jQuery Mask Plugin: String/Numeric/Alpha/Mixed masking supports. Support event callbacks Reverse masking. Pattern matching Option pattern matching. Create A Sample VueJS 3.0 Application: The toast plugin we are integrating needs to be integrated into the VueJS application of version 3.0. Command To Install Vue CLI Globally On Your System: npm run -g @vue/cli Command To Create Vue App: vue create your_application_name After creating a sample application run the following command to start the application. Command To Run Vue App: npm run serve Install jQuery Mask Npm Package: Command To Install Mask Plugin: npm install vue-jquery-mask After successfully installing the 'vue-jquery-mask' plugin its reference will be added to the package.json Import 'vue-jquery-mask': Let's import 'vue-jquery-mask' into our vue compon

In this article, we are going to understand the process for the integration of date picker in the VueJS 3.0 application using the 'vue3-datepicker-lite' plugin. An Overview On vue3-datepicker-lite Plugin: The key features of the 'vue3-datepicker-lite' plugin are as follow: value -  This property to capture the selected date value or to set the default selected value. class -  The class property to add a custom design to the date picker. id -  The id property added to the HTML rendered date picker element. locale - The 'locale' property is a javascript object literal, where we can configure buttons and date picker days labels. value-changed - This event gets triggers on date value selection. Create A Sample VueJS 3.0 App: Command To Install Vue CLI Globally On Your System: npm run -g @vue/cli Command To Create Vue App: vue create your_application_name After creating a sample application run the following command to start the application. Command To Run Vue