https://github.com/bezkoder/angular-11-spring-boot-jwt-authentication
Angular 11 Spring Boot JWT Authentication example with Authorization | User Registration & Login
https://github.com/bezkoder/angular-11-spring-boot-jwt-authentication
angular angular11 jwt-authentication spring-boot spring-security spring-security-jwt
Last synced: 7 months ago
JSON representation
Angular 11 Spring Boot JWT Authentication example with Authorization | User Registration & Login
- Host: GitHub
- URL: https://github.com/bezkoder/angular-11-spring-boot-jwt-authentication
- Owner: bezkoder
- Created: 2020-12-13T02:06:40.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-09T04:39:57.000Z (almost 3 years ago)
- Last Synced: 2025-04-14T22:39:32.590Z (9 months ago)
- Topics: angular, angular11, jwt-authentication, spring-boot, spring-security, spring-security-jwt
- Language: TypeScript
- Homepage:
- Size: 551 KB
- Stars: 82
- Watchers: 5
- Forks: 74
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
In this tutorial, I will show you how to build a full stack Angular 11 + Spring Boot JWT Authentication example. The back-end server uses Spring Boot with Spring Security for JWT Authentication & Authorization, Spring Data JPA for interacting with database. The front-end will be built using Angular 11 with HttpInterceptor & Form validation.
## Angular 11 Spring Boot JWT Authentication example
It will be a full stack, with Spring Boot for back-end and Angular 11 for front-end. The system is secured by Spring Security with JWT Authentication.
User can signup new account, login with username & password.
Authorization by the role of the User (admin, moderator, user)
Screenshots
Here are UI screenshots of our system.
– Anyone can access a public page before logging in:
– New user registration:
– Signup Form Validation:
– After signup is successful, User can login:
-Loggedin User can access Profile page/ User page:
– This is UI for **admin**:
– If a User who doesn’t have Admin role tries to access **Admin**/**Moderator Board** page:
## Demo
This is full Angular + Spring Boot JWT authentication demo (with form validation, check signup username/email duplicates, test authorization with 3 roles: Admin, Moderator, User).
[](http://www.youtube.com/watch?v=QdXHkybzrUU)
## Flow for User Registration and User Login
The diagram shows flow for User Registration process and User Login process.
It’s not too difficult to understand. We have 2 endpoints for authentication:
* `api/auth/signup` for User Registration
* `api/auth/signin` for User Login
If Client wants to send request to protected data/endpoints, a legal JWT must be added to HTTP Authorization Header.
## Spring Boot & Spring Security for Back-end
## Angular 11 for Front-end
For more details, please visit:
[https://bezkoder.com/angular-11-spring-boot-jwt-auth/](https://bezkoder.com/angular-11-spring-boot-jwt-auth/)
More Pactice:
> [Angular 11 + Spring Boot + MySQL](https://bezkoder.com/angular-11-spring-boot-crud/)
> [Angular 11 + Spring Boot + PostgreSQL](https://bezkoder.com/angular-11-spring-boot-postgresql/)
> [Angular 11 + Spring Boot + MongoDB](https://bezkoder.com/angular-11-spring-boot-mongodb/)
> [Angular 11 + Spring Boot: File upload example](https://bezkoder.com/angular-11-spring-boot-file-upload/)
> [Angular 11 + Spring Boot: Pagination example](https://bezkoder.com/pagination-spring-boot-angular-11/)
Serverless with Firebase:
> [Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)
> [Angular 11 Firestore CRUD | AngularFireStore](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)
> [Angular 11 Upload File to Firebase Storage example](https://bezkoder.com/angular-11-file-upload-firebase-storage/)
Integration (run back-end & front-end on same server/port)
> [How to Integrate Angular with Spring Boot Rest API](https://bezkoder.com/integrate-angular-spring-boot/)