How to secure private routes in SPA while using httpOnly cookies

Question

I'd like to secure my SPA private routes with JWT authentication. To make everything as much secure as it's possible, I wanted to use httpOnly cookie to store my access_token on the client-side.

Using httpOnly cookies protect me a lot from XSS attacks, but unfortunately this approach does not allow me to check if the cookie actually exists in the browser.

In this case - how can I implement some logic to prevent unlogged users to visit private, secure routes of my SPA?

Am I forced to use non-httpOnly cookies or localStorage for this?

Answer 1

Am I forced to use non-httpOnly cookies or localStorage for this?

No. Keep your access_token in a cookie with the httpOnly flag, and (if possible) with the secure flag. Let's call this cookie session_cookie.

When a user does a successful login you could return 2 cookies: the session_cookie and another one which informs to JS the user has been authenticated (let's call as SPA cookie).

Your session_cookie is not accessible by JS so it's not vulnerable to XSS. This cookie is sent on each request to the server, which checks is a valid token, otherwise an unauthorized error is returned.

Your SPA cookie hasn't httpOnly flag so it's accessible by JS but the server doesn't use it to authenticate the user, so fake this cookie is useless.

Whenever you receive an unauthorized error on your SPA you can remove the SPA cookie.