Angular 11 + Spring Boot: JWT Authentication example (with Authorization)
Tags: springboot, jwt, authentication, angular
Published: 2020-12-08 14:09:55

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.

Full Article: [https://bezkoder.com/angular-11-spring-boot-jwt-auth/](https://bezkoder.com/angular-11-spring-boot-jwt-auth/)

Github Source code:
https://github.com/bezkoder/angular-11-spring-boot-jwt-authentication

Newer version with HttpOnly Cookie:
<a href="https://www.bezkoder.com/angular-13-spring-boot-jwt-auth/">Angular 13 + Spring Boot: JWT Authentication & Authorization example</a>

## Angular 11 Spring Boot 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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fqaguux5p10gomnf6sm9.png)

– New user registration:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brsyeqtjdik89gls2f0c.png)

– Signup Form Validation:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1wqz9efae9d7faetfx30.png)

– After signup is successful, User can login:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ha1ap6jlloscvdi7tcto.png)

-Loggedin User can access Profile page/ User page:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ow288x3apu90oxkkt45m.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ktwc66fk42kknz8v2qq3.png)

– This is UI for **admin**:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/37tu2hpp1m0vm5gt8jf8.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ardmljd216wnkc9meodh.png)

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

{% youtube QdXHkybzrUU %}

## Flow for User Registration and User Login
The diagram shows flow for User Registration process and User Login process.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kcjqbmgqtq8ex8wytngr.png)

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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/piua6z9y5yj5lhn6vws3.png)

## Angular 11 for Front-end
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6tcl74sjtlszksjl4z13.png)

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

Newer version with HttpOnly Cookie:
<a href="https://www.bezkoder.com/angular-13-spring-boot-jwt-auth/">Angular 13 + Spring Boot: JWT Authentication & Authorization example</a>