I have a website that runs on example.com
. The website makes AJAX calls to my backend API which sits at api.example.com
.
I employ a double-submit verification strategy.
The backend has protected endpoints which check the JWT token with each request. The JWT token is stored in a httpOnly
cookie. It also contains the CSRF token.
Alongside the JWT cookie I also send a CSRF cookie which is not httpOnly
.
Each request that the client makes must contain the value of this cookie in a special header.
So far so good, but, I want to make sure that the client does everything in its power to prevent users from making pointless unauthenticated requests. So in my React app I have declared a few private routes which check if the user is logged in and if they are not, the user is redirected to the login page.
The way I check if a user is authenticated is by checking if they have the CSRF cookie. If they do, they are allowed to navigate to the protected page. All subsequent requests on this page are still verified on the backend for a JWT and CSRF token.
My question is, is this a valid way to check that the client is authenticated on the client-side?
Additionally, should I be setting the sameSite
cookie option to True
for both cookies?
EDIT
One thing I have just thought of is that it is probably better to create a simple endpoint on the backend that is used to check if the user is logged in. So instead of just checking the cookie, the client can submit a request to this endpoint and verify that the token in the cookie is still valid.