React - Storing Token received from server

Question

This is something more likely as conception question. I am doing the Front-End of website and there is already created Back-end from another person. One of his endpoints is "Login endpoint" which sends me in reply several stuff:

1. Token (JWT)
2. UserId
3. Name
4. Address
5. Company

(and some others)

I receive all of them directly after login as response. So I am wondering which is the best way to save them? As we can assume it will not be a problem to save everything except Token in localStorage or in cookie with js-cookies package but how to store a token? It is unsafe to be stored both in local/session storage and in cookie. Currently I have Auth context which stores all of this:

import React from "react";

export default React.createContext({
  token: null,
  userId: null,
  address: null,
  firstName: null,
  lastName: null,
  email: null,
  company: null,
  subscription: null,
  login: (token, guid) => {},
  logout: () => {},
});

After login I pass it in

<AuthApi.Provider
        value={{
          token,
          guid,
          login,
          logout,
          address,
          firstName,
          lastName,
          email,
          company,
          subscription,
        }}
      >

In the App.js so they are accessible from all components inside the project with useContext.

As you know, when browser is refreshed we lost all the values. So basically here I don't store the values and Token also in cookie or local/session storage but I loose it after refresh. What is the best solution here if I cannot make changes in the back-end?

Answer 1

If you want to be able to revoke the token at any moment you can store it in Redis. Its faster than querying the DB everytime so its a good compromise. you can check this answer for more details Should I store JWT tokens in redis?

Answer 2

Your question is too generalist and can't be answered without knowing about these details

Questions to consider

• Does the front end communicate with different domains or servers?
• Based on the token are you doing any job in the front end? (eg: managing states like isLoggedIn). Remember other data can be cached in local storage and can be used stale while revalidate technique.
• Does the token will be expired if something like a role or name or anything else changes? (eg Custom claim in firebase is a typical example of it)
• Does your server has control over the authorisation server or you are using a third-party server like okta, firebase or something else? (if third party its ok to go with their recommendation unless you know what you are doing)
• If you disable an account in the backend how will the front end know and logout? (long-lived app includes electron or a browser extension or native app or in my case youtube which I don't remember when I closed previously)

One last note

• Cookies are more powerful than you think. For XSS attacks enable HTTPS only. But that's just the tip of the mountain. It has a lot of flags origin, same site, domain, secure flag, HTTP only, expiration etc.

In a nutshell token !== userInfo. You can't treat both in a similar way.

Answer 3

In React use Redux with its Redux Persist. By using these libraries the token is not disappear on page refresh. And also you don't need to pass AUTH token to child components as by storing Token as a state in redux it accessible in all components.

Answer 4

As for me the best way is to create double tokens authorization (access and refresh tokens), store tokens in LocalStorage and then refresh tokens by delay or requests. Just ask your backend developer to add one route for tokens refresh. For refreshing you can use axios interceptors.

Refresh token functionality in React application using redux and redux-saga