How to check if I am authenticated in the client (using JavaScript) against a ASP.NET MVC backend without performing a request?

Question

In my SPA frontend, I want to display a login page if I am not authenticated. In my SPA, everything goes to index.html. So I need to determine if I am authenticated in JavaScript. I am using the ASP.NET cookie authentication scheme. It is set up like this:

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.ExpireTimeSpan = TimeSpan.FromMinutes(20);
        options.SlidingExpiration = true;
        options.AccessDeniedPath = "/Forbidden/";
    });

and

app.UseCookiePolicy(new CookiePolicyOptions
{
    MinimumSameSitePolicy = SameSiteMode.Strict,
});

app.UseAuthentication();
app.UseAuthorization();

and to sign in:

        await HttpContext.SignInAsync(
            CookieAuthenticationDefaults.AuthenticationScheme,
            new ClaimsPrincipal(claimsIdentity),
            authProperties);

The authentication cookie is HTTP only, so there's no way to read it from document.cookie. However, I thought a good idea would be to set an additional cookie which is not HTTP only, that I can access from the frontend, which simply contains a bool value; and then I could use that to determine if I am signed in or not. I.e. set two cookies: the authentication cookie (HTTP only) and a non-HTTP only cookie containing a bool value.

Is this a good idea? Is it not a good idea? If good, how can I integrate this into SignInAsync or wherever I need to integrate something?