0

In my React project, I have implemented authentication using Firebase authentication. Upon signing in successfully, the user details get stored in a 'user' object in the localStorage, and remain stored until the user specifically logs out. It is the presence of this 'user' object which is used to check whether the person is authenticated or not, and then subsequently open protected routes.

However, this method leads to a problem that one might copy the user details from the localStorage, and then set them manually using the console. This would lead to that user being signed in without authentication using their password.

So what is the correct and secure method to implement persistence of authentication in React

Cyborg7459
  • 157
  • 3
  • 10

1 Answers1

0

Like user object, any sensitive information should NOT be stored in localStorage, and the better option is to use HTTP only cookie.

This post answers your question and why you should use HTTP only cookie over localStorage:

https://stackoverflow.com/a/37396572/15881471

When used with the HttpOnly cookie flag, cookies are not accessible through JavaScript and are immune to XSS. You can also set the Secure cookie flag to guarantee the cookie is only sent over HTTPS

Adel Tahir
  • 141
  • 4
  • 11
  • Thanks for the answer. I thought about using httpOnly cookies, but I'm not sure as to how can we set these cookies in React. I know that in NodeJS, we can set the cookies via the response object, and these cookies are then subsequently sent in every request. However, I'm not sure how to do the same with React. I looked up in the firebase auth docs but didn't seem to find a solution to this – Cyborg7459 Jun 14 '21 at 05:06