Interceptors for authentication tokens in Angular - Mini Project: Build & Apply

Interceptors for authentication tokens

📖 Scenario: You are building a simple Angular app that needs to send an authentication token with every HTTP request to a server. This token proves the user is logged in.To avoid adding the token manually in every request, you will create an HTTP interceptor. This interceptor will automatically add the token to the request headers.

🎯 Goal: Create an Angular HTTP interceptor that adds a fixed authentication token to the Authorization header of all outgoing HTTP requests.

📋 What You'll Learn

Create a constant token string called authToken with value 'Bearer abc123token'.

Create an Angular HTTP interceptor class called AuthInterceptor.

In the interceptor, add the Authorization header with the authToken to every outgoing HTTP request.

Register the interceptor as a provider in the Angular dependency injection system.

💡 Why This Matters

🌍 Real World

Most web apps need to send authentication tokens with API requests to prove the user is logged in. Interceptors automate this process.

💼 Career

Understanding Angular interceptors is essential for frontend developers working with secure APIs and authentication.

1

DATA SETUP: Create the authentication token constant

Create a constant string called authToken and set it to 'Bearer abc123token'.

Angular

# Create a constant authToken with value 'Bearer abc123token'
# Your code here

Need a hint?

This token will be added to HTTP request headers later.

2

CONFIGURATION: Create the AuthInterceptor class skeleton

Create an Angular HTTP interceptor class called AuthInterceptor that implements HttpInterceptor. Import HttpInterceptor and HttpRequest from @angular/common/http. Add the method intercept(req: HttpRequest, next: HttpHandler) returning next.handle(req).

Angular

const authToken = 'Bearer abc123token';
// Create AuthInterceptor class implementing HttpInterceptor
// Your code here

Need a hint?

Start with a basic interceptor that just passes requests through.

3

CORE LOGIC: Add the Authorization header with the token

Inside the intercept method, clone the incoming req and add a new header Authorization with the value of authToken. Then pass the cloned request to next.handle().

Angular

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

const authToken = 'Bearer abc123token';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler) {
    // Clone req and add Authorization header
    // Your code here
  }
}

Need a hint?

Use req.clone() to add headers without changing the original request.

4

COMPLETION: Register the interceptor provider

Add a provider object to register AuthInterceptor as an HTTP interceptor. Use provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, and multi: true. Import HTTP_INTERCEPTORS from @angular/common/http.

Angular

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

const authToken = 'Bearer abc123token';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler) {
    const authReq = req.clone({
      setHeaders: { Authorization: authToken }
    });
    return next.handle(authReq);
  }
}

// Add provider registration below
// Your code here

Need a hint?

This provider will be added to your Angular module's providers array.