Manually deleting Secure Auth Token, still gets captured by secureLocalStorage

[allan-vera]

Hello. I have an axios interceptor that auto applies the auth on every request like so:

axios.interceptors.request.use(function (config) {
  const auth: Auth | null = JSON.parse(
    secureLocalStorage.getItem("auth") ?? "null"
  );
  if (auth) config.headers[AUTH_HEADER] = auth.access_token;
  return config;
});

when i am in devtools and manually delete the auth from localstorage and continue making requests, i am not sure how but the secureLocalStorage continues retrieving the Auth. Meanwhile if i do the same with localstorage it recognizes that the auth no longer exists and doesnt attach the header (as expected).

I imagine you are caching the auth and not checking if the item still exists in localstorage before retrieving it. https://github.com/sushinpv/react-secure-storage/blob/1ccd8897863762f5f7b4c4f93a323a0321b13684/src/lib/index.ts#L60

[sushinpv]

The way the library works is as follows:

When the library is initialized, it reads all the data from local storage, decrypts all the data written using react-secure-storage, and keeps it in memory. This ensures faster access to all the data.

You can refer to the details here.

So, if you manually remove anything from the localStorage, it will still persist in memory until the website is refreshed or reloaded.

This situation is not applicable in a production environment. In production, the codebase will manage the addition and removal of data from local storage.

[allan-vera]

@sushinpv I will most likely try to add the check on my side. I understand your reasoning, but I do think it's not ideal that native localStorage can detect this and secureLocalStorage cannot. I realize it's not a typical scenario, but still would like to know that in any case that the auth is no longer there, it immediately would not give access to the user.

[faisalamin9696]

There should be an method to read the fresh data,

[faisalamin9696]

Hello. I have an axios interceptor that auto applies the auth on every request like so:

axios.interceptors.request.use(function (config) {
  const auth: Auth | null = JSON.parse(
    secureLocalStorage.getItem("auth") ?? "null"
  );
  if (auth) config.headers[AUTH_HEADER] = auth.access_token;
  return config;
});

when i am in devtools and manually delete the auth from localstorage and continue making requests, i am not sure how but the secureLocalStorage continues retrieving the Auth. Meanwhile if i do the same with localstorage it recognizes that the auth no longer exists and doesnt attach the header (as expected).

I imagine you are caching the auth and not checking if the item still exists in localstorage before retrieving it.

https://github.com/sushinpv/react-secure-storage/blob/1ccd8897863762f5f7b4c4f93a323a0321b13684/src/lib/index.ts#L60

Use this method to get fresh data from local storage

import EncryptionService from "react-secure-storage/src/lib/encryption";
import { getSecurePrefix } from "react-secure-storage/src/lib/utils";

 const encrypt = new EncryptionService();
 const KEY_PREFIX = getSecurePrefix();

 const value = encrypt.decrypt(localStorage.getItem(`${KEY_PREFIX}j.auth`) ?? '') as any;

 // here j.auth is the local storage key with the pre-defined prefix

OR

` import getAllLocalStorageItems from "react-secure-storage/src/lib/localStorageHelpers";

const value= getAllLocalStorageItems()[${KEY_PREFIX}auth]; `