How to get user-authenticated data from the frontity app when a user has previously logged in and she has a JWT stored as a cookie

🙋Get Help
1

Hello everyone!

I think I can phrase my question, generally, as I think this issue applies to many of us.

So, what if I am using JWT Authentication for WP REST API since I need to access user-authenticated data (like the user public name) from the frontend using the API. I have already done that, and it works. I also store the JWT as a cookie so, when someone has already logged in, they don’t have to log in again.

But what if the user has logged in, say, yesterday and they now want to go to my application. They already have a JWT token stored in a cookie, so, when they load the app, I need them to have their user-authenticated data without having to perform a fetch from the client (because that takes time).

Is this possible? Keep in mind that the request goes to the server (and the NodeJS app) with the cookie in an HTTP Header called “Cookie” (the browser sends it automatically) thus, I should be able to access the JWT from the NodeJS app. However, I only have access to the ReactJS code which can’t access http request parameters, right? or…

Is there a way to capture the cookie in the NodeJS server code in such a way that it is accessible from the ReactJS code (and thus, being able to perform a user-authenticated fetch?)

2

Hi there!

Personally, we’ve never stored a JWT token stored in a cookie when working with Frontity+WordPress, since we couldn’t figure out how to get the authentication to work. The plugin we used couldn’t work with cookies for some reason. Therefore we used localstorage instead to save the token, so I can only speak about my experience with handling authentication using this way.

First thing to ask yourself, because that info is missing, is how the cookie is made. Is it an HTTP only cookie or a normal cookie? You can inspect cookies with javascript using either document.cookie or an npm package like cookies - npm (npmjs.com). You can’t however access HTTP only cookies from javascript.

I don’t know if you could access the cookies from the NodeJS server. I guess it’s possible, but it’s been a while since I’ve setup a project with Frontity and in the meantime there were quite a few changes which I haven’t looked at yet, so I can’t really help you there. Maybe you could check the cookies through the beforeSSR function by accessing the Koa context: Expose Koa’s context in the beforeSSR method - :speaking_head: Feature Discussions / Released - Frontity Community Forum

If you really don’t want to perform a request to check if the user is authenticated, then you could maybe persist the state by, say, storing it in localstorage. Then you could do the following:

  1. Check if the cookie is valid, if it is, use the persisted state from localstorage;
  2. In case the cookie isn’t valid, remove the persisted state from localstorage + the cookie and redirect to the login form.

We did it as follows:

  1. Store the token in localstorage after a successful login;
  2. Perform a request in beforeSSR to check if the token is valid when revisiting the app;
  3. If it’s valid, show the route you requested, otherwise, redirect to the login form (this can all be done in the beforeSSR function).

Hope this helps!