Why does the browser ask me to log in with ASP.NET Core 3.1

Question

I've created a website in ASP.NET Core 3.1, MVC, with API. There are 2 parts to the website. An classic static website (with a home, about, contact page etc) and a SPA app. You need to login to use the SPA application.

I believe my approach to auth is quite 'standard'. (There are no different permissions or roles).

The user logs in, and an HTTP Only cookie is created. They are redirected to the Web API part of the website

Any API calls to the C# Web Api, and the front end reviews the return status code (such as code 200 or 500 etc).

If the return is 401, it will assume the JWT has expired or has never been created. The front end then makes another call to the Web Api to retrieve a new Json Web Token. If the JWT is returned, the program attempts the original request again, with the valid JWT. Otherwise, it deals with the situation by alerting the user about the issue

The ajax code looks like

function toDatabase(type, url, data, successDelegate, failDelegate, errorDelegate, tryAgainIfUnathorized) {
    $.ajax({
        type: type.toUpperCase(),
        url: url,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + bearerToken.get()
        },
        data: data,
        dataType: "json",
        success: function (response) {
            successDelegate(response);
        },
        error: function (e) {

            if (e.status === 401 && tryAgainIfUnathorized) { 
                const callback = function () {
                    toDatabase(type, url, data, successDelegate, failDelegate, errorDelegate, false, false);
                };
                bearerToken.refresh(callback);//try to get the updated token, then retry the original request
            }
            else {
                if (e.status !== 200)
                    errorDelegate(e.statusText);

                console.log("Error in ajaxCall.js. Expand for call stack:");
                console.log(e);
            }

        }
    });

This works fine on my local computer.

The problem is, seemingly randomly and not that often, on my production site, Google Chrome occasionally presents a log in dialog. My code does not create this dialog. I don't even know the javascript to create it :)

I don't understand. If I click cancel, then I can continue as I'd like (meaning I am authenticated).

I read up, and it seems that this happens because the browser detects the 401 and tries to be helpful!

I've tried to get round this issue by returning a 499 instead of a 401 but that caused even more headaches with this code

jwtBearerOptions.Events = new JwtBearerEvents
{                                
    OnAuthenticationFailed = context =>
    {
        context.Response.OnStarting(() =>
        {
            context.Response.StatusCode = 499;
            return Task.CompletedTask;
         });

         return Task.CompletedTask;
                            }
     };

How do I prevent this dialog from showing (or is my approach to using JWT incorrect)