This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.2.

Implementing Angular 16 Refresh Token before Expiration with Http Interceptor and JWT.

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


Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

For more detail, please visit:

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

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

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Fullstack with Node:

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

Fullstack with Spring Boot:

Fullstack with Django:

Serverless with Firebase:

Integration (run back-end & front-end on same server/port)

"@angular/platform-browser": "^16.0.0",

"@angular/platform-browser-dynamic": "^16.0.0",

"@angular/router": "^16.0.0",

"bootstrap": "^4.6.2",

"rxjs": "~7.8.0",

"tslib": "^2.3.0",

"zone.js": "~0.13.0"

import { Injectable } from '@angular/core';

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS, HttpErrorResponse } from '@angular/common/http';

import { StorageService } from '../_services/storage.service';

import { AuthService } from '../_services/auth.service';

import { Observable, throwError } from 'rxjs';

import { catchError, switchMap } from 'rxjs/operators';

import { EventData } from '../_shared/event.class';

import { EventBusService } from '../_shared/event-bus.service';

@Injectable()

export class HttpRequestInterceptor implements HttpInterceptor {

private isRefreshing = false;

constructor(

private storageService: StorageService,

private authService: AuthService,

private eventBusService: EventBusService

) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

req = req.clone({

withCredentials: true,

});

return next.handle(req).pipe(

catchError((error) => {

if (

error instanceof HttpErrorResponse &&

!req.url.includes('auth/signin') &&

error.status === 401

) {

return this.handle401Error(req, next);

}

return throwError(() => error);

})

);

}

private handle401Error(request: HttpRequest<any>, next: HttpHandler) {

if (!this.isRefreshing) {

this.isRefreshing = true;

if (this.storageService.isLoggedIn()) {

return this.authService.refreshToken().pipe(

switchMap(() => {

this.isRefreshing = false;

return next.handle(request);

}),

catchError((error) => {

this.isRefreshing = false;

if (error.status == '403') {

this.eventBusService.emit(new EventData('logout', null));

}

return throwError(() => error);

})

);

}

}

return next.handle(request);

}

export const httpInterceptorProviders = [

{ provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },

import { TestBed } from '@angular/core/testing';

import { AuthService } from './auth.service';

describe('AuthService', () => {

let service: AuthService;

beforeEach(() => {

TestBed.configureTestingModule({});

service = TestBed.inject(AuthService);

});

it('should be created', () => {

expect(service).toBeTruthy();

});

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';

const AUTH_API = 'http://localhost:8080/api/auth/';

const httpOptions = {

headers: new HttpHeaders({ 'Content-Type': 'application/json' })

@Injectable({

providedIn: 'root',

export class AuthService {

constructor(private http: HttpClient) {}

login(username: string, password: string): Observable<any> {

return this.http.post(

AUTH_API + 'signin',

{

username,

password,

},

httpOptions

);

}

register(username: string, email: string, password: string): Observable<any> {

return this.http.post(

AUTH_API + 'signup',

{

username,

email,

password,

},

httpOptions

);

}

logout(): Observable<any> {

return this.http.post(AUTH_API + 'signout', { }, httpOptions);

}

refreshToken() {

return this.http.post(AUTH_API + 'refreshtoken', { }, httpOptions);

}

import { TestBed } from '@angular/core/testing';

import { StorageService } from './storage.service';

describe('StorageService', () => {

let service: StorageService;

beforeEach(() => {

TestBed.configureTestingModule({});

service = TestBed.inject(StorageService);

});

it('should be created', () => {

expect(service).toBeTruthy();

});

import { Injectable } from '@angular/core';

const USER_KEY = 'auth-user';

@Injectable({

providedIn: 'root'

export class StorageService {

constructor() {}

clean(): void {

window.sessionStorage.clear();

}

public saveUser(user: any): void {

window.sessionStorage.removeItem(USER_KEY);

window.sessionStorage.setItem(USER_KEY, JSON.stringify(user));

}

public getUser(): any {

const user = window.sessionStorage.getItem(USER_KEY);

if (user) {

return JSON.parse(user);

}

return {};

}

public isLoggedIn(): boolean {

const user = window.sessionStorage.getItem(USER_KEY);

if (user) {

return true;

}

return false;

}

import { TestBed } from '@angular/core/testing';

import { UserService } from './user.service';

describe('UserService', () => {

let service: UserService;

beforeEach(() => {

TestBed.configureTestingModule({});

service = TestBed.inject(UserService);

});

it('should be created', () => {

expect(service).toBeTruthy();

});