/* === π 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 !
- 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;
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.
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/
.
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:
...
// 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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
...
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/
.