HTTP_INTERCEPTORS and getting data from Youtube conflicting

My environment & features of my application/project: Angular 19 and .Net Backend, getting videos data from Youtube and login and register feature with http_interceptors.

My problem or my issue: my query api to Youtube is not working if i am using http_interceptors in main.ts. This is how I test it: I comment the http_interceptors then my query api is working as it supposed to.

my http_interceptor in main.ts:

{
provide: HTTP_INTERCEPTORS,
useClass: JwtInterceptor,
multi: true
},


my error from get HTTP and subscription from Youtube:

{
"headers": {
"normalizedNames": {
},
"lazyUpdate": null
},
"status": 401,
"statusText": "OK",
"url": "https://www.googleapis.com/youtube/v3/playlistItems?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&part=snippet&maxResults=12&playlistId=PLPvjlyTckx7OhGYE9JZw9Q1MYP_n-u-8V",
"ok": false,
"name": "HttpErrorResponse",
"message": "Http failure response for https://www.googleapis.com/youtube/v3/playlistItems?key=xxxxxxxxxxxxxxxxxxxxxxxx&part=snippet&maxResults=12&playlistId=PLPvjlyTckx7OhGYE9JZw9Q1MYP_n-u-8V: 401 OK",
"error": {
"error": {
"code": 401,
"message": "Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
"errors": [
{
"message": "Invalid Credentials",
"domain": "global",
"reason": "authError",
"location": "Authorization",
"locationType": "header"
}
],
"status": "UNAUTHENTICATED"
}
}
}


my JwtInterceptor code in component:

export class JwtInterceptor implements HttpInterceptor {
private accountService = inject(AccountService);


intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
this.accountService.user$.pipe(take(1)).subscribe({
next: user => {
if (user) {
// Clone from the coming request and add Authorization header to that
request = request.clone({
setHeaders: {
Authorization: `Bearer ${user.jwt}`
}
});
}
}
})
return next.handle(request);
}
}


My question is: How I am to going disable the interceptor when I try to access or get data from Youtube?

Thanks.

Continue reading...