{"id":25115474,"url":"https://github.com/orbitturner/angular-11-jwt-auth-front-client","last_synced_at":"2025-04-22T14:21:58.555Z","repository":{"id":111452366,"uuid":"327605254","full_name":"orbitturner/ANGULAR-11-JWT-AUTH-FRONT-CLIENT","owner":"orbitturner","description":"A DemoProject for presenting my way of managing jwt auth in the front with angular using GUARDS / INTERCEPTORS / LOCALSTORAGE /ANGULAR-JWT2.","archived":false,"fork":false,"pushed_at":"2021-01-08T15:59:07.000Z","size":475,"stargazers_count":14,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T15:51:08.172Z","etag":null,"topics":["angular","angular-jwt","interceptor","jwt-authentication","localstorage","spring-boot"],"latest_commit_sha":null,"homepage":"https://orbitturner.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orbitturner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-01-07T12:27:47.000Z","updated_at":"2024-01-09T02:08:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"2df39c19-176e-47b4-b021-f8a7e9f953ae","html_url":"https://github.com/orbitturner/ANGULAR-11-JWT-AUTH-FRONT-CLIENT","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orbitturner%2FANGULAR-11-JWT-AUTH-FRONT-CLIENT","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orbitturner%2FANGULAR-11-JWT-AUTH-FRONT-CLIENT/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orbitturner%2FANGULAR-11-JWT-AUTH-FRONT-CLIENT/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orbitturner%2FANGULAR-11-JWT-AUTH-FRONT-CLIENT/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orbitturner","download_url":"https://codeload.github.com/orbitturner/ANGULAR-11-JWT-AUTH-FRONT-CLIENT/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250255776,"owners_count":21400411,"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":["angular","angular-jwt","interceptor","jwt-authentication","localstorage","spring-boot"],"created_at":"2025-02-08T02:28:48.996Z","updated_at":"2025-04-22T14:21:58.534Z","avatar_url":"https://github.com/orbitturner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 11 JWT Authentication example\n\u003cpre\u003e\n/* === 🌌 WELCOME TO ORBIT CODE SPACESHIP 🌌  ===\n*   \n*\t  Project :                   \n*\t  By :\n*\n*     ██████╗ ██████╗ ██████╗ ██╗████████╗    ████████╗██╗   ██╗██████╗ ███╗   ██╗███████╗██████╗ \n*    ██╔═══██╗██╔══██╗██╔══██╗██║╚══██╔══╝    ╚══██╔══╝██║   ██║██╔══██╗████╗  ██║██╔════╝██╔══██╗\n*    ██║   ██║██████╔╝██████╔╝██║   ██║          ██║   ██║   ██║██████╔╝██╔██╗ ██║█████╗  ██████╔╝\n*    ██║   ██║██╔══██╗██╔══██╗██║   ██║          ██║   ██║   ██║██╔══██╗██║╚██╗██║██╔══╝  ██╔══██╗\n*    ╚██████╔╝██║  ██║██████╔╝██║   ██║          ██║   ╚██████╔╝██║  ██║██║ ╚████║███████╗██║  ██║\n*     ╚═════╝ ╚═╝  ╚═╝╚═════╝ ╚═╝   ╚═╝          ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝\n*          \n*  AUTHOR : MOHAMED GUEYE [Orbit Turner] - Linkedin: www.linkedin.com/in/orbitturner - Email: orbitturner@orbitturner.com\n*                              GITHUB : Orbit Turner    -   Website: http://orbitturner.com/ \n*\n* ❤ 🔹 💚 ENJOY IT 💚 - 💚 SHARE IT 💚 - 💚 USE IT💚 🔹 ❤\n*/\n\u003c/pre\u003e\n🔻==========================================================🔻\u003cbr/\u003e\n\u003eProject Name            :   ANGULAR-11-JWT-AUTHENTICATION-FRONT\u003cbr/\u003e\n\u003eProject Description     :   A DemoProject for presenting my way of managing jwt auth in the front with \n                               angular using GUARDS / INTERCEPTORS / LOCALSTORAGE / ANGULAR-JWT2\u003cbr/\u003e\n\u003eProject Developer       :   @OrbitTurner : https://orbitturner.com\u003cbr/\u003e\n\u003eProject Main Language   :   TYPESCRIPT - ANGULAR 11\u003cbr/\u003e\n\u003eProject Start Date      :   04/01/2021\u003cbr/\u003e\n\u003eProject Type            :   Web Application / SAAS\u003cbr/\u003e\n\u003eProject License         :   💚 GNU ✔ ITS FREE and OPEN just credit me.\u003cbr/\u003e\n\u003eProject Inspired From   :   MOHAMED YOUSSFI - ANGULAR ACADEMY - BEZCODER\u003cbr/\u003e\n\u003eProject Repository      :   https://github.com/orbitturner/ANGULAR-11-JWT-AUTH-FRONT-CLIENT\u003cbr/\u003e\n\n🔻==========================================================🔻\n\n--------------------------------------------------------------------------\n#IF YOU DOWNLOAD THE PROJECT IT CAN HAVING PROBLEM WORKING BECAUSE IT WAS MADE JUST TO DEMONSTRATE HOW TO SETUP THESE FOLLOWING :\n\u003cbr/\u003e🔻=====================🔻\n-  AUTH.INTERCEPTOR.TS\n-  AUTH.SERVICE.TS\n-  LOGIN.COMPONENT.TS\n-  API.CONFIG.TS\n-  APP.MODULE.TS\n\n\u003e So you can use these files as they are in your project without any difficulty !\n\n## PRE-REQUISITE\n- ANGULAR-JWT2 [\"angular2-jwt\": \"^0.2.3\"]\n- A BACKEND API APP ON SPRING BOOT WITH JWT CONFIGURED IN SPRING SECURITY\n- IF U HAVE PROBLEM WITH ANGULAR-JWT2 REPLACE THE LINE 88 IN (ANGULAR2-JWT.D.TS) WITH THIS:\n\u003e static forRoot(config: AuthConfig): ModuleWithProviders\u003cany\u003e;\n\n\n## Flow for User Registration and User Login\nFor JWT – Token based Authentication with Web API, we’re gonna call 2 endpoints:\n- POST `api/auth/signup` for User Registration\n- POST `api/auth/signin` for User Login\n\nYou can take a look at following flow to have an overview of Requests and Responses that Angular 11 Client will make or receive.\n\n![angular-11-jwt-authentication-flow](angular-11-jwt-authentication-flow.png)\n\n## Angular JWT App Diagram with Router and HttpInterceptor\n![angular-11-jwt-authentication-overview](angular-11-jwt-authentication-overview.png)\n\n\n## With Spring Boot back-end\n\n\u003e This project is the Front Client for a Spring Boot Backend. So it suppose you already have a fully finished Spring boot backend app with Rest Api and Spring Security Configured on JWT.\n\n\u003e The Backend Spring JWTAuthenticationFilter must be configured to receive JSON User to authenticate as the following:\n![spring-jwt-authentication-filter-overview](spring-jwtFilter-configuration.png)\n--------------------------------------------------------------------------\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`.\n\n## With Node.js Express back-end\n\n\u003e If You are on a Node.Js for your backend? You need some modification :\n\nOpen `app/_helpers/auth.interceptor.js`, modify the code to work with **x-access-token** like this:\n```js\n...\n\n// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end\nconst TOKEN_HEADER_KEY = 'x-access-token';   // for Node.js Express back-end\n\n@Injectable()\nexport class AuthInterceptor implements HttpInterceptor {\n  ...\n\n  intercept(req: HttpRequest\u003cany\u003e, next: HttpHandler): Observable\u003cHttpEvent\u003cany\u003e\u003e {\n    ...\n    if (token != null) {\n      // for Spring Boot back-end\n      // authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });\n\n      // for Node.js Express back-end\n      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });\n    }\n    return next.handle(authReq);\n  }\n}\n\n...\n```\n\nRun `ng serve --port 8081` for a dev server. Navigate to `http://localhost:8081/`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forbitturner%2Fangular-11-jwt-auth-front-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forbitturner%2Fangular-11-jwt-auth-front-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forbitturner%2Fangular-11-jwt-auth-front-client/lists"}