Interceptor doesn't activate and set the header in Angular 18

My interceptor doesn't work in Angular version 18. The backend says it can't add the header to the request:

Pre-authenticated entry point called. Rejecting access
2024-09-29T12:39:52.861+02:00 DEBUG 14733 --- [nio-8080-exec-4] o.s.security.web.FilterChainProxy : Securing GET /error
2024-09-29T12:39:52.861+02:00 DEBUG 14733 --- [nio-8080-exec-4] o.s.s.w.a.AnonymousAuthenticationFilter : Set SecurityContextHolder to anonymous SecurityContext
2024-09-29T12:39:52.861+02:00 DEBUG 14733 --- [nio-8080-exec-4] o.s.s.w.a.Http403ForbiddenEntryPoint : Pre-authenticated entry point called. Rejecting access
2024-09-29T12:39:53.031+02:00 DEBUG 14733 --- [nio-8080-exec-5] o.s.security.web.FilterChainProxy : Securing GET /posts/all
2024-09-29T12:39:53.046+02:00 WARN 14733 --- [nio-8080-exec-5] c.antonsteve96.ngrx.security.JwtFilter : Authorization header missing or does not start with 'Bearer '
2024-09-29T12:39:53.046+02:00 DEBUG 14733 --- [nio-8080-exec-5] o.s.s.w.a.AnonymousAuthenticationFilter : Set SecurityContextHolder to anonymous SecurityContext
2024-09-29T12:39:53.046+02:00 DEBUG 14733 --- [nio-8080-exec-5] o.s.security.web.FilterChainProxy : Secured GET /posts/all
2024-09-29T12:39:53.047+02:00 DEBUG 14733 --- [nio-8080-exec-5] horizationManagerBeforeMethodInterceptor : Authorizing method invocation ReflectiveMethodInvocation: public org.springframework.http.ResponseEntity com.antonsteve96.ngrx.post.PostController.getAllPosts(); target is of class [com.antonsteve96.ngrx.post.PostController]
2024-09-29T12:39:53.047+02:00 DEBUG 14733 --- [nio-8080-exec-5] horizationManagerBeforeMethodInterceptor : Failed to authorize ReflectiveMethodInvocation: public org.springframework.http.ResponseEntity com.antonsteve96.ngrx.post.PostController.getAllPosts(); target is of class [com.antonsteve96.ngrx.post.PostController] with authorization manager org.springframework.security.authorization.method.PreAuthorizeAuthorizationManager@632fe645 and decision ExpressionAuthorizationDecision [granted=false, expressionAttribute=isAuthenticated()]
2024-09-29T12:39:53.047+02:00 DEBUG 14733 --- [nio-8080-exec-5] o.s.s.w.a.Http403ForbiddenEntryPoint : Pre-authenticated entry point called. Rejecting access
2024-09-29T12:39:53.048+02:00 DEBUG 14733 --- [nio-8080-exec-5] o.s.security.web.FilterChainProxy : Securing GET /error


I expect that Angular that is the frontend can add the header to the request and not make the http call fail. I'm trying to implement a feature with JWT token that allows the user to reach certain endpoint only if is logged in. To do that I need the interceptor to be working:

import {ApplicationConfig, importProvidersFrom, isDevMode, provideZoneChangeDetection} from "@angular/core";
import {provideRouter} from "@angular/router";
import {routes} from "./app.routes";
import {provideClientHydration} from "@angular/platform-browser";
import {HTTP_INTERCEPTORS, provideHttpClient, withFetch} from "@angular/common/http";
import {StoreModule} from "@ngrx/store";
import {EffectsModule} from "@ngrx/effects";
import {AuthEffects} from "./auth/state/auth.effects";
import {provideStoreDevtools} from "@ngrx/store-devtools";
import {AuthService} from './services/auth.service';
import {counterReducer} from "./counter/state/counter.reducer";
import {COUNTER_STATE} from "./counter/state/counter.state";
import {POSTS_STATE} from "./posts/state/posts.state";
import {postsReducer} from "./posts/state/posts.reducer";
import {rootReducer} from "./store/root.state";
import {AuthInterceptor} from "./services/auth.interceptor";
import {PostsEffects} from "./posts/state/posts.effects";
import {PostsService} from "./services/posts.service";

export const appConfig: ApplicationConfig = {
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
PostsService,
AuthService,
provideZoneChangeDetection({eventCoalescing: true}),
provideRouter(routes),
provideClientHydration(),
provideHttpClient(withFetch()),
provideStoreDevtools({maxAge: 25, logOnly: !isDevMode()}),
importProvidersFrom(
StoreModule.forRoot(rootReducer),
EffectsModule.forRoot([AuthEffects]),
EffectsModule.forFeature([PostsEffects]),
StoreModule.forFeature(COUNTER_STATE, counterReducer),
StoreModule.forFeature(POSTS_STATE, postsReducer)
),
],

};


This is my interceptor instead:

import { inject, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import {Observable} from 'rxjs';
import {AuthService} from "./auth.service";

@Injectable({providedIn: "root"})
export class AuthInterceptor implements HttpInterceptor {
private authService = inject(AuthService); // Usa Store per selezionare il token

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(this.addAuthToken(request));
}

addAuthToken(request: HttpRequest<any>) {
const token = this.authService.getTokenFromLocalStorage();

return request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
})
}
}

Continue reading...