Interceptors for authentication tokens in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the HTTP_INTERCEPTORS token.

Angular

import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  providers: [
    { provide: [1], useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

AHTTP_INTERCEPTORS

BHTTP_CLIENT

CHTTP_HANDLER

DHTTP_REQUEST

Attempts:

3 left

💡 Hint

Common Mistakes

Using HTTP_CLIENT instead of HTTP_INTERCEPTORS

Forgetting to set multi: true

Using HTTP_HANDLER or HTTP_REQUEST which do not exist

The HTTP_INTERCEPTORS token is used to register HTTP interceptors in Angular.

2fill in blank

medium

Complete the code to implement the intercept method signature.

Angular

intercept(req: HttpRequest<any>, [1]: HttpHandler): Observable<HttpEvent<any>> {
  // interceptor logic
}

Drag options to blanks, or click blank then click option'

Anext

Bhandler

Crequest

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'handler' or 'request' which are not the conventional parameter names

Using 'response' which is not a parameter here

The second parameter of the intercept method is conventionally named next and is of type HttpHandler.

3fill in blank

hard

Fix the error in cloning the request with the Authorization header.

Angular

const authReq = req.[1]({
  headers: req.headers.set('Authorization', `Bearer ${token}`)
});

Drag options to blanks, or click blank then click option'

Aupdate

Bclone

Ccopy

Dmodify

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use 'modify', 'copy', or 'update' which do not exist on HttpRequest

Attempting to change the request directly without cloning

The HttpRequest object is immutable, so you must use clone() to modify it.

4fill in blank

hard

Fill both blanks to forward the cloned request.

Angular

return [1].[2](authReq);

Drag options to blanks, or click blank then click option'

Anext

Bhandle

Csend

Dprocess

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' or 'process' which are not methods on HttpHandler

Using wrong variable names instead of 'next'

Use next.handle(authReq) to forward the modified request to the next interceptor or backend.

5fill in blank

hard

Fill all three blanks to create and provide the interceptor class.

Angular

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

@Injectable()
export class [1] implements [2] {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'my-token';
    const authReq = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) });
    return next.[3](authReq);
  }
}

Drag options to blanks, or click blank then click option'

AAuthInterceptor

BHttpInterceptor

Chandle

DInterceptorService

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class names like 'InterceptorService'

Not implementing the HttpInterceptor interface

Using incorrect method names instead of 'handle'

The class name is AuthInterceptor, it implements HttpInterceptor, and uses next.handle() to forward the request.

Practice

1. What is the main purpose of an HTTP interceptor in Angular when dealing with authentication tokens?

easy

A. To create new HTTP requests manually

B. To automatically add authentication tokens to outgoing HTTP requests

C. To block all HTTP requests from the app

D. To change the URL of HTTP requests

Solution

1. Step 1: Understand the role of interceptors

   Interceptors are used to modify HTTP requests or responses globally in Angular.

2. Step 2: Identify the use of tokens in interceptors

   They commonly add authentication tokens to requests to keep the app secure without repeating code.

3. Final Answer:

   To automatically add authentication tokens to outgoing HTTP requests -> Option B

4. Quick Check:

   Interceptors add tokens = B [OK]

Hint: Interceptors modify requests automatically, especially for tokens [OK]

Common Mistakes:

• Thinking interceptors create requests
• Believing interceptors block requests
• Assuming interceptors change URLs

2. Which of the following is the correct way to clone an HTTP request before adding an authentication token in an Angular interceptor?

easy

A. request.updateHeaders({ Authorization: 'Bearer ' + token })

B. request.headers.set('Authorization', 'Bearer ' + token)

C. request.modifyHeaders('Authorization', 'Bearer ' + token)

D. request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) })

Solution

1. Step 1: Recall Angular HttpRequest immutability

   HttpRequest objects are immutable, so you must clone them to modify headers.

2. Step 2: Use the clone method with headers.set()

   The correct syntax is to call clone() and set the new header inside it.

3. Final Answer:

   request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) }) -> Option D

4. Quick Check:

   Clone request with headers.set() = A [OK]

Hint: Always clone requests before changing headers [OK]

Common Mistakes:

• Trying to modify headers directly without cloning
• Using non-existent methods like modifyHeaders or updateHeaders
• Not using the clone method

3. Given this Angular interceptor code snippet, what will be the Authorization header value in the outgoing HTTP request if the token is 'abc123'?

intercept(request: HttpRequest<any>, next: HttpHandler) {
  const token = 'abc123';
  const cloned = request.clone({
    headers: request.headers.set('Authorization', `Bearer ${token}`)
  });
  return next.handle(cloned);
}

medium

A. Authorization: Bearer abc123

B. Authorization: abc123

C. Authorization: Bearer token

D. No Authorization header will be added

Solution

1. Step 1: Check how the token is added

   The code sets the Authorization header to 'Bearer ' plus the token string 'abc123'.

2. Step 2: Understand string interpolation

   The template string `Bearer ${token}` becomes 'Bearer abc123'.

3. Final Answer:

   Authorization: Bearer abc123 -> Option A

4. Quick Check:

   Header value = 'Bearer abc123' [OK]

Hint: Template strings insert token value directly [OK]

Common Mistakes:

• Forgetting 'Bearer ' prefix
• Using the literal word 'token' instead of variable
• Assuming header is not added

4. Identify the error in this Angular interceptor code that tries to add an auth token:

intercept(req: HttpRequest<any>, next: HttpHandler) {
  const token = 'xyz';
  req.headers.set('Authorization', 'Bearer ' + token);
  return next.handle(req);
}

medium

A. Headers are immutable; must clone request before setting headers

B. Token variable is not defined

C. next.handle() is missing a return statement

D. Authorization header should be lowercase

Solution

1. Step 1: Understand HttpRequest immutability

   HttpRequest headers cannot be changed directly; they are immutable.

2. Step 2: Correct way is to clone the request with new headers

   You must clone the request and set headers on the clone before passing it on.

3. Final Answer:

   Headers are immutable; must clone request before setting headers -> Option A

4. Quick Check:

   Immutable headers require cloning = A [OK]

Hint: Headers are immutable; clone request before modifying [OK]

Common Mistakes:

• Trying to set headers directly on request
• Ignoring immutability of HttpRequest
• Not returning next.handle()

5. You want to create an Angular interceptor that adds an authentication token only to requests targeting your API domain 'api.example.com'. Which approach correctly implements this conditional logic?

hard

A. Modify the token inside next.handle() without cloning

B. Add the token to all requests unconditionally

C. Check if request.url.includes('api.example.com') before cloning and adding the token

D. Use a global variable to store the token and add it after the request completes

Solution

1. Step 1: Identify the need for conditional token addition

   Only requests to 'api.example.com' should have the token added to avoid leaking tokens to other domains.

2. Step 2: Use URL check before cloning and modifying request

   Check request.url.includes('api.example.com') and then clone the request with the token header.

3. Step 3: Avoid modifying requests without cloning or adding tokens globally

   Modifying without cloning or adding tokens to all requests is insecure or incorrect.

4. Final Answer:

   Check if request.url.includes('api.example.com') before cloning and adding the token -> Option C

5. Quick Check:

   Conditional token addition by URL check = C [OK]

Hint: Add tokens only after checking request URL [OK]

Common Mistakes:

• Adding tokens to all requests blindly
• Modifying requests without cloning
• Trying to add tokens after request completes