SignalR authorization, Angular, ASP.NET Core

Question

Hello, In my app I use IdentityServer4 for my web API. Now I want to use SignalR but I always get error 401. With my other http.get calls I have no problems. [Authorize(AuthenticationSchemes = IdentityServerAuthenticationDefaults.AuthenticationScheme)] public class ChatHub : Hub In the Angular Service I initialize the hub as follows. const tokenValue = '?token=' + this .authService.accessToken; const hubUrl = `${ this .configurations.baseUrl + '/hubs/chat?' }looney${tokenValue}`; this .hubConnection = new signalR.HubConnectionBuilder().withUrl(hubUrl).configureLogging(signalR.LogLevel.Information).build(); For the other http.get I set the request headers as follows: protected get requestHeaders(): { headers: HttpHeaders | { [header: string]: string | string[]; } } { const headers = new HttpHeaders({ Authorization: 'Bearer ' + this .authService.accessToken, 'Content-Type' : 'application/json' , Accept: 'application/json, text/plain, */*' }); return { headers }; } Can someone help me here?? Thanks in advance for any advice or tip

Mario Scheeren · Answer

Well your hubconnection does not add the Bearer Token out of the box. A good way to handle all those scenarios is to add an Interceptor which will be hooked to all http actions adding the token. This way you would not need to add it within your get methods anymore eiter. https://angular.io/api/common/http/HttpInterceptor import { Injectable } from '@angular/core' ; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http' ; import { Observable } from 'rxjs' ; import { AuthorizeService } from './authorize.service' ; import { mergeMap } from 'rxjs/operators' ; @Injectable({ providedIn: 'root' }) export class AuthorizeInterceptor implements HttpInterceptor { constructor( private authorize: AuthorizeService) { } intercept(req: HttpRequest , next: HttpHandler): Observable > { return this .authorize.getAccessToken() .pipe(mergeMap(token => this .processRequestWithToken(token, req, next))); } // Checks if there is an access_token available in the authorize service // and adds it to the request in case it's targeted at the same origin as the // single page application. private processRequestWithToken(token: string, req: HttpRequest , next: HttpHandler) { if (!!token && this .isSameOriginUrl(req)) { req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }); } return next.handle(req); } private isSameOriginUrl(req: any) { // It's an absolute url with the same origin. if (req.url.startsWith(`${window.location.origin}/`)) { return true ; } // It's a protocol relative url with the same origin. // For example: //www.example.com/api/Products if (req.url.startsWith(` //${window.location.host}/`)) { return true ; } // It's a relative url like /api/Products if (/^\/[^\/].*/.test(req.url)) { return true ; } // It's an absolute or protocol relative url that // doesn't have the same origin. return false ; } }