How to create an authorization in Razor Pages using a third party API?

Question

I have a question about creating the correct authorization architecture in the project, to understand my intentions, I will describe my task. I am building an application to manage customer requests. Application users can be divided into two roles: customers and employees. The user can log in through the web application, log in (required) and submit a request. He can also view all his requests. The employee can view user requests and edit them through the desktop app or mobile app.

The web api project is used to retrieve data from the database. Since the api is accessible from the web, it needs an authorization module so that the entire database cannot be accessed from the outside. Accordingly, api endpoints are divided into public, available to clients and available to employees.

To create a request, the customer must be logged into their account in the web application. The credentials are stored in the database, so the web application makes a request to the api.

The main question is: how to organize authorization on the web client, api and the relationship between them?

An unauthorized user should not be able to navigate to other pages of the web application, except for authorization. At the same time, he must be authorized in the api, otherwise he will not be able to receive data from the database about his requests. With a desktop application or a mobile application, everything is simpler - the user cannot get into the main application window without passing the authorization window.

My idea is this: when a client enters a login and password in a web application, send data to an api that uses JWT authentication and will return a token and a status code. Create a static HttpClient and write a valid token into its default headers and use it in all subsequent api requests. And to save the user session in the browser, create cookies that allow the user to navigate to other pages of the web application and view data. Also create and add a Middleware that will track each request to the api, in case the token is no longer valid, forcibly deauthenticate the user.

Is my plan a good idea? Or are there better/easier options? I was thinking about merging the web application project and the web api project, however, in that case, I would not be able to run the api separately from the web application.

I note that I created web-api and web application (Razor Pages) projects without using MVC.