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.

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:

Angular 11 Spring Boot JWT Authentication Public Page

– New user registration:

Angular 11 Spring Boot JWT Authentication User Registration

– Signup Form Validation:

Angular 11 Spring Boot JWT Authentication Form Validation

– After signup is successful, User can login:

Angular 11 Spring Boot JWT Authentication User Login

-Loggedin User can access Profile page/ User page:

Angular 11 Spring Boot JWT Authentication Profile Page

Angular 11 Spring Boot JWT Authentication User Board

– This is UI for admin:

Angular 11 Spring Boot JWT Authentication Admin UI

– If a User who doesn’t have Admin role tries to access Admin/Moderator Board page:

Angular 11 Spring Boot JWT Authentication Authorization

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).

Angular + Spring Boot JWT Authentication & Authorization example

The diagram shows flow for User Registration process and User Login process. Angular 11 Spring Boot JWT Authentication Flow

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.

Angular 11 Spring Boot JWT Authentication Back-end

Angular 11 Spring Boot JWT Authentication Front-end

For more details, please visit: https://bezkoder.com/angular-11-spring-boot-jwt-auth/

More Pactice:

Angular 11 + Spring Boot + MySQL

Angular 11 + Spring Boot + PostgreSQL

Angular 11 + Spring Boot + MongoDB

Angular 11 + Spring Boot: File upload example

Angular 11 + Spring Boot: Pagination example

Serverless with Firebase:

Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase

Angular 11 Firestore CRUD | AngularFireStore

Angular 11 Upload File to Firebase Storage example

Integration (run back-end & front-end on same server/port)

How to Integrate Angular with Spring Boot Rest API