Azure-sdk-for-js: [Service Bus] WebSocket handshake error when using a TokenCredential

[AElharouny]

• Package Name: @azure/service-bus
• Package Version: 7.0.0-preview.6
• Operating system:
• [ ] nodejs
  
  
  
  • version:
  
  
• [x] browser
  
  
  
  • name/version: Chrome 79.0.3945.117
  
  
• [ ] typescript
  
  
  
  • version:
  
  
• Is the bug related to documentation in
  
  
  
  • [ ] README.md
  
  
  • [ ] source code documentation
  
  
  • [ ] SDK API docs on https://docs.microsoft.com
  
  

Describe the bug
WebSocket handshake: Unexpected response code: 400 error when using a TokenCredential.

To Reproduce
Steps to reproduce the behavior:

      const tokenCreds = new InteractiveBrowserCredential({
        clientId: process.env.REACT_APP_AAD_APP_CLIENT_ID,
        tenantId: process.env.REACT_APP_AAD_APP_TENANT_ID,
      });
      const serviceBusClient =  new ServiceBusClient(props.entityInfo.namespaceHost, tokenCreds);
      const sender = serviceBusClient.createSender(props.entityInfo.entityName);
      sender.sendMessages({
        body: body
      }).then((response) => {
        //
      }).catch((error) => {
        //
      });
    };

Error:

ws.js:74 WebSocket connection to 'wss://********.servicebus.windows.net/' failed: Error during WebSocket handshake: Unexpected response code: 400

Observations:

• Notice there is no $servicebus/websocket in web socket URL
• Not sure if it's related but I noticed
  webSocketEndpointPath is being set here in createConnectionContextForConnectionString but not in createConnectionContextForTokenCredential

Expected behavior
No Errors.

Screenshots

[HarshaNalluru]

Thanks for reporting, @AElharouny! ✨

Here's a PR https://github.com/Azure/azure-sdk-for-js/pull/11250 to fix the issue.
With the above fix and with proper permissions to the AAD app, your sample code should work fine.

You can expect this to be fixed in the next release.
I'll share the dev build from the PR for you to try out if interested.

[AElharouny]

Thanks, sure will be happy to test that.

[HarshaNalluru]

Hey @AElharouny,

The fix has been merged, will be part of the next preview release.
For the time being, you can use the dev version which has the mentioned fix - https://www.npmjs.com/package/@azure/service-bus/v/7.0.0-alpha.20200916.1.

You can try out the fix by installing the package with npm install @azure/[email protected]
or by using the dev tag npm install @azure/service-bus@dev.
(New dev packages get released about once a day.)

Let us know if that fixes the issue for you and feel free to create new issues if you encounter any other problem.

[AElharouny]

Hi @HarshaNalluru
Justed tested the last dev package and problem is solved, I can confirm being able to use InteractiveBrowserCredential to interact with Service Bus. Thanks a lot for the fix :)