4

I'm developing an SPA (React) application, and I want to implement authentication using cookies to keep track of active sessions, and only allow access to certain routes if the user is authenticated.

I want to know how I can develop the SPA in a way that, following best practices, ensures that protected routes (routes that require user authentication) cannot be viewed unless the session cookie is set.

I'm looking at different authentication solutions, and most of them seem to, upon successful authentication, set an HTTP cookie with the attributes: SameSite, Secure, and HttpOnly. The authentication solution will be on the same domain as the SPA, so SameSite makes sense to me. The domain has an SSL certificate, so communication will be over HTTPS, and therefore Secure makes sense to me.

However, as the SPA is javascript, it does not have access to HttpOnly cookies, and therefore not the session cookie.

I can see a few possible solutions to this problem:

  1. Serve the SPA from a NodeJS app route that requires the session cookie to be set (/app):

Upon succesful authentication from the authentication service, redirect user to the /app endpoint of a NodeJS app, which then validates the cookie sent by the browser. If the cookie is valid, serve the SPA. If not, redirect to authentication service login screen.

This approach is what i suppose most SSR web apps use for each of their routes. However, as this is a SPA, it will only have to be done on the top level route that serves the application.

  1. Disable HttpOnly flag on session cookie from authentication service

I havn't researched this in depth, but if it is possible to do so, it will open the SPA to XSS attacks, which is something i'd like to avoid.

Is either of these approaches the right way to go? I realize there are multiple ways to solve this problem, but i suspect that best practices exist to solve this, as it is quite common in a lot of web applications today that are developed as an SPA.

A final question - regarding HttpOnly, Secure and SameSite cookies, I realize that browsers such as Chrome, Firefox, Safari, and Edge, prevent people from creating cookies with these attributes. But isn't it possible for someone to somehow, outside of a popular browser, create cookies with these attributes, and thereby getting access to a web app that otherwise requires users to go through an authentication process?

Mike Hawkins
  • 2,144
  • 5
  • 24
  • 42
  • Just going forward with the discussion, not necessarily a viable solution: could a localStorage variable be set at the same time of HttpOnly cookie (not only set, but synchronously managed in general)? Just to flag it. not the token itself – Canta Mar 15 '21 at 13:16
  • Maybe this article could clarify your thoughts about SPA auth: https://medium.com/@jcbaey/authentication-in-spa-reactjs-and-vuejs-the-right-way-e4a9ac5cd9a3 – Canta Mar 15 '21 at 13:21
  • 1
    I am also facing similar challenge by securing routes in react application. I have remaining part configured using DRF(dj-rest-auth) such as login, registration, etc. Now I am stuck with protecting routes, so that only logged in user can access few URLs. I am getting access and refresh tokens and getting stored in httponly cookie. I am not sure, how to validate user is logged in, everytime. Any suggestions is appreciated. – B.Anup Sep 08 '21 at 14:44
  • https://stackoverflow.com/questions/51722504/how-to-secure-private-routes-in-spa-while-using-httponly-cookies – Big_Boulard Jul 18 '23 at 11:37

0 Answers0