4.4.3 Develop frontend authentication. Check authentication and role based access

In the previous article, we described the process of developing Angular cookie-based authentication with role-based access. This article presents the final touches: first, adding a feature that displays a list of users for the Admin role and restricts access for the User role, and second, completing the error pages that were generated earlier. Users Service … Read more

4.4.2 Develop frontend authentication: Implementing Cookie-Based Authentication and Role-Based Access Control in Angular: AuthService, Guards, Interceptors, and Navigation

In previous article we updated our backend project to add Role Based Access Control, configured CORS in backend’s main.ts file and enhanced our logout feature. Now, we are ready back to the fronted app to develop frontend authentication. auth-service library Generate auth-service library: npx nx g @nx/angular:library auth \\ –prefix mtfs \\ –importPath=@mtfs/frontend/auth-service \\ –tags … Read more

4.4.1 Update backend to implement Role Based Access Control (RBAC), add CORS and update logout feature

Introduction Before diving into frontend authentication, it’s essential to establish a strong foundation by implementing Role-Based Access Control (RBAC) on the backend. This approach ensures that the basics of authentication and RBAC are developed simultaneously, providing a secure and efficient authentication system. This article guides you through the steps to create roles, guards, and necessary … Read more

4.3. Develop full stack boilerplate: create basic app сomponents and set up global styles structure on Angular frontend

Let’s continue developing step-by-step JavaScript full stack real world business system for transportation logistics (full table of contents here). Now we can move from backend development to frontend development . This article describes the implementation of two tasks from the first stage of the project plan  for developing the ‘Awesome Trucks Company System’: Creating basic … Read more

4.2. Develop Full Stack Boilerplate: Create backend authentication

The previous article demonstrated the initial steps in developing a full-stack JavaScript system using an NX monorepository. This included generating a NestJS app for the backend, creating an Angular app, and configuring a PostgreSQL database in a Docker container. Additionally, it covered setting up the first TypeORM migrations to facilitate further development. The next step … Read more

4.1. Develop Full Stack Boilerplate: workspace, environment and database preparation

The previous articles demonstrated the basic prep work to start writing code. And now we can start! This article shows the execution of the first task of the first stage: “Create workspace, set up environment and migrations on backend“ Check installed globally versions of NodeJS, NX, Angular, NestJS and update or install it Generate nx workspace with … Read more

JavaScript Full Stack real world business system step-by-step guide. Part 3: Project planning decisions

То facilitate the development of Awesome track company transport system we will brake down our project into stages and define main tasks of each stage. The first article describes the business case and functional structure of the system and the second article describes basic decisions regarding the database schema, user interface and project’s workspace structure. … Read more

JavaScript Full Stack real world business system step-by-step guide. Part 2: Main design decisions

In previous article has been described business case and product’s functional structure that allow us to design: domain model that will be descibed as set of objects TypeORM entities scheme based on interfaces of domain model relational database schema that wil be generated using TypeORM migrations user interface mockups environment and project structure for nx … Read more

JavaScript Full Stack real world business system step-by-step guide. Part 1: Introduction

Exploring JavaScript/TypeScript full stack development based on Node.js with using of wide range of modern frameworks such as NX, Angular, NestJs and other I found a lot of excellent small examples for CRUD, authentication, real time chats and many others, but I detected extremely few examples of real world apps (usual it is simple blogs … Read more