What is the next step after login for frontend? I am working with .NET 8 Blazor Web App InteractiveAuto

[Amirularif]

I know this is a shot in the dark, but I'm kinda lost anyways, so any clarification and help would be extremely helpful.
A brief introduction. I am working on the Frontend of a Project and I am using the latest Blazor Web App InteractiveAuto after using InteractiveServer caused me a problem. To begin with, I created a login page, that take a user's username, password and a few other parameters and make a login request via api call '/auth/signin' to the backend which is being developed by our backend developer. Presumably, he did the authentication and send me back with a Set-Cookie. Okay, here is when the problem start.

Problem
Because I initially used Blazor Web App InteractiveServer, I came to knew that all the request are made using signalr and not the browser, and because of that even after receiving his Set-Cookie, the cookie isn't displayed on the application tab of the developer's tools. Which leaves me with no other choice but to use HttpContextAccessor and manually extract the cookie and store it in a class, and add in into every subsequent request I make to the backend. Here is where I start to not understand what should be the next step.
Because according to my backend developer, I need to authenticate the user based on the presence of cookie, and once the user is authenticated, he can access an [Authorize] tagged page. I tried a few times but failed to implement this because the manual method of extracting the cookie is returning cookie = null even after I received the Set-Cookie and even after the cookie are included in subsequent headers. Maybe my method was wrong, I'm not sure. Which brings me to another method, that is to try and use InteractiveAuto instead.

InteractiveAuto

• Now, when I work with InteractiveAuto method, I created the Login.razor page on the client side components, and included the AuthenticationService class for making login request there too. That way, I can let the browser to make the request and after successful request, I get the Set-Cookie.

• The browser also stores the Cookie in the application tab and automatically add it into subsequent request.

• Here is where I stuck again, as per told by my Backend Developer, I need to authenticate the user after getting the Set-Cookie and before navigating the authenticated user to the homepage tagged [Authorize]. So yeah. I tried authenticating again.

• First method, I use javascript to check for presence of cookie on the browser and consider a user authenticated, but it didnt work.

• Second method, is I make another call to the backend this time the call is '/verify_session'. and in return, the backend sends me a success code 200. when I get the success code, consider the user authenticated. I tried this method, and debug, I managed to get the user is authenticated, but still when I try to navigate the user to a tagged [Authorize] page, it still failed.

Realization Maybe
I tried so many different methods to authenticate user and navigate him to an authorize page. And still failed. Which makes me think, am I doing the right procedure here? Is authenticating a user my job or is it already done by the backend when I make the login request and he sends me back a Set-Cookie. What is actually the next step that I, as a Frontend dev need to do after getting the Set-Cookie from him? Is it User-session, is it state management, is it really authenticating and authorize, or is it something else.
I am looking to ensure that my approach is secure and follows best practices for a production environment. Any guidance or resources would be greatly appreciated. Yes, I am new to Frontend Web Dev AND Yes, I am new to Blazor ASP.NET architecture. Because there is currently no seniors in the company to ask, I am asking for help from here. I apologize if there is any mistakes in this question and if there is any question regarding the context, pls let me know.

Thank you for your help!

[Amirularif]

I did manage to access authorized page using authenticate user finally but not sure if the method is safe. Previously after User is authenticated I navigate them to the home page like this

@page "/"
@attribute [Authorize]

<h1>Hello, world!</h1>

Welcome to your new app.

Now. Instead of adding attribute [Authorize] tag on top of the page, I just do something like this:

page "/home"

<AuthorizeView>
    <Authorized>
        <h1> Welcome! Authorized user </h1>

        <button class="btn btn-primary" @onclick="Logout">Logout</button>

    </Authorized>
    <NotAuthorized>

        <h1>You are not authorized</h1>

        <p>Please login</p>

        <button class="btn btn-primary" @onclick="NavigateToLogin">Login</button>

    </NotAuthorized>
</AuthorizeView>

Testing this does work, and whenever the authenticated user tries to access Home.razor, they will see the Welcome header.