Refresh Token in Angular

JayPansuriya — Mon, 30 Dec 2024 09:35:33 +0000

Maintaining user sessions without constant logins is key to a smooth web experience. In this blog, I’ll show you how to implement a token refresh workflow in Angular, handling 401 errors and managing concurrent requests effectively.

What is a Refresh Token Workflow?

In authentication systems, access tokens have a short lifespan to minimize security risks. When an access token expires, the refresh token allows the application to request a new access token from the server without requiring the user to log in again.

Angular Implementation

We’ll implement a refresh token mechanism using Angular’s HttpInterceptor. The goal is to intercept unauthorized requests (401 errors) and refresh the token before retrying the original request.

Complete Workflow

Request Interception:
An interceptor detects a 401 Unauthorized response.
Token Refresh:
If the token is expired, refreshToken fetches a new token.
Retry Request:
The original request is retried with the new token.
Queue Management:
Pending requests are processed once the token is refreshed.

Code Overview

Token Refresh Logic The handleUnauthorized method handles refreshing the token when a request fails due to an expired token.

handleUnauthorized(
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<any> {
  if (!this.isRefreshingToken) {
    this.isRefreshingToken = true;

    // Notify all waiting requests that the token is being refreshed
    this.tokenSubject.next(null);

    return this.refreshToken().pipe(
      switchMap((newToken: string) => {
        if (newToken) {
          this.tokenSubject.next(newToken);
          // Retry the original request with the new token
          return next(this.addToken(req, newToken));
        }

        // If token refresh fails, log out the user
        this.logout();
        return throwError(() => 'Token expired');
      }),
      catchError((error) => {
        this.logout(); // Log out on error
        return throwError(() => error);
      }),
      finalize(() => {
        this.isRefreshingToken = false; // Reset the flag
      }),
    );
  } else {
    // Queue requests while a token is being refreshed
    return this.tokenSubject.pipe(
      filter((token) => token != null),
      take(1),
      switchMap((token) => next(this.addToken(req, token))),
    );
  }
}

The handleUnauthorized function is designed to manage scenarios where an HTTP request receives a 401 Unauthorized status, indicating that the access token has expired or is invalid. This function ensures that the application can refresh the token and retry the failed request seamlessly.

Prevent Multiple Refresh Requests The function uses the isRefreshingToken flag to ensure only one token refresh request is made at a time. If the token is already being refreshed, subsequent requests are queued until the new token is available.

if (!this.isRefreshingToken) {
  this.isRefreshingToken = true;
  this.tokenSubject.next(null);

Refresh the Token If no refresh request is in progress, it initiates a token refresh using the refreshToken method. Once a new token is received:

It is stored in the tokenSubject.
The original request is retried with the updated token.

return this.refreshToken(url).pipe(
  switchMap((newToken: string) => {
    if (newToken) {
      this.tokenSubject.next(newToken);
      return next(this.addToken(req, newToken));
    }
    this.logout();
    return throwError(() => 'Token expired');
  }),

Handle Concurrent Requests If a token refresh is already in progress, the function queues subsequent requests. These requests wait for the tokenSubject to emit the new token before proceeding.

return this.tokenSubject.pipe(
  filter((token) => token != null), // Wait for a non-null token
  take(1), // Only take the first emitted token
  switchMap((token) => next(this.addToken(req, token))),
);

Error Handling If the token refresh fails or throws an exception:

The user is logged out.
An error is returned to the caller.

catchError((error) => {
  this.logout();
  return throwError(() => error);
}),

Cleanup The finalize operator ensures that the isRefreshingToken flag is reset, allowing subsequent refresh requests.

finalize(() => {
  this.isRefreshingToken = false;
}),

Adding the Token to Requests
The addToken method appends the new token to the headers of the outgoing request.

addToken(request: HttpRequest<any>, token: string): HttpRequest<any> {
  return request.clone({
    setHeaders: {
      'X-Token': token,
    },
  });
}

Using It in an Angular HTTP Interceptor

An HttpInterceptor is a perfect place to implement this workflow. It allows you to intercept all HTTP requests and handle token management globally without modifying individual service calls.

return next.handle(request).pipe(
      catchError((error) => {
        if (error.status === 401) {
          return this.authService.handleUnauthorized(req, next);
        }
        return throwError(() => error);
      }),
    );

In summary, a solid token refresh workflow ensures a seamless user experience and secure session management in Angular applications. By handling 401 errors effectively and managing concurrent requests, you can maintain reliability and keep your users happy. Thank you for reading—feel free to share your thoughts or questions below!

What's New in Angular 18: Key Features and Updates

JayPansuriya — Mon, 20 May 2024 06:36:55 +0000

Angular 18 marks a major milestone with numerous enhancements and new features designed to improve speed, capabilities, and ease of development for Angular applications. Here are the key updates you need to know about in Angular 18.

TypeScript 5.4 support
Defer views (lazy loading of dependencies) moved from developer preview to stable stage
Route redirects with functions: more flexible and opens up new possibilities in routing management
New redirect command: enhances redirection capabilities within guards and resolvers
Zone-less change detection: change detection operates independently without intermediaries like zone.js
Template local variable with @let block
Core improvements: ongoing efforts to refine change detection, rendering, and dependency injection
Enhanced Angular DevTools: various enhancements to debugging tools for simplifying the debugging process
Improved forms API: several upgrades to streamline form creation and validation
Upgraded in-template API: simplifies template creation and utilization
Support for web components
Enhanced internationalization capabilities
Introduction of a new router API