6

I have a react app and a nodejs server. I set a httpOnly-cookie containing a JWT for authentication. This works. The problem is: I need some logic client-side to check if the user is logged in. When the user logs in, I could store this "state" in-memory (eg. useState), but when the browser reloads, this state is gone (while the cookie is still there).

I'm tried using js-cookie but obviously this won't work because it's a httpOnly cookie.

How can I check - without doing a (test) axios request to my server - if the user is logged in, when opening the react app in the browser?

Edit: The answer in this question recommends to store the token in LocalStorage, but other resources (lik the discussion in the answer of this question) says cookies are the way to go.

to be clear, I don't need direct access to the token in the cookie, the cookie is send with every axios request ({withCredentials: true}) and it works like expected. But I just need to know if the cookie is set (and so the user is logged in).

Sam Leurs
  • 1,592
  • 1
  • 19
  • 48
  • 1
    The presence of the cookie is not enough, the token can be invalid or expired. More, it can expire or become invalid between two consecutive requests. Thus, you need a server response to check if user is authenticated but even the response doesn't guarantee that future requests will still be authenticated. – Wiktor Zychla Apr 05 '21 at 18:26

2 Answers2

3

There can be multiple approaches for this scenario. What I think you can do.

1 - You can send a http request to check if the JWT is valid on initial app load and whenever app is reloaded (Same thing basically) and then preserve some authentication state inside the app (Context Api or Redux) and this way you control the routes, etc.

2 - Make sure that whenever the JWT is expired you clear the cookie and whenever client receives 401 you refresh whatever authenticated state you have and redirect the user to login page or any page that does not need authentication.

Astrit Spanca
  • 643
  • 5
  • 13
  • I'm doing a http request to the server to check the JWT every time the app starts. After that, I store the result (auth "true" or "false") in sessionstorage. The token itself is not stored in sessionstorage ofc. when the server makes a 401 response the cookie is deleted and the session storage is updated. – Sam Leurs Apr 04 '21 at 20:11
  • This answer is what I thought to implement but I'm getting stuck on how to make a request to the server checking BEFORE the app renders. componentWillMount isn't recommended. – Developer May 06 '21 at 18:29
  • I fixed that on Asp.net but it is appliable for nodejs. You can check it here https://stackoverflow.com/a/68241588/4367158 – Александър К. Jul 04 '21 at 04:08
  • The OP was asking for http only cookie mechanisam and not about jwt token mechanisam – Shamseer Ahammed Jul 27 '21 at 18:44
2

Just to add to the selected answer.

a loading component and an isLoading state will help prevent the split-second showing of authenticated / protected screens. ex, isLoading ? <LoadingComponent /> : <ProtectedComponent />

You can just update the isLoading state when the request finishes, and should the request yield an unauthenticated response code, you can then perform a redirect.

Jairus
  • 21
  • 2