As the name implies, a refresh token is a special kind of token that can be used to obtain a new access token; the most logical way to use it is when the former access token expires and the client needs a new one to avoid having to perform the login again. Refresh tokens never expire, although they can--and should--be invalidated as soon as they are consumed, for obvious security reasons; on top of that, they also need to be stored properly to ensure that they are not leaked.

Implementing refresh tokens in our current web application won't be hard at all, as long as we perform the following steps:

1. Find a proper way to persist response tokens so that we can add, check, and invalidate them as needed.
2. Add a refresh_token property to our TokenRequestViewModel and TokenResponseViewModel classes, which will be used by the client and the TokenController to exchange the refresh token(s) when needed.
3. Update our existing TokenController so that it can handle a refresh_token request from the client.
4. Update our existing token.response.ts TypeScript interface to handle the refresh_token property that will be issued by the server.
5. Add a refreshToken() method to our Angular client's AuthService that we can use to issue a refresh token HTTP request from within our SPA.
6. Add a new HttpInterceptor to our Angular client that will automatically understand when the old access token expired and issue a refresh_token request to obtain a new one.

Choosing an appropriate place to store refresh tokens is mandatory, because we need to invalidate them as soon as they are consumed; if we don't, a single refresh token can be used to generate an infinite amount of valid access tokens--each one of them coming with its own refresh token--and we certainly don't want to allow that. We can persist refresh tokens in a number of ways, but--in our specific scenario--the most logical place to save them would be our current database--with a dedicated data model entity.