I have a SPA that I've built with a rest API on the backend. All routes besides login require a JWT.
When the user logs in successfully, the rest API returns an access token, and refresh token.
I'm wondering what the proper strategy is to store these tokens on the client. I was testing Vuex with Vuex-persist. But I wanted to know what the proper pattern-like way is of storing the access and refreshing JWT tokens.
I was thinking of using the front-end to store both tokens in 2 separate cookies, with expiration times. This way, the front-end can check if the cookie exists. If it does, then use the value (access token) to make the rest API call to whatever resource the user is requesting. If it doesn't exist (expires) use the refresh cookie (if it exists) to retrieve a new set of access/refresh tokens.
Would this be considered a good approach or an anti-pattern?