https://github.com/bezkoder/angular-10-spring-boot-jwt-authentication

Angular 10 Spring Boot JWT Authentication example with Authorization | User Registration & Login
https://github.com/bezkoder/angular-10-spring-boot-jwt-authentication

Last synced: 7 months ago
JSON representation

Angular 10 Spring Boot JWT Authentication example with Authorization | User Registration & Login

• Host: GitHub
• URL: https://github.com/bezkoder/angular-10-spring-boot-jwt-authentication
• Owner: bezkoder
• Created: 2020-12-13T01:33:09.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-12-13T01:59:48.000Z (about 5 years ago)
• Last Synced: 2025-04-14T22:39:42.745Z (9 months ago)
• Language: TypeScript
• Size: 549 KB
• Stars: 30
• Watchers: 3
• Forks: 28
• Open Issues: 0
• 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 10 + 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 10 with HttpInterceptor & Form validation.

## Angular 10 Spring Boot JWT Authentication example

It will be a full stack, with Spring Boot for back-end and Angular 10 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 10 Spring Boot JWT Authentication Public Page](angular-10-spring-boot-jwt-authentication-public-page.png)

– New user registration:

![Angular 10 Spring Boot JWT Authentication User Registration](angular-10-spring-boot-jwt-authentication-user-registration.png)

– Signup Form Validation:

![Angular 10 Spring Boot JWT Authentication Form Validation](angular-10-spring-boot-jwt-authentication-form-validation.png)

– After signup is successful, User can login:

![Angular 10 Spring Boot JWT Authentication User Login](angular-10-spring-boot-jwt-authentication-user-login.png)

-Loggedin User can access Profile page/ User page:

![Angular 10 Spring Boot JWT Authentication Profile Page](angular-10-spring-boot-jwt-authentication-user-profile.png)

![Angular 10 Spring Boot JWT Authentication User Board](angular-10-spring-boot-jwt-authentication-user.png)

– This is UI for **admin**:

![Angular 10 Spring Boot JWT Authentication Admin UI](angular-10-spring-boot-jwt-authentication-authorization-successful.png)

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

![Angular 10 Spring Boot JWT Authentication Authorization](angular-10-spring-boot-jwt-authentication-authorization-failed.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).

[![Angular + Spring Boot JWT Authentication & Authorization example](http://img.youtube.com/vi/QdXHkybzrUU/0.jpg)](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.

![Angular 10 Spring Boot JWT Authentication Flow](angular-10-spring-boot-jwt-authentication-authorization-flow.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

![Angular 10 Spring Boot JWT Authentication Back-end](angular-10-spring-boot-jwt-authentication-authorization-server.png)

## Angular 10 for Front-end

![Angular 10 Spring Boot JWT Authentication Front-end](angular-10-spring-boot-jwt-authentication-authorization-client.png)

For more details, please visit:

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