SignalR on Flutter Failing with 404, but Identical JS/HTML Works

[YawarOsman]

Hey everyone,

The connection fails right after the /negotiate step with a 404 Not Found and a "No connection with that ID" error.

An identical implementation in plain HTML and JavaScript connects to the exact same endpoint with the exact same token flawlessly. This makes me think it's an issue with the signalr_netcore package on the web platform.

The Setup
The server requires the access token to be passed as a query parameter in the URL.

This JavaScript code works perfectly:
The connection is established with a 200 OK status.

// using signalr_netcore package
final token = "my_jwt_token";
final uri = '<my_base_url>/hubs/mobile-messages?access_token=$token';

final connection = HubConnectionBuilder()
    .withUrl(uri)
    .withAutomaticReconnect()
    .build();

await connection.start(); // This fails!

What I've Tried
Using accessTokenFactory: I tried passing the token via the options factory instead of the URL. This also fails, likely because the server is specifically configured to look for a query parameter, not an Authorization header.

final uri = '<my_base_url>/hubs/mobile-messages';

final connection = HubConnectionBuilder().withUrl(uri,
  options: HttpConnectionOptions(
    accessTokenFactory: () => Future.value(token),
  ),
).build();

Debugging Network Requests: The successful JS client sends a GET request like this after negotiation: .../mobile-messages?access_token=...&id=.... The failing Flutter client also attempts a GET request, but the server rejects it with a 404.

My guess is that the signalr_netcore package is mishandling the URL when it tries to append its &id=... parameter to a URL that already contains a query string (?access_token=...).

Has anyone else run into this? Is there a known workaround for Flutter Web besides asking the backend dev to change the auth method?

Thanks in advance!