The tutorial is Part 1 of the series: Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack. In this part, we show you Overview and Architecture of the System (from Angular frontend to SpringBoot backend). You will see the combination of big components and what you need to do for the security part (authentication & authorization) of full-stack web development.
JSON Web Token
JSON Web Token (JWT) defines a compact and self-contained way for securely transmitting information between parties as a JSON object.
Scenarios where JSON Web Tokens are useful:
- Authorization: the most common scenario for using JWT. Single Sign On is a feature that widely uses JWT
- Information Exchange: Because JWTs can be signed, JSON Web Tokens are a good way of securely transmitting information between parties.
JSON Web Tokens consist of 3 parts:
JWT looks like
Header consists of two parts:
- token type.
- hashing algorithm.
Payload contains the claims. Claims are statements about an entity and additional information.
There are 3 types of claims ->
Registered claims-> These are a set of predefined claims:
Signature -> To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
base64UrlEncode(header) + "." +
Combine all together, we get 3 Base64-URL strings separated by dots,
When accessing a protected route or resource, the user agent should send the
JWT, typically in the Authorization header using the Bearer schema.
Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ0aG9tYXNna3oiLCJpYXQiOjE1Mzc2MDMxOTUsImV4cCI6MTUzNzY4OTU5NX0.m2YMjTYmOnfR7nnVNxqCzWbQ2FhKRe1eiizxnC2TF4eAoEzKlwo7PheVkKcxj08ST3vB-ZOIhiORvYVfSgzcog
See more at: In-depth Introduction to JSON Web Tokens
Angular Spring Boot JWT Authentication example
We will build an application, from frontend (Angular) to backend (Spring Boot), which allows users to register, login account. This application is secured with JWT (JSON Web Token) authentication and Spring Security. Then, depending on the role of current User (user, pm or admin), this system accepts what he can access:
The diagram below show how our system handles User Registration and User Login processes:
Full Stack Architecture
Spring Boot back-end with Spring Security
This is diagram for Spring Security/JWT classes that are separated into 3 layers:
– Spring Security
– REST API
SecurityContextHolder provides access to the
SecurityContext holds the
Authentication and possibly request-specific security information.
Authentication represents the principal which includes
GrantedAuthority that reflects the application-wide permissions granted to a principal.
UserDetails contains necessary information to build an
Authentication object from DAOs or other source of security data.
UserDetailsService helps to create a
UserDetails from a String-based username and is usually used by
OncePerRequestFilter) pre-processes HTTP request, from Token, create
Authentication and populate it to
JwtProvider validates, parses token String or generates token String from
UsernamePasswordAuthenticationToken gets username/password from login Request and combines into an instance of
DaoAuthenticationProvider (with help of
UserDetailsService & PasswordEncoder) to validate instance of
UsernamePasswordAuthenticationToken, then returns a fully populated
Authentication instance on successful authentication.
SecurityContext is established by calling
SecurityContextHolder.getContext().setAuthentication(…) with returned
authentication object above.
– Access to Restful API is protected by HTTPSecurity and authorized with Method Security Expressions.
For more details, please visit: Spring Security – JWT Authentication Architecture | Spring Boot
Angular front-end with Interceptor
app.component is the parent component that contains
router-outlet for routing. It also has an
authority variable as the condition for displaying items on navigation bar.
admin.component correspond to Angular Components for User Board, PM Board, Admin Board. Each Board uses
user.service to access authority data.
register.component contains User Registration form, submission of the form will call
login.component contains User Login form, submission of the form will call
user.service gets access to authority data from Server using Angular
auth.service handles authentication and signup actions with Server using Angular
– every HTTP request by
$http service will be inspected and transformed before being sent to the Server by
auth-interceptor check and get Token from
token-storage.service to add the Token to Authorization Header of the HTTP Requests.
token-storage.service manages Token inside Browser’s
For more details about:
- Interceptor: Angular 6 Http Interceptor – with Node.js RestAPIs
- Routing: Angular 6 Routing/Navigation – with Angular Router Service
- Form Validation: Angular 6 Form Validation example – Template-driven Forms
- Angular 6 HttpClient example: Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4
Last updated on January 6, 2020.