Angular & Nodejs JWT Authentication MySQL Example – Express RestAPIs + JWT + BCryptjs + Sequelize

Angular 10 & Nodejs JWT Authentication MySQL Example – Express RestAPIs + JWT + BCryptjs + Sequelize

#angular10​ #nodejsjwt​ #jwtauthentication​ #mysql​ #express​
#sequelize​ #bcryptjs​

Angular 10 & Nodejs JWT Authentication MySQL Example – Express RestAPIs + JWT + BCryptjs + Sequelize
Article Link: https://loizenai.com/angular-10-nodejs-jwt-authentication-mysql-examples-tutorials/

In the tutorial, I guide you very clearly how to implement full stack example to demonstrate an JWT Authentication flow with frontend is Angular, backend is Nodejs and database is MySQL.

I. Nodejs JWT Token Based Authentication

– For HTTP Header, we allow x-access-token for JWT.
– When a HTTP request call /signup api, it will also be passed to checkDuplicateUserNameOrEmail() and checkRolesExisted() funtions before going to controller’s signup() funtion.
– JWT Authentication middleware with verifyToken() and role checking funtions (isPmOrAdmin, isAdmin) will be called before controller returns authorized data (based on roles).


II. ANGULAR CLIENT FOR JWT AUTHENTICATION OVERVIEW

– 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

III. Video Structure

0:00​ - Overview Angular & Nodejs JWT DEBUG Proccessing.
0:48​ - Review Angular 10 & Nodejs JWT Authentication article
at: https://loizenai.com/angular-10-nodejs-jwt-authentication-mysql-examples-tutorials/
2:01​ - Download Sourcecode of Angular 10 & Nodejs JWT Authentication projects.


2:17​ - Install needed dependencies for Nodejs JWT Authentication project
2:23​ - Import Nodejs Project to Visual Studio Code
2:29​ - Review Nodejs JWT Authentication project
2:30​ - config.js file
2:33​ - db.config.js file
2:41​ - env.js file
2:46​ - user.model.js file
2:50​ - role.model.js file
2:54​ - router.js file
3:16​ - verifyJwtToken.js file
3:24​ - verifySignUp.js file
3:30​ - server.js file
3:39​ - Start Nodejs Debug project
3:46​ - Check all mysql tables

- SignUp

4:10​ - Debug SignUp with Jack User from Postman to Nodejs JWT Authentication
5:10​ - SignUp with Adam having PM_ROLE and USER_ROLE
5:16​ - SignUp with Thomas having ADMIN Role.

- SignIn

5:24​ - Debug SignIn with Jack user from PostMan to Nodejs JWT Authentication RestAPIs
6:10​ - Access user-protected resources at /api/test/user with Jack's JWT Token - Successfully.
6:40​ - Debug SignIn with Adam user from PostMan to Nodejs - get JWT Token successfully.
6:52​ - Access pm-protected resources at /api/test/pm with Adam's JWT Token - Successfully
7:26​ - Debug SignIn with Thomas ADMIN from PostMan to Nodejs JWT Authentication RestAPIs
7:54​ - Access Admin-protected resource at /api/test/admin with Thomas's JWT Token - Successfully

*** Working with Angular Project ***

8:41​ - Install dependencies for Angular project
8:49​ - Start Angular project

8:51​ - Review Angular Project Structure
9:04​ - auth-interceptor.ts file
9:08​ - auth.service.ts file
9:13​ - jwt-response.ts file
9:15​ - login-info.ts file
9:17​ - signup-info.ts file
9:20​ - token-storage.service.ts file
9:30​ - home component
9:36​ - Login Component
9:48​ - PM Component
9:51​ - register component
9:59​ - User HTTP services
10:03​ - User Component
10:09​ - App Routing Module

10:28​ - Demo with Angular Nodejs JWT Token Authentication Project
11:17​ - Start SignUP DEBUG from ANGULAR 10 project to Nodejs API with Jack USER_ROLE.
13:06​ - Debug Login from Angular project with Jack User Role
14:21​ - Debug get USER content from Angular to Nodejs RestAPI successfully
14:52​ - Angular Debug get Home Content of Jack USER_ROLE
15:33​ - SignUp Adam PM_ROLE from PostMan
16:01​ - Angular Debug Sign In with Adam PM_ROLE - Successfully
16:58​ - Angular Debug Logout from HOME Component
17:08​ - SignUp Thomas with Admin role from PostMan
17:49​ - Login with Thomas ADMIN from Angular Client
18:20​ - Angular get Admin Content from Nodejs JWT Server - DEBUG
18:42​ - DEBUG Angular Get Home Content of Admin User

IV. Related posts

1. https://loizenai.com/angular-10-django-mysql-rest-crud-api-example/
2. https://loizenai.com/nodejs-token-based-authentication-jwt-json-web-tokens-authentication-mysql-example/

Тэги:

#angular #nodejs #jwt #authentication #express #restapi

Скачать видео