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
ThehandleUnauthorizedmethod 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 theisRefreshingTokenflag 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 therefreshTokenmethod. 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 thetokenSubjectto 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 theisRefreshingTokenflag 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!
SOCIAL SHARE CARD GENERATOR