PEAN (PostgreSQL + Express.js + Angular 13 + Node.js) stack CRUD example with JWT Authentication & Authorization.
This project is a full-stack (Angular 13 + Node.js + PostgreSQL) To-do Application.
The back-end server uses Node.js + Express framework for creating REST APIs and JWT for Authentication & Authorization.
The front-end side is an Angular App with HttpClient and Router.
This app doesn not use ejs templating engine to render the views. The views are rendered from the client-side as a Single Page Application using Angular 13 routing
With the To-Do application:
- User can signup to create new account, or login with username & password.
- User information is stored in PostgreSQL database
- The User role (admin,, user), authorizes the User to access resources
- Authorized User can Add/delete a todo item
- The To-Do item is stored in PostgreSQL database
• Node.js exports REST APIs & interacts with PostgreSQL Database using Sequelize ORM.
• Angular Client sends HTTP Requests and retrieves HTTP Responses using HTTPClient, consume data on the components. Angular Router is used for navigating to pages.
HTTP request that matches a Express routes, is checked by CORS Middleware before reaching the Security layer of the application
Security layer includes:
- JWT Authentication Middleware: verify SignUp, verify token
- Authorization Middleware: check User’s roles with record in database
If these middlewares throw any error, a message is be sent as HTTP response.
Controllers interact with PostgreSQL Database via Sequelize and send HTTP response (token, user information and to-do items based on roles) to the client.
The diagram shows flow of User Registration, User Login and Authorization process.
- Express Js for REST APIs
- bcryptjs for password encrytion
- jsonwebtoken to token based authentication & authorization
- Sequelize for database CRUD operations
- PostgreSQL for data storage
– config
- configure PostgreSQL database & Sequelize
- configure Auth Key
– routes
auth.routes.js: POST signup & signinuser.routes.js: GET public & protected resources
– middlewares
verifySignUp.js: check duplicate Username or EmailauthJwt.js: verify Token, check User roles in database
– controllers
auth.controller.js: handle signup & signin actionsuser.controller.js: return public & protected content
– models for Sequelize Models
user.model.jsrole.model.js
– server.js: import and initialize neccesary modules and routes, listen for connections.
These are APIs that Node.js Express App will export:
| Methods | Urls | Actions |
|---|---|---|
| POST | /api/auth/signup | signup new account |
| POST | /api/auth/signup | login an account |
| GET | /api/user | retrieve all users |
| GET | /api/user/:id | retrieve user by id |
| GET | /api/items | retrieve all to-do items |
| GET | /api/items/:id | retrieve to-do item by id |
| DELETE | /api/items/:id | remove a to-do item by id |
The frontened implementation includes HttpInterceptor, Router, HttpClient, Route Guard with implements CanActivate & Form Validation).
Signup Page:
Login Page:
Validation:
– The App component is a container using Router. It gets user token & user information from Browser Session Storage via token-storage.service. Then the navbar now can display based on the user login state & roles.
– Login & Register components have form for submitting data (with support of ReactiveForm Validation). They use token-storage.service for checking state and auth.service for sending signin/signup requests.
– auth.service uses Angular HttpClient ($http service) to make authentication requests.
– every HTTP request by $http service will be inspected and transformed before being sent by auth-interceptor.
– Dashboard components will be displayed depending on JWT auth token from Session Storage. In this components, we use user.service to get protected resources from API.
- Angular 13
- RxJS 6
- Bootstrap 4