Tech Seeker

In this article, we are going to implement a JWT authentication sample for the Hot Chocolate GraphQL endpoint. It's purely optional to implement JWT authentication in the GarphQL approach. Because .Net supports endpoint configuration for both normal .Net endpoint and GraphQL endpoint. While implementing GraphQL in your application and if you want to develop an authentication endpoint in the .Net approach there is no issue. But if you want to develop all endpoint in GraphQL including authentication that is also fine. So in this article, our goal is to create JWT authentication as a GraphQL endpoint. Create A .Net5 Web API Application: To understand the concept let's start our journey by creating a sample .Net5 Web API application. Recommended IDE for development are like Visual Studio 2019(Version 16.8.* for .Net5) or  Visual Studio Code . Install Hot Chocolate Library: Package Manager Command: Install-Package HotChocolate.AspNetCore -Version 11.0.2 .Net CLI Command: dotn

In this article, we are going to understand the implementation steps on jwt authentication in the Ionic5 Vue application. Here our main concentration is on the jwt access token to make the user authentication. What Is JSON Web 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 Sample App Of Ionic5 Using Vue : To begin to create an Ionic application, we should have the Ionic CLI installed in our system environment. Command to install latest Ionic CLI: npm install -g @ionic/cli@latest Now run the following command to create Ionic5 using the Vue application. Command to create Ionic Vue application ionic start your_app_name blank --type vue Now run the following command to install Vuex into our Ionic&Vue app. Vuex Command npm install vuex@next --save TypeScript Or Javascript: By default Ionic sample created with the support of TypeScript in any library like angula

In  Part-1  we have implemented steps for jwt authentication in Ionic5 angular application. This is a continuous article of  Part-1 , our main goals here are to use access token in the authorization header and refresh token implementation for user authentication. NestJS(Node.js) 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 Ionic application. http://localhost:3000/todos Ionic Application Use Authorization Header: Now let's try to consume the secured 'Todos' endpoint by adding the access token to the header. Let's now create a TodoService as below. src/app/services/todo.service.ts: import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable } from 'rxjs'; @Injectable() export class TodoServie { constructor(private http:HttpCl

In this article, we are going to understand the implementation steps on Jwt authentication in Ionic5 angular application. Here we mainly concentrate on authenticated user access token. What is JSON Web 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 Sample Ionic Angular Application: Let's begin our journey by creating a sample Ionic Angular application where we are going to implement our JWT authentication. Command To Install Ionic CLI: npm install -g @ionic/cli Command To Create Ionic Tabs Structure APP: ionic start your_application_name tabs Command To Run Application: ionic serve Ionic Storage: The access token on receiving to our Ionic application we need to store it to use it in a subsequent request, the ideal choice for it to use Ionic Storage. Ionic storage provides an easy way to store key/value pairs and JSON objects. It has the capability of picking the