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?


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.

  • Since you only check the CSRF cookie is there, it seems to mean that a visitor who manually create such cookie (with dumb value) will be considered as "logged in". If a valid value is required, I'll just login once, get the value, log out and I now have a forever-valid CSRF cookie to mimic being logged in. – Xenos May 6 '20 at 15:53

This is more a web application architecture question than a security one.

Isn't having a JWT token enough to consider the user logged from the client side perspective?

I assume the user authenticate before getting the token, presumably from the successful login response.

When the token expired return an unauthorized response, look for this response on every ajax response (https://github.com/axios/axios#interceptors) and redirect the user to the login page.

  • > Isn't having a JWT token enough to consider the user logged from the client side perspective? -- depends what you mean. The client-side JS cannot read the token value. It cannot even see the cookie. Regardless, I after thinking about this more I think it is more of a React specific questions... since my issue is about persisting the logged in state. – turnip Jul 11 '19 at 13:59

Instead of checking if user is eligible to perform a request to some resource (API) I would implement security check on resource side (as possibly you already have). In this case the API is validating all the cookies and if not resource is reacting on not secure request.

This solution architecture is easier to be implemented and to understand. The only check on client side to see if user is authenticated can be useful if you want to somehow adjust UI on this state but for this I would use some different cookie than CSRF cookie.

SameSite cookie setting to "true" is not possible. you can only set "None", "Stric" or "Lax". The setting depends on this, if the cookie will be used on "cross site" use cases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.