Skip to content

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

Notifications You must be signed in to change notification settings

bezkoder/angular-11-spring-boot-jwt-authentication

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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

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

Flow for User Registration and User Login

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.

Spring Boot & Spring Security for Back-end

Angular 11 Spring Boot JWT Authentication Back-end

Angular 11 for Front-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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published