bezkoder/angular-14-refresh-token

Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor

Implementing Angular 14 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 14 Client will make or receive.

Angular JWT Refresh Token Flow

For more detail, please visit:

Angular 14 Refresh Token with Interceptor and JWT example

Angular 14 JWT Authentication & Authorization with Web API example

Fullstack

Angular 14 + Spring Boot: JWT Authentication and Authorization example

Angular 14 + Node.js Express: JWT Authentication and Authorization example

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

More practice

Angular CRUD example with Web API

Angular Pagination example

Angular File upload example with Progress bar

Fullstack with Node:

Angular + Node Express + MySQL example

Angular + Node Express + PostgreSQL example

Angular + Node Express + MongoDB example

Angular + Node Express: File upload example

Fullstack with Spring Boot:

Angular + Spring Boot + H2 Embedded Database example

Angular + Spring Boot + MySQL example

Angular + Spring Boot + PostgreSQL example

Angular + Spring Boot + MongoDB example

Angular + Spring Boot: File upload example

Fullstack with Django:

Angular + Django example

Serverless with Firebase:

Angular 14 Firebase CRUD with Realtime DataBase

Angular 14 Firestore CRUD example

Angular 14 Firebase Storage: File Upload/Display/Delete example

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

How to integrate Angular with Node Restful Services

How to Integrate Angular with Spring Boot Rest API

angular-14-refresh-token's Issues

the interceptor in your example is deprecated

instead of class, angular is now moving on to use const for interceptor
the way you mentioning is no longer valid, we'll have to implement the refresh with the new format, e.g.:
export const authInterceptor = (req: HttpRequest, next: HttpHandlerFn): Observable<HttpEvent> => {
return next(newReq).pipe(
catchError((error) => {
// Catch "401 Unauthorized" responses
if (error instanceof HttpErrorResponse && error.status === 401) {
// mergemap refreshtoken call
}
return throwError(error);
}),
);
any idea please?