I'm implementing JWT authentication and authorization for my web app and could use some help on identifying holes in my approach. I've seen many approaches that simply say to set the access token as an httpOnly cookie, however, there are claims in my access token that my frontend needs access to. I came up with this approach to solve that.
On login, the user provides a username and password in exchange for a couple of items:
- A CSRF token
- The header and signature of the JWT access token
- The payload of the JWT access token
- A JWT refresh token
In my approach, all these items are set as cookies. The JWT refresh token and the header and signature of the JWT access token are all stored at httpOnly, secure cookies. The payload of the JWT access token is just stored as a regular old cookie so that my frontend has access to it (I'm not storing any personal/insecure information in this token).
For example, if my JWT access token is header.payload.signature, then I split my access token into header.signature and payload. These values are stored in their respective cookies.
Come time to make a request that requires authorization, my backend grabs all the JWT access token cookies, puts them back together, and then checks the signature.
Does this approach mitigate XSS and CSRF attacks while still providing secure access to the JWT payload?