typescript 65 lines · 8 steps

Refreshing tokens with an Angular HttpInterceptor

An HTTP interceptor attaches a bearer token, catches 401s, and refreshes the token once while queuing concurrent requests.

Explained by highlit
Angular Advanced http-interceptor token-refresh rxjs concurrency authentication
1import { Injectable } from '@angular/core';
2import {
3 HttpInterceptor,
4 HttpHandler,
5 HttpRequest,
6 HttpEvent,
7 HttpErrorResponse,
8} from '@angular/common/http';
9import { Observable, throwError, BehaviorSubject } from 'rxjs';
10import { catchError, filter, take, switchMap } from 'rxjs/operators';
11import { AuthService } from './auth.service';
12 
13@Injectable()
14export class AuthInterceptor implements HttpInterceptor {
15 private refreshing = false;
16 private refreshed$ = new BehaviorSubject<string | null>(null);
17 
18 constructor(private auth: AuthService) {}
19 
20 intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
21 const token = this.auth.accessToken;
22 const authReq = token ? this.withToken(req, token) : req;
23 
24 return next.handle(authReq).pipe(
25 catchError((error) => {
26 if (error instanceof HttpErrorResponse && error.status === 401 && token) {
27 return this.handleUnauthorized(req, next);
28 }
29 return throwError(() => error);
30 })
31 );
32 }
33 
34 private withToken(req: HttpRequest<unknown>, token: string): HttpRequest<unknown> {
35 return req.clone({
36 setHeaders: { Authorization: `Bearer ${token}` },
37 });
38 }
39 
40 private handleUnauthorized(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
41 if (this.refreshing) {
42 return this.refreshed$.pipe(
43 filter((token): token is string => token !== null),
44 take(1),
45 switchMap((token) => next.handle(this.withToken(req, token)))
46 );
47 }
48 
49 this.refreshing = true;
50 this.refreshed$.next(null);
51 
52 return this.auth.refreshToken().pipe(
53 switchMap((token) => {
54 this.refreshing = false;
55 this.refreshed$.next(token);
56 return next.handle(this.withToken(req, token));
57 }),
58 catchError((error) => {
59 this.refreshing = false;
60 this.auth.logout();
61 return throwError(() => error);
62 })
63 );
64 }
65}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1A single BehaviorSubject lets many failed requests share one refresh instead of each triggering its own.
  2. 2Interceptors are the right place to centralize cross-cutting auth concerns like token injection and 401 recovery.
  3. 3Guarding a shared operation with a boolean flag turns a stampede of retries into one coordinated wait-and-replay.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
python 
import time
import uuid
 
from django.utils.deprecation import MiddlewareMixin

Attaching per-request context in Django

middleware request lifecycle multi-tenancy
Intermediate 7 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
go 
func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels
Advanced 7 steps

Share this explainer

Here's the card — post it anywhere.

Refreshing tokens with an Angular HttpInterceptor — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code