Interceptors for authentication tokens in Angular

Introduction

Interceptors help add authentication tokens to your app's requests automatically. This keeps your app secure without repeating code.

When you want to send a login token with every request to a server.

When you need to refresh tokens before sending requests.

When you want to handle errors like expired tokens globally.

When you want to add headers or modify requests easily.

When you want to keep your components clean from authentication details.

Syntax

Angular

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'your-auth-token';
    const clonedReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
    return next.handle(clonedReq);
  }
}

The intercept method runs on every HTTP request.

Use req.clone() to avoid changing the original request.

Examples

This example adds the token only if it exists in local storage.

Angular

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = localStorage.getItem('authToken');
  if (token) {
    const clonedReq = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
    return next.handle(clonedReq);
  }
  return next.handle(req);
}

This example adds a custom header instead of an auth token.

Angular

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const clonedReq = req.clone({
    setHeaders: { 'Custom-Header': 'MyValue' }
  });
  return next.handle(clonedReq);
}

Sample Program

This interceptor checks if a token exists in local storage. If yes, it adds it as a Bearer token in the Authorization header for every HTTP request. This way, your app sends the token automatically without extra code in components.

Angular

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('authToken');
    if (token) {
      const clonedReq = req.clone({
        setHeaders: { Authorization: `Bearer ${token}` }
      });
      return next.handle(clonedReq);
    }
    return next.handle(req);
  }
}

// Usage in app.module.ts providers array:
// { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

Important Notes

Remember to register your interceptor in the app module providers.

Interceptors run in the order they are provided.

Do not modify the original request directly; always clone it.

Summary

Interceptors add tokens to HTTP requests automatically.

They keep your app secure and code clean.

Always clone requests before modifying headers.