What is the algorithm for working with JWT token?

Question

JSON Web Token

Good afternoon.
I am writing a test task for react. The application is a kanban board, similar to trello.com, contains several boards and cards that you can drag from board to board and change their order.
But I have no experience with JWT. I can not understand the algorithm of actions. I have only two pages - authorization and the actual page with the boards.
In addition to the API requests for working with cards (I dealt with them), there are three requests associated with the user.
The first request is to create a user:
Create user
Receive data, create new user and return it. Also generate and return JWT token that can be used for authenticated
requests

{
"username": "string",
"email": "[email protected]",
"password": "string"
}

Answer:

{
"username": "string",
"email": "[email protected]",
"password": "string",
"token": "string"
}

Here, I assume I am getting a JWT token
Second authorization request:
Obtain JWT token
Receives data, return token that can be used for authenticated requests
Request:

{
"username": "string",
"password": "string"
}

Answer:

{
"username": "string",
"token": "string"
}

And the third request, the most confusing for me:
Refreshed JWT token
Receives data adn returns a refreshed token (with new expiration) based on existing token. If 'orig_iat' field (original issued-at-time) is found, will first check if it's within expiration window, then copy it to the new
token

{
"token": "string"
}

Answer:

{
"token": "string"
}

Now the questions are what exactly I can't figure out.
I know that JWT token is short lived and reusable and is used to access resources, while Refreshed Token(RT) is long lived but disposable. When registering, we receive a JWT and can we already access API resources with it?
Do we get the same type of JWT when logging in?
As I understand it, the token has life lines. How to know this time?
How to keep the state (authorized or not) in the application?
I read that the token can be stored in LocalStorage. Does it make sense to create a variable in state isAuth that will store the true/false state?
As I understand it, when loading any page, it is necessary to request the state of the token, whether its time has expired. Is that what the Refreshed JWT token request is for, which returns a new JWT + RT pair?
With each request, when working with cards, is it necessary to make a preliminary request to check if the token is rotten?
I would be grateful for help.

Answer 1

During authorization, both tokens are issued at once, working and refresh. The refresh token is stored in the server database along with the user ID; there is no point in storing a working token.
The lifetime is written in the token itself, as one of the payload fields. Both the server and the client can read this field. The server in any case must control the lifetime of the token, the client can do it himself, or can simply respond to server responses.
Each request to the server is accompanied by a work token. If the working token has expired, the server returns a message about the need to renew the token.
The refresh request is accompanied by a refresh token.
If the refresh-token in the database is marked as already used, then all refresh-tokens of the given user are inactivated (removed from the database) and a message about the need for re-authorization is returned.
Refresh token is marked as used in the database.
If the refresh token has expired or such a refresh token is not in the server database, then a message is returned about the need for re-authorization.
A new pair of tokens is returned.
Where and how to store tokens on the client is a matter of preference. You can not store it at all, then when the page is reloaded, the user will have to log in again. It is possible to save only the refresh token by making a refresh request on application startup/page opening.