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-boot-jwt-authentication-example-spring-security-mysql-database/ 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-application-with-springboot-and-mysql-postgresql-restapis-fullstack-angular-httpclient-post-get-put-delete/ 2. Build SpringBoot CRUD Application – FullStack: Frontend (Bootstrap and Ajax) to Backend (SpringBoot and MySQL/PostgreSQL database) https://loizenai.com/build-springboot-crud-application-fullstack-frontend-bootstrap-and-ajax-to-backend-springboot-and-mysql-postgresql-database/ 3. Angular Nodejs Fullstack CRUD Application with MySQL/PostgreSQL – Angular 10-9-8 HttpClient + Nodejs Express, Sequelize ORM https://loizenai.com/angular-nodejs-fullstack-crud-application-with-mysql-postgresql-angular-10-9-8-httpclient-client-nodejs-express-sequelize-orm/

Category