https://github.com/orbitturner/angular-11-jwt-auth-front-client
A DemoProject for presenting my way of managing jwt auth in the front with angular using GUARDS / INTERCEPTORS / LOCALSTORAGE /ANGULAR-JWT2.
https://github.com/orbitturner/angular-11-jwt-auth-front-client
angular angular-jwt interceptor jwt-authentication localstorage spring-boot
Last synced: 12 months ago
JSON representation
A DemoProject for presenting my way of managing jwt auth in the front with angular using GUARDS / INTERCEPTORS / LOCALSTORAGE /ANGULAR-JWT2.
- Host: GitHub
- URL: https://github.com/orbitturner/angular-11-jwt-auth-front-client
- Owner: orbitturner
- Created: 2021-01-07T12:27:47.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-08T15:59:07.000Z (about 5 years ago)
- Last Synced: 2025-03-29T15:51:08.172Z (about 1 year ago)
- Topics: angular, angular-jwt, interceptor, jwt-authentication, localstorage, spring-boot
- Language: TypeScript
- Homepage: https://orbitturner.com
- Size: 464 KB
- Stars: 14
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 11 JWT Authentication example
/* === 🌌 WELCOME TO ORBIT CODE SPACESHIP 🌌 ===
*
* Project :
* By :
*
* ██████╗ ██████╗ ██████╗ ██╗████████╗ ████████╗██╗ ██╗██████╗ ███╗ ██╗███████╗██████╗
* ██╔═══██╗██╔══██╗██╔══██╗██║╚══██╔══╝ ╚══██╔══╝██║ ██║██╔══██╗████╗ ██║██╔════╝██╔══██╗
* ██║ ██║██████╔╝██████╔╝██║ ██║ ██║ ██║ ██║██████╔╝██╔██╗ ██║█████╗ ██████╔╝
* ██║ ██║██╔══██╗██╔══██╗██║ ██║ ██║ ██║ ██║██╔══██╗██║╚██╗██║██╔══╝ ██╔══██╗
* ╚██████╔╝██║ ██║██████╔╝██║ ██║ ██║ ╚██████╔╝██║ ██║██║ ╚████║███████╗██║ ██║
* ╚═════╝ ╚═╝ ╚═╝╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝
*
* AUTHOR : MOHAMED GUEYE [Orbit Turner] - Linkedin: www.linkedin.com/in/orbitturner - Email: orbitturner@orbitturner.com
* GITHUB : Orbit Turner - Website: http://orbitturner.com/
*
* ❤ 🔹 💚 ENJOY IT 💚 - 💚 SHARE IT 💚 - 💚 USE IT💚 🔹 ❤
*/
🔻==========================================================🔻
>Project Name : ANGULAR-11-JWT-AUTHENTICATION-FRONT
>Project Description : A DemoProject for presenting my way of managing jwt auth in the front with
angular using GUARDS / INTERCEPTORS / LOCALSTORAGE / ANGULAR-JWT2
>Project Developer : @OrbitTurner : https://orbitturner.com
>Project Main Language : TYPESCRIPT - ANGULAR 11
>Project Start Date : 04/01/2021
>Project Type : Web Application / SAAS
>Project License : 💚 GNU ✔ ITS FREE and OPEN just credit me.
>Project Inspired From : MOHAMED YOUSSFI - ANGULAR ACADEMY - BEZCODER
>Project Repository : https://github.com/orbitturner/ANGULAR-11-JWT-AUTH-FRONT-CLIENT
🔻==========================================================🔻
--------------------------------------------------------------------------
#IF YOU DOWNLOAD THE PROJECT IT CAN HAVING PROBLEM WORKING BECAUSE IT WAS MADE JUST TO DEMONSTRATE HOW TO SETUP THESE FOLLOWING :
🔻=====================🔻
- AUTH.INTERCEPTOR.TS
- AUTH.SERVICE.TS
- LOGIN.COMPONENT.TS
- API.CONFIG.TS
- APP.MODULE.TS
> So you can use these files as they are in your project without any difficulty !
## PRE-REQUISITE
- ANGULAR-JWT2 ["angular2-jwt": "^0.2.3"]
- A BACKEND API APP ON SPRING BOOT WITH JWT CONFIGURED IN SPRING SECURITY
- IF U HAVE PROBLEM WITH ANGULAR-JWT2 REPLACE THE LINE 88 IN (ANGULAR2-JWT.D.TS) WITH THIS:
> static forRoot(config: AuthConfig): ModuleWithProviders;
## Flow for User Registration and User Login
For JWT – Token based Authentication with Web API, we’re gonna call 2 endpoints:
- POST `api/auth/signup` for User Registration
- POST `api/auth/signin` for User Login
You can take a look at following flow to have an overview of Requests and Responses that Angular 11 Client will make or receive.
## Angular JWT App Diagram with Router and HttpInterceptor
## With Spring Boot back-end
> 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.
> The Backend Spring JWTAuthenticationFilter must be configured to receive JSON User to authenticate as the following:
--------------------------------------------------------------------------
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`.
## With Node.js Express back-end
> If You are on a Node.Js for your backend? You need some modification :
Open `app/_helpers/auth.interceptor.js`, modify the code to work with **x-access-token** like this:
```js
...
// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
const TOKEN_HEADER_KEY = 'x-access-token'; // for Node.js Express back-end
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
...
intercept(req: HttpRequest, next: HttpHandler): Observable> {
...
if (token != null) {
// for Spring Boot back-end
// authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });
// for Node.js Express back-end
authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });
}
return next.handle(authReq);
}
}
...
```
Run `ng serve --port 8081` for a dev server. Navigate to `http://localhost:8081/`.