SignalR authorization not working out of the box in asp.net core angular SPA with Identity Server

Question

please note - this only applies to the case of server-side Identity (i.e. IdentityServer4 creates tokens, not Angular)

Created brand new asp.net core 5 angular spa app form template:

dotnet new angular --auth Individual
npm i @microsoft/signalr

Modified Startup.cs

            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy", builder => builder
                .WithOrigins("http://localhost:4200")
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
            });
            services.AddSignalR();

    . . .

            app.UseCors("CorsPolicy");

            app.UseAuthentication();
            app.UseIdentityServer();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                . . .
                endpoints.MapHub<NewsHub>("/newshub");
            });

Added Hub class

    [Authorize]
    public class NewsHub : Hub
    {
    }

Modified WeatherForecastController:

        private IHubContext<NewsHub> _hub;

        public WeatherForecastController(ILogger<WeatherForecastController> logger, IHubContext<NewsHub> hub)
        {
            _hub = hub;
            _logger = logger;
        }

        [HttpGet]
        public IEnumerable<WeatherForecast> Get()
        {
            var timerManager = new TimerManager(() => 
                _hub.Clients.All.SendAsync("servermessage", DateTime.Now.Ticks.ToString()));

Modify fetch-data.component.ts

    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
      http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {

      this.forecasts = result;

      this.hub = new HubConnectionBuilder()
        .withUrl("/newshub")
        .build();

      this.hub.on("servermessage", (m: string) => { console.log(m); });

      this.hub.start()
        .then(() => console.log('MessageHub Connected'))
        .catch(err => console.log('MessageHub Connection Error: ' + err.toString()));

    }, error => console.error(error));
  }

Authorization of SignalR hub fails. Output window:

IdentityServer4.Hosting.IdentityServerMiddleware: Information: Invoking IdentityServer endpoint: IdentityServer4.Endpoints.DiscoveryEndpoint for /.well-known/openid-configuration
IdentityServer4.Hosting.IdentityServerMiddleware: Information: Invoking IdentityServer endpoint: IdentityServer4.Endpoints.DiscoveryEndpoint for /.well-known/openid-configuration
IdentityServer4.Hosting.IdentityServerMiddleware: Information: Invoking IdentityServer endpoint: IdentityServer4.Endpoints.UserInfoEndpoint for /connect/userinfo
IdentityServer4.ResponseHandling.UserInfoResponseGenerator: Information: Profile service returned the following claim types: sub preferred_username name
IdentityServer4.Hosting.IdentityServerMiddleware: Information: Invoking IdentityServer endpoint: IdentityServer4.Endpoints.CheckSessionEndpoint for /connect/checksession
[2021-08-01T15:43:11.337Z] Information: Normalizing '/newshub' to 'https://localhost:44306/newshub'.
Failed to load resource: the server responded with a status of 401 () [https://localhost:44306/newshub/negotiate?negotiateVersion=1]
[2021-08-01T15:43:11.347Z] Error: Failed to complete negotiation with the server: Error
[2021-08-01T15:43:11.347Z] Error: Failed to start the connection: Error
MessageHub Connection Error: Error

If I remove [Authorize] attribute - it works fine

EDIT to people saying that I use cookie but need bearer token. Its not true. When I tried to specify Cookie as Authorization scheme on the hub class I got this error:

System.InvalidOperationException: No authentication handler is registered for the scheme 'Cookies'.
The registered schemes are: Identity.Application, Identity.External, Identity.TwoFactorRememberMe, Identity.TwoFactorUserId, idsrv, idsrv.external, IdentityServerJwt, IdentityServerJwtBearer.

Answer 1

There is an obvious solution to it. I think it what @Chaodeng and @Stilgar were talking about only I was blinded by reading too many blogs. Here is the exact code one can use after creating an asp.net core angular app with identity:

Client side:

import { AuthorizeService } from '../../api-authorization/authorize.service';

. . .

constructor(. . . , authsrv: AuthorizeService) {

  this.hub = new HubConnectionBuilder()
    .withUrl("/newshub", { accessTokenFactory: () => authsrv.getAccessToken().toPromise() })
    .build();

Server side:

[Authorize]
public class NewsHub : Hub

Answer 2

If you want to use the signal client to pass the token to the backend hub, you should provide an access token instead of using a cookie. The server verifies the token and uses it to identify the user. This verification is only performed when the connection is established. During the lifetime of the connection, the server will not automatically re-authenticate to check for token revocation.

For details, you can read the official Microsoft documents:

https://learn.microsoft.com/en-us/aspnet/core/signalr/authn-and-authz?view=aspnetcore-5.0#identity-server-jwt-authentication

Answer 3

After several hours trying to solve the auth, an aspnetcore developer led me to believe there is no simple/automatic way to implement signalr authorization with angular without manually reimplementing identity and by-passing all the Identity Server conveniences..

So I invented this workaround.

The security is provided by authorization on the controller which links Identity Server userId and SignalR connectionId.

Controller

    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        public WeatherForecastController(ILogger<WeatherForecastController> logger, IHubContext<NewsHub> hub)
        {
            this.hub = hub;
            this.logger = logger;
        }

        [HttpGet]
        [Route("{connectionId}")]
        public IEnumerable<WeatherForecast> GetForSignalR(string connectionId)
        {
            SurrogateAuth(connectionId);

            // NB: in real app - send particular data to particular users (by connection)
            var timerManager = new TimerManager(() => hub.Clients.Client(NewsHub.Connected.Keys.First()).SendAsync("servermessage", DateTime.Now.Ticks.ToString()));

    . . .

        private void SurrogateAuth(string connectionId)
        {
            var userId = GetApiUserSimple(this.HttpContext);
            NewsHub.Connected[connectionId].UserId = userId;
        }
        public static string GetApiUserSimple(HttpContext httpContext)
        {
            System.Security.Claims.ClaimsPrincipal currentUser = httpContext.User;
            var userId = currentUser.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;

            return userId;
        }

Hub

    public class NewsHub : Hub
    {
        public static readonly SortedDictionary<string, HubAuthItem> Connected = new SortedDictionary<string, HubAuthItem>();

        public override Task OnConnectedAsync()
        {
            NewsHub.Connected.Add(Context.ConnectionId, new HubAuthItem { ConnectionId = Context.ConnectionId, LastConnect = DateTime.Now });
            return base.OnConnectedAsync();
        }
        public override Task OnDisconnectedAsync(Exception exception)
        {
            Connected.Remove(Context.ConnectionId);
            return base.OnDisconnectedAsync(exception);
        }
    }

Controller

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {

    this.hub = new HubConnectionBuilder()
      .withUrl("/newshub")
      .build();

    this.hub.on("servermessage", (m: string) => { console.log(m); });

    this.hub.start()
      .then(() => {
        console.log(`MessageHub Connected: ${this.hub.connectionId}`);
        http.get<WeatherForecast[]>(baseUrl + 'weatherforecast/' + this.hub.connectionId).subscribe(result => {

          this.forecasts = result;

        }, error => console.log('Weather get error: ' + stringify(error)));

      })
      .catch(err => console.log('MessageHub connection error: ' + stringify(err)));
  }