Angular 10 + Spring Boot JWT Token Based Authentication Example – Spring Security + MySQL [DEBUG]
#angular10 #springbootjwt #authentication
#springsecurityjwt #mysql #angularsecurity
Angular 10 Spring Boot JWT Authentication Example – Spring Security + MySQL
Article Link:
https://loizenai.com/angular-spring-b...
In the tutorial, I guide you very clearly how to implement full stack example to demonistrade an jwt authentication flow with frontend is Angular, backend is SpringBoot and MySQL.
We will build an application, from frontend (Angular) to backend (Spring Boot), which allows users to register, login account. This application is secured with JWT (JSON Web Token) authentication and Spring Security. Then, depending on the role of current User (user, pm or admin), this system accepts what he can access
I. Video Structure
1. Introduction Part
0:00 - Overall Project Angular + SpringBoot JWT Authentication Running Resuls
0:47 - Overviewl Article Angular SpringBoot JWT Authentication
1:55 - Download SpringBoot JWT Authentication & Angular 10 Projects
2. SpringBoot JWT Security Debug
2:15 - Review SpringBoot project
4:48 - Start Running DEBUG mode
4:54 - Check MySQL database for created tables
5:16 - Start SIGN UP a user: JACK with USER_ROLE
6:49 - Error - USER_ROLE not found
6:57 - Insert User roles
7:07 - Sign Up Jack with USER_ROLE again and successfully.
7:33 - Sign Up a User Adam with USER & PM ROLEs
8:37 - Sign Up a User Thomas with ADMIN ROLE
9:25 - Start SignIn
9:34 - Debug Sign in with User JACK
10:29 - Successful Login with User JACK
10:54 - GET protected Resource with user: JACK and USER_ROLE
12:14 - Jack accesses resource at /api/test/user successfully.
12:15 - Jack start access a resource at /api/test/pm but do NOT have permission.
12:33 - Forbidden access
12:42 - Jack try to access a resource at /api/test/admin but NOT have permission.
12:54 - Sign in with Adam USer
13:09 - Sign In Successfully with Adam user
13:20 - Adam Try to access a resource at /api/test/pm - Successfully
Adam also can access a resource at /api/test/user but not access ADMIN resource
13:59 - Thomas access resource at /api/test/admin successfully.
Thomas also can access all resouce at /api/test/user and /api/test/pm
14:40 - Try to Access resource with invalid token - NO WORK: Unauthorized Error
3. Angular 10 Spring JWT Full FLow Debug
15:06 - Install needed dependencies for Angular Project
15:13 - Run Angular Project
15:18 - Review Angular Project Structure
15:30 - user.service.ts
15:39 - auth services
15:50 - token.storage.service.ts file
16:06 - auth.service.ts
16:13 - auth-interceptor.ts file
16:19 - admin component
16:26 - home component
16:35 - login component
16:55 - pm component
17:00 - review register component
17:08 - review user component
17:14 - review app.component.html
17:24 - review app-routing.module.ts file
17:32 - review app.component.ts file
17:45 - Start Running Angular application - Overview Angular - SpringBoot JWT Application.
18:45 - Check database table prepare for Full Stack Debug.
19:07 - Start Debug Sign Up with username = jack-loizenai.com
21:39 - DEBUG Agnular Client to SpringBoot Backend - Start Login with username: jack-loizenai.com
23:38 - Start Angular Client Debug with Home Component
24:00 - Start Angular Client Debug with UserBoard Component
24:24 - Angular Client get the content from SpringBoot RestAPIs at /api/test/user successfully.
25:02 - Start Debug Logout from Angular Client
25:42 - Start SignUp Adam user with ROLES PM & USER by PostMan client
25:51 - Start SignUp Thomas user with ADMIN_ROLE
26:35 - Start Debug Login From Angular Client
27:33 - Start DEBUG from Angular Client to SpringBoot RestAPIs: GET content from PM Board with Adam USER.
28:13 - Start DEBUG from Angular Client with Home Component
28:43 - Start DEBUG from Angular Client with Thomas User (ADMIN ROLE) - Login.
II. Related Post
1. Angular CRUD Application with SpringBoot and MySQL/PostgreSQL RestAPIs – Fullstack Angular 10-9-8 HttpClient Post/Get/Put/Delete
https://loizenai.com/angular-crud-app...
2. Build SpringBoot CRUD Application – FullStack: Frontend (Bootstrap and Ajax) to Backend (SpringBoot and MySQL/PostgreSQL database)
https://loizenai.com/build-springboot...
3. Angular Nodejs Fullstack CRUD Application with MySQL/PostgreSQL – Angular 10-9-8 HttpClient + Nodejs Express, Sequelize ORM
https://loizenai.com/angular-nodejs-f...
