Search code examples
reactjsjwtisomorphic-javascript

User's context on isomorphic (or universal) react app with JWT

I'm actualy developing a react-based front-end application and I would like to switch on isomorphic features. The user can be authenticated, I currently use JWT to store the client connection on localstorage.

Now, my problem is that the first page of the app can be different on the case the user is connected or not.

Actually, the page is loaded, and xhr requests are sent with the token in the header, so the response of the server depend of the token. BUT, if I switch to isomorphic rendering, the token will not be included in the request, so the server will return a response as if the user is disconnected.

Here is a scheme to explain how it actually works :

enter image description here

First the browser load the javascript from the node.js server. If a user token already exists, the browser send the requests to the backend with this token. So the response depends on the user's permissions.

Now, a scheme for isomorphic js :

enter image description here

The page is generated by node.js. So the requests are sent by node.js to the backend, and so node.js has no access to the token stored in the browser.

I would like to know if there is any approach to solve this problem.

Thank you.

Solution

  • You can store the JWT in a cookie, rather than in localStorage. This way, your server-side app can access the JWT as well and use it to make your authenticated calls.

    The mechanics of how you use the JWTs doesn't change, just where you store them. A library like js-cookie makes managing cookies easy.

    Cookies.set('jwt', jwt, { secure: true });

    The catch is that you now need to be careful of CSRF. API calls triggered from another site to your domain will include the cookies if the user has any. Creating unique CSRF tokens on the page lets you prevent this.

    Stormpath has a good write-up of storing in cookies vs localStorage.