Angular 8 JWT Authentication example

Flow for User Registration and User Login

For JWT – Token based Authentication with Web API, we’re gonna call 2 endpoints:

• POST api/auth/signup for User Registration
• POST api/auth/signin for User Login

You can take a look at following flow to have an overview of Requests and Responses that Angular 10 Client will make or receive.

Angular JWT App Diagram with Router and HttpInterceptor

For more detail, please visit:

Angular 8 JWT Authentication with Web API

Angular 10 JWT Authentication with Web API

With Spring Boot back-end

Angular 8 + Spring Boot: JWT Authentication & Authorization example

Angular 10 + Spring Boot: JWT Authentication & Authorization example

Run ng serve for a dev server. Navigate to http://localhost:4200/.

With Node.js Express back-end

Node.js Express + Angular 8: JWT Authentication & Authorization example

Node.js Express + Angular 10: JWT Authentication & Authorization example

Open app/_helpers/auth.interceptor.js, modify the code to work with x-access-token like this:

...

// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
const TOKEN_HEADER_KEY = 'x-access-token';   // for Node.js Express back-end

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  ...

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    ...
    if (token != null) {
      // for Spring Boot back-end
      // authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });

      // for Node.js Express back-end
      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });
    }
    return next.handle(authReq);
  }
}

...

Run ng serve --port 8081 for a dev server. Navigate to http://localhost:8081/.

More Practice

Angular 8 CRUD application example with Web API

Angular 8 Pagination example | ngx-pagination

Angular 8 Multiple Files upload example

Fullstack with Node.js Express:

Angular 8 + Node.js Express + MySQL

Angular 8 + Node.js Express + PostgreSQL

Angular 8 + Node.js Express + MongoDB

Fullstack with Spring Boot:

Angular 8 + Spring Boot + MySQL

Angular 8 + Spring Boot + PostgreSQL

Angular 8 + Spring Boot + MongoDB

Fullstack with Django:

Angular 8 + Django Rest Framework