Authentication JWT Login in Angular

Author : Andoni ALONSO TORT

Angular + TypeScript

Implementing authentication in Angular with JWT received from server.

A front-end application built with Angular, designed to provide an intuitive and modern interface for user and role management. It includes:

• ✅ An intuitive user interface for login and user profile management.
• ✅ Role management with specific views and permissions based on user authorizations.
• ✅ Integration with a secure REST API, developed in Node.js, for all authentication and user management operations. Communications use JWTs (JSON Web Tokens) to ensure secure exchanges.
• ✅ Support for conditional navigation with protected routes based on user login status and roles.
• ✅ An optimized user experience thanks to modern libraries like Angular Router and HttpClient, HTTP INTERCEPTORS, etc.

This front-end is designed to interact with the authentication JWT Node.js back-end proejct. Offering a solid and secure foundation for applications requiring advanced user management.

Project created with :

ng new project Angular_JWT_Auth

Run appliation :

ng serve

Dependencies

Other dependencies installed:

• jwt-decode : To decode accesToken received from Backend
• ng-icons
• coreui : For modal display

---

For styles see :

• Tailwind

Setting Tailwind config :

To init tailwind in project :

See tailwind documentation to see how to install tailwind with Angular.

Angular Project Details

This project was generated using Angular CLI version 19.1.6.

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.

---

Other project details

== USER ROLES ==

Role	Code
Admin	1000
User	2000

== 🏠 Home Page ==

On the homepage, there will be a page similar to when starting a new project with Angular, except that there will be an additional navbar with navigation buttons.

== 🔐 Login ==

Login page to connect to the application. This form calls the login API of the back-end project, which provides an accessToken with a duration of 1 minute and also stores a refreshToken in the cookies.

Each time an API call fails because the token has expired, the application will automatically request a new accessToken. The backend will use the refreshToken stored in the cookies to verify if the user is authorized to make this request.

== ✅🧔 Create Account ==

Create an account while following the rules defined in the Back-end project. Once the account is created, the user will be redirected to the login page.

== 👨‍💼 Admin Page Users Manage ==

The admin page displays a list of users with action buttons: Edit and Delete.

‼️WARNING: An administrator cannot be deleted if they are the only administrator of the application.

== 👨‍💻 User Profile ==

The user profile page is divided into 3 sections:

• 👁️ Form for viewing, editing, and deleting the user : Actions only displayed in your own profile or if you are an admin.

• 🤝 Interactions : Are only displayed in other user, not your own profile.

• 💻 Posts

(Points 2 and 3 are not features of this application. They are just examples of what could be added. This application is designed solely to provide a complete authentication and user management project based on roles.)

‼️WARNING: Some modifications to sensitive information ( email, username and roles ) may require reauthentication.

== ✅➕ MORE ==

== ↪️ REDIRECTIONS (Navigation) ==

• 🙅 If a user does not have permission to access a page, they will be redirected to the homepage. For example, a regular user attempting to access the admin page.
• ❓ If an unauthenticated user tries to access a page, they will be redirected to the login page. Once logged in, they will be redirected to the page they were trying to reach.

== 🔄️ LOAGING DATA (SKELETONS) ==

Display a loading skeleton while the data is being loaded. This feature enhances the user experience.

== ❌ ERROR FORMS ==

Display clear error messages in forms so that the user can correct the submitted information.

---

Author: Andoni ALONSO TORT