Websocket connection failed when I added Authorize attribute to the hub

So I am encountering this weird behavior with my blazor app when connecting to websocket. When I added Authorize attribute at the top of the hub, my application doesn't want to connect to the wss. However, when I tried sending a request, it still works as expected (I am guessing its doing it over http?). Also, when I checked my network tab, it doesn't say 401 error or anything, the status of it just says finished. What did I do wrong here?

This is the error message I gothttps://i.sstatic.net/BLyZM.png

And this is the screenshot of my network tabhttps://i.sstatic.net/b5c3v.png

And this is how I currently implement my hub

using Duende.IdentityServer.Extensions;using Microsoft.AspNetCore.Authorization;using Microsoft.AspNetCore.SignalR;using System.Security.Claims;namespace BagiBagiDev.Server.Hubs{    [Authorize]    public class PaymentHub : Hub    {        public async Task TestMessage(string user, string message)        {            await Clients.All.SendAsync("ReceiveMessage", user, message);        }        public override async Task OnConnectedAsync()        {            var username = Context.User.FindFirst(c => c.Type == ClaimTypes.Name).Value;            if (!string.IsNullOrEmpty(username))            {                await Groups.AddToGroupAsync(Context.ConnectionId, username);            }            await base.OnConnectedAsync();        }    }}

I tried searching on the internet and a lot of people were pointing to a vscode bug, but I think that should've been fixed with the current version that I have (v 17.6) so I am not sure what's going on.