{"id":25271359,"url":"https://github.com/andoniat/angular_jwt_auth","last_synced_at":"2025-07-28T19:36:24.950Z","repository":{"id":276226238,"uuid":"928598377","full_name":"AndoniAT/Angular_JWT_Auth","owner":"AndoniAT","description":"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.","archived":false,"fork":false,"pushed_at":"2025-02-15T14:38:04.000Z","size":379,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-15T15:32:21.446Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndoniAT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-06T22:34:41.000Z","updated_at":"2025-02-15T14:38:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"540d918d-7299-44ce-b688-f4ba427ebd2e","html_url":"https://github.com/AndoniAT/Angular_JWT_Auth","commit_stats":null,"previous_names":["andoniat/angular_jwt_auth"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAngular_JWT_Auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAngular_JWT_Auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAngular_JWT_Auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAngular_JWT_Auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndoniAT","download_url":"https://codeload.github.com/AndoniAT/Angular_JWT_Auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445683,"owners_count":20939961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-12T12:32:51.697Z","updated_at":"2025-04-06T07:17:18.709Z","avatar_url":"https://github.com/AndoniAT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 class=\"text-center\" style=\"background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n padding: 5px;\"\u003e Authentication JWT Login in Angular\n \u003cimg src=\"./angular.png\" height=\"80\"/\u003e\n \u003c/h1\u003e\n\u003ch4\u003eAuthor : Andoni ALONSO TORT\u003c/h4\u003e\n\n### Angular + TypeScript\n\nImplementing authentication in Angular with JWT received from server.\n\nA front-end application built with Angular, designed to provide an intuitive and modern interface for user and role management. It includes:\n\n- ✅ An intuitive user interface for login and user profile management.\n- ✅ Role management with specific views and permissions based on user authorizations.\n- ✅ 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.\n- ✅ Support for conditional navigation with protected routes based on user login status and roles.\n- ✅ An optimized user experience thanks to modern libraries like Angular Router and HttpClient, HTTP INTERCEPTORS, etc.\n\nThis 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.\n\nProject created with :\n\n\u003e ng new project Angular_JWT_Auth\n\nRun appliation : \n\n\u003e ng serve\n \n### Dependencies\n\n\nOther dependencies installed:\n\n- [jwt-decode](https://www.npmjs.com/package/jwt-decode) : To decode accesToken received from Backend\n- [ng-icons](https://ng-icons.github.io/ng-icons/#/)\n- [coreui](https://coreui.io/angular/docs/components/modal/#live-demo) : For modal display\n  \n\u003chr/\u003e\n\nFor styles see :\n  - [Tailwind](https://tailwindcss.com/docs)\n\n\n\u003cb\u003eSetting Tailwind config :\u003c/b\u003e\n\nTo init tailwind in project :\n\nSee [tailwind documentation](https://v3.tailwindcss.com/docs/guides/angular) to see how to install tailwind with Angular.\n\n## Angular Project Details\n\nThis project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.6.\n\n#### Development server\n\nTo start a local development server, run:\n\n```bash\nng serve\n```\n\nOnce 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.\n\n#### Code scaffolding\n\nAngular CLI includes powerful code scaffolding tools. To generate a new component, run:\n\n```bash\nng generate component component-name\n```\n\nFor a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:\n\n```bash\nng generate --help\n```\n\n#### Building\n\nTo build the project run:\n\n```bash\nng build\n```\n\nThis 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.\n\n#### Running unit tests\n\nTo execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:\n\n```bash\nng test\n```\n\n#### Running end-to-end tests\n\nFor end-to-end (e2e) testing, run:\n\n```bash\nng e2e\n```\n\nAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.\n\n#### Additional Resources\n\nFor 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.\n\n\u003chr /\u003e\n\n# Other project details\n\n\u003ch6\u003e== USER ROLES ==\u003c/h6\u003e\n\n\u003ctable style=\"margin: 0 auto; width: fit-content; border: 1px solid black;\"\u003e\n  \u003ctr style=\"background: gray;\"\u003e\n    \u003cth style=\"border: 1px solid black;\"\u003eRole\u003c/th\u003e\n    \u003cth style=\"border: 1px solid black;\"\u003eCode\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003eAdmin\u003c/td\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003e1000\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003eUser\u003c/td\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003e2000\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## == 🏠 Home Page ==\n\nOn 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.\n\u003cdiv style=\"flex inline-flex\"\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/1e2d9b35-b319-4779-985b-73d573973338\" width=\"500\"/\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/b9cbc5fb-eb43-4679-9b28-bb9f662781d5\" width=\"500\"/\u003e \n\u003c/div\u003e\n\n## == 🔐 Login ==\n\nLogin 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.\n\nEach 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.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/2744205d-21ed-41a9-804f-d3c8ecf61811\" width=\"500\"/\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/d694867c-6d8f-4567-a6e7-8dfcf70d2ca5\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == ✅🧔 Create Account ==\n\nCreate 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.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/d80f5a7a-52f9-47e8-bc13-bab515defe23\" width=\"500\"/\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/6c023ae2-d176-4cbc-82f9-bcf249e94d3c\" width=\"500\"\u003e\n\u003c/div\u003e\n\n## == 👨‍💼 Admin Page Users Manage ==\n\nThe admin page displays a list of users with action buttons: Edit and Delete.\n\n‼️WARNING: An administrator cannot be deleted if they are the only administrator of the application.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/3e5588df-d00f-410e-8e7a-52f28b3c6d4a\" width=\"500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/e4f3d5c6-fb76-4d21-85f3-5f5556c94a20\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == 👨‍💻 User Profile ==\n\nThe user profile page is divided into 3 sections:\n\n - 👁️ Form for viewing, editing, and deleting the user : Actions only displayed in your own profile or if you are an admin.\n\n - 🤝 Interactions : Are only displayed in other user, not your own profile.\n\n - 💻 Posts\n\n(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.)\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/15e25896-ef00-4e1c-8d1c-d1f63b14f7e0\" width=\"500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/26e4b158-26ca-45b7-8cce-5f91e43b1251\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n‼️WARNING: Some modifications to sensitive information ( email, username and roles ) may require reauthentication.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/a2ef92f0-4f9e-4682-816a-da847a822e58\" width=\"500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/2545aaeb-c157-4f4c-9d70-e6f88258643f\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n# == ✅➕ MORE ==\n\n## == ↪️ REDIRECTIONS (Navigation)  ==\n\n- 🙅 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.\n- ❓ 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.\n\n## == 🔄️ LOAGING DATA (SKELETONS) ==\n\nDisplay a loading skeleton while the data is being loaded. This feature enhances the user experience.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/4fcd5597-6028-4b5f-a857-fbe804fd2002\" width=\"500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/c1e8e500-d790-4285-8736-6f5b208e37ac\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == ❌ ERROR FORMS ==\n\nDisplay clear error messages in forms so that the user can correct the submitted information.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/7dc1fb87-eebb-4339-9b97-4126ac8f4fce\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/f9ac970e-3629-410b-ab3d-e37b6ab79c1c\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n\u003chr/\u003e\n\u003ch5\u003eAuthor: \u003ci\u003eAndoni ALONSO TORT\u003c/i\u003e\u003ch5\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoniat%2Fangular_jwt_auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandoniat%2Fangular_jwt_auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoniat%2Fangular_jwt_auth/lists"}