Challenge Proposal: HTTP Interceptors (functional style)

[T-DiegoF]

Hey! I've been going through the challenges and noticed there's no challenge around HTTP interceptors — which is something every Angular dev ends up dealing with in real projects.

The repo has great coverage of routing guards, signals, and RxJS, but nothing touches the HTTP pipeline layer.

---

Idea

The challenge presents a small app built on top of dummyjson.com — a public API that has real auth (login returns a JWT) and protected endpoints that require a Bearer token.

The app already works: the user can log in and fetch data. But the token is being manually attached in every service call:

getProfile() {
  return this.http.get('https://dummyjson.com/auth/me', {
    headers: { Authorization: `Bearer ${this.authService.token()}` }
  });
}

getCart() {
  return this.http.get('https://dummyjson.com/auth/carts/me', {
    headers: { Authorization: `Bearer ${this.authService.token()}` }
  });
}

Both endpoints require a valid Bearer token — remove the header and the request fails with a 401. This pattern is repeated across multiple services. The goal is to centralize it by creating a functional HttpInterceptorFn using inject() that automatically attaches the token to every outgoing request.

Main task: implement authInterceptor and register it via withInterceptors() in app.config.ts, then clean up the services

Bonus tasks:

• Add an errorInterceptor that handles 401/403/500 responses globally instead of per-service .catchError()
• Add a loadingInterceptor using finalize() (RxJS) that toggles a shared LoadingService signal

---

Why it fits the repo

• Fully documented at https://angular.dev/guide/http/interceptors
• HttpInterceptorFn is the modern recommended approach since Angular 15 — aligns with the functional patterns Angular promotes
• Difficulty: 🟠 intermediate — requires understanding inject() outside of a component context and how HttpHandlerFn chains interceptors
• The use of dummyjson.com keeps the app self-contained with no backend setup needed
• No existing challenge covers the HTTP layer

---

Starter vs expected output

Starter: two or three services manually attaching the JWT on every HttpClient call
Solution: a single authInterceptor registered in app.config.ts, services reduced to clean one-liners

---

I can have the setup PR ready if you want to move forward with this. Let me know!

[tomalaforge]

Yes you are right, I haven't created a challenge about interceptor.
yes that's a very nice challenge. Thx for proposing it.
I let you send me the PR and I'll check it. 🙏