Angular SignalR authentication Issue

Question

We are connecting to our signaR service from the Angular UI using the @microsoft/signalr component provided by Microsoft. We are able to connect to the server all ok when we do not have a bearer authorization cookie sent. But when we send a cookie to the signalR service we see the below error:

Error: Failed to start the connection: Error: Unable to connect to the server with any of the available transports. Error: WebSockets failed: Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets.If you have multiple servers check that sticky sessions are enabled.

We have tested the signalR service via a .Net windows application and it works all ok there. We also tested connecting to service via Postman using websockets and we have no issues there either. We have tried numerous ways to try a work around this issue but to no avail.

I have tried to connect to the server via postman and a windows app and it works as expected

public init() {
  let token = "OKTA token";
  let tokenValue = '';

  if (token !== '') {
    tokenValue = '?token=' + token;
  }

  this.hubConnection = new signalR.HubConnectionBuilder
  .withUrl("https://server:25247/netshub/",{// +tokenValue
    accessTokenFactory: () =>  {
      return token;
    }
  })

  this.hubConnection.start().catch((err) => console.error(err.toString()));
}

Drazu · Accepted Answer · 2022-11-16 15:08:24Z

1

In my case it was incorrect hub options: missing withCredentials: true and the token should be a bare value (only the long string without any decorations etc. - see .replace('Bearer ', '') ). My code:

private hubOptions: IHttpConnectionOptions = {
    withCredentials: true,
    accessTokenFactory: async () => {
      return (await this.authenticationService.GetAccessToken()).replace('Bearer ', '');
    }
  };

this.hubConnection = new HubConnectionBuilder()
      .withUrl(this.hubUrl, this.hubOptions)
      .withAutomaticReconnect()
      .build();

    this.hubConnection
      .start()

Remember to use secure connections: https and wss protocols.

edited Nov 16, 2022 at 15:08

answered Nov 14, 2022 at 15:43

Drazu

1197 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

man_dark_is_me Over a year ago

Hello, thanks for the response! are you using IHttpConnectionOptions from @microsoft/signalr as well? Also could you also show what your authService looks like? I tried the above but still see the error. I am passing only the bare value as well

Drazu Over a year ago

Yes, I am using IHttpConnectionOptions from @microsoft/signalr. The AuthenticationService is only for retrieving the token from the server - it uses an http request, therefore there is an async/await in the code. If you already have a valid token, that should be enough. In that case we can compare wss request, mine is: first to localhost:44356/signalrprogress/negotiate?negotiateVersion=1 with authorization header value: 'Bearer [token]' and then: wss://localhost:44356/signalrprogress/?id=[someRandomId]&access_token=[token] - You can check it in the browser console in Network tab.

man_dark_is_me Over a year ago

Hey below are my links serverName:25248/netshub/negotiate?negotiateVersion=1 ws://serverName:25248/netshub/?id=[randomid]&access_token=[token] I think the async & await might be the reason. It will be great if you can share the GetAccessToken in the authenticationService, that way I can compare and try to use something similar

Drazu Over a year ago

When I paste the token directly into variable it works, so content of the service is not needed. I think the reason of the error could be that with authentication you should use secure connection: https for first request and wss for second. I think angular signalR module is expecting that https and wss are both availeble and the error you have show that it is not.

Collectives™ on Stack Overflow

Angular SignalR authentication Issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related