Skip to content

loizenai/angular-10-nodejs-jwt-authentication

Repository files navigation

Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example

Tutorial Link: Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example

Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example

“How to implement Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example?” is always a big common question in development world? So in the tutorial, I guide you very clearly how to build a full stack example to demonstrate an JWT Authentication flow from Angular (signup & signin with by JWT Token) to backend: Nodejs and database MySQL.

ANGULAR FRONT-END WITH INTERCEPTOR

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.

Video Guide – Angular 10 + Nodejs JWT Token based Authentication with MySQL Example

JWT Authentication with Nodejs/Express RestAPIs

JWT Authentication with Nodejs/Express RestAPIs

Overview Nodejs server for JWT Authentication

Overview Nodejs server for JWT Authentication

– SignUp /api/auth/signup:

Nodejs JWT Authentication SignUp – Jack user with PM role

– Sign In /api/auth/signin:

SignIn Jack User

– Access User Page /api/test/user:

Access to protected page

– Access PM Page /api/test/pm:

Access to PM page

– Access to Admin page /api/test/admin:

Jack can NOT access Admin Page

Nodejs Project structure:

Nodejs Project structure

Angular project structure

Angular Project Structure

Related posts

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages