The tutorial is Part 1 of the series: Angular & Nodejs JWT Authentication fullstack | Nodejs/Express RestAPIs + JWT + BCryptjs + Sequelize + MySQL. In this part, we show you Overview and Architecture of the System (from Angular frontend to Nodejs/Express 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.
– Part 2: Build Backend
– Part 3: Build Frontend
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:
- Header
- Payload
- Signature
-> JWT
looks like Header-Base64-String.Payload-Base64-String.Signature-Base64-String
Header consists of two parts:
- token type.
- hashing algorithm.
-> Example:
{ "alg": "HS256", "typ": "JWT" }
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:iss
(issuer),exp
(expiration time),sub
(subject)Public claims
Private claims
Example ->
{ "id": 3, "iat": 1538339534, "exp": 1538425934 }
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.
Example ->
HMACSHA512( base64UrlEncode(header) + "." + base64UrlEncode(payload), your-256-bit-secret )
Combine all together, we get 3 Base64-URL strings separated by dots,
Example:
– Encoded ->
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNTM4MzM5NTM0LCJleHAiOjE1Mzg0MjU5MzR9.wKse6-ERNP4g_sPBdM72GZgpNpHH87UGbzYH3_0mdpo
– Decoded ->
Angular Nodejs/Express JWT Authentication example
Goal
We will build an application, from frontend (Angular) to backend (Nodejs/Express), which allows users to register, login account. This application is secured with JWT (JSON Web Token) authentication and Nodejs middleware 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:
Video
Full Stack Architecture
Nodejs/Express back-end with Middleware Security
HTTP request that matches route will be accepted by CORS Middleware
before coming to Security layer.
Security layer includes:
– JWT Authentication Middleware
: verify SignUp, verify token
– Authorization Middleware
: check User’s roles
Main Business Logic Processing
interacts with database via Sequelize
and send HTTP response (token, user information, data based on roles…) to client.
Angular front-end with Interceptor
– app.component
is the parent component that contains routerLink
and router-outlet
for routing. It also has an authority
variable as the condition for displaying items on navigation bar.
– user.component
, pm.component
, 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 auth.service
.
– login.component
contains User Login form, submission of the form will call auth.service
and token-storage.service
.
– user.service
gets access to authority data from Server using Angular HttpClient
($http
service).
– auth.service
handles authentication and signup actions with Server using Angular HttpClient
($http
service).
– every HTTP request by $http
service will be inspected and transformed before being sent to the Server by auth-interceptor
(implements HttpInterceptor
).
– auth-interceptor
check and get Token from token-storage.service
to add the Token to HTTP Request Header.
– token-storage.service
manages Token inside Browser’s sessionStorage
.
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 Crud + Node.js Express Sequelize + MySQL – Get/Post/Put/Delete RestAPIs