https://github.com/andoniat/angular_jwt_auth

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.
https://github.com/andoniat/angular_jwt_auth

Last synced: 12 months ago
JSON representation

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.

Host: GitHub
URL: https://github.com/andoniat/angular_jwt_auth
Owner: AndoniAT
License: gpl-3.0
Created: 2025-02-06T22:34:41.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2025-02-15T14:38:04.000Z (over 1 year ago)
Last Synced: 2025-02-15T15:32:21.446Z (over 1 year ago)
Language: TypeScript
Size: 370 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

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](https://github.com/AndoniAT/Auth_JWT_NodeJs). 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](https://www.npmjs.com/package/jwt-decode) : To decode accesToken received from Backend
- [ng-icons](https://ng-icons.github.io/ng-icons/#/)
- [coreui](https://coreui.io/angular/docs/components/modal/#live-demo) : For modal display

For styles see :
- [Tailwind](https://tailwindcss.com/docs)

Setting Tailwind config :

To init tailwind in project :

See [tailwind documentation](https://v3.tailwindcss.com/docs/guides/angular) to see how to install tailwind with Angular.

## Angular Project Details

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.6.

#### Development server

To start a local development server, run:

```bash
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:

```bash
ng generate component component-name
```

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

```bash
ng generate --help
```

#### Building

To build the project run:

```bash
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](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

#### Running end-to-end tests

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

```bash
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](https://angular.dev/tools/cli) 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](https://github.com/AndoniAT/Auth_JWT_NodeJs). 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.