Refresh Token in Angular

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

1. 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.

1. 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);

1. 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');
  }),

1. 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))),
);

1. 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);
}),

1. 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!