Tech Seeker

In this article, we are going to implement JWT(JSON Web Token) authentication in the Angular(v14) application. We also understand how to use the Refresh Token when the JWT Access Token expires. JSON Web Token(JWT): 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 An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo. Command To Create Angular App ng new name_of_your_project Let's install the bootstrap package npm install bootstrap@5.2.0 Configure the bootstrap CSS and JS file reference in 'angular.json'. Now let's add the bootstrap menu in 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" routerLink="/">Jwt Auth Demo</a> </div> </nav

In this article, we will implement Angular(v14) CRUD to consume the GraphQL endpoint using the Apollo Angular(v3) library. GraphQL API: GraphQL API mostly has a single endpoint. So data fetching or updating will be carried out by that single endpoint. For posting data or querying data, we have to follow its own syntax. GraphQL carries two essential operations: Query - (Fetching Data) Mutation - (Saving Data) Create An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo.  Command To Create Angular Application ng new your_app_name Let's install the bootstrap into our application. npm install bootstrap Now configure the CSS and JS links of bootstrap in 'angular.json'. Let's add the bootstrap 'Navbar' component at 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <div class="navbar-brand&qu

In this article, we are going to implement Angular(v14) CRUD operations using NgRX Data(v14) state management. NgRx Data: In general angular application uses NgRx store, effects, entity, etc libraries to maintain state. The trade-off with the '@ngrx/store' is we have to write a huge number of actions, reducers, effects, selectors, HTTP API calls per entity model, etc resulting in more numbers of files needing to be maintained. Using NgRx Data we can reduce our code to very little despite having a large number of entity models in our application. The NgRx Data is an abstraction over the Store, Effects, and Entity that reduces the amount of code we have to write. By gaining the abstraction benefit, we are going to lose our direct interaction with NgRx libraries. When to use NgRx Data?: NgRx Data is a good choice when our application involves a lot of 'Create', 'Read', 'Update', 'Delete' operations. Our Entity Model should contain a primary key valu