What is the best way to secure localstorage Data in my clientapp

Manjunath! You better store it on backend and get the token from server to frontend and store it in http only cookie, but anyways if your requirement is to store it on frontend, then I'd crypt it with cryptojs or bcyptjs and then store it on frontend, but better in a cookie, so for further integration with backend (if any), you'll be able to send cookie data automatically (for eg, to verify user, etc.). It will be in your req.cookies. https://www.npmjs.com/package/bcryptjs

If you really want to secure your local storage data, use the npm module crypto-js.

Step 1.

npm install crypto-js --save

Step 2. Create a file and call it util.js and paste the following code.

import CryptoJS from 'crypto-js';
                                    
 export const encryptData = (data, salt) =>
 CryptoJS.AES.encrypt(JSON.stringify(data), salt).toString();
                                    
                                    
export const decryptData = (ciphertext, salt) => {
const bytes = CryptoJS.AES.decrypt(ciphertext, salt);
try {
 return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}catch(err){
 return null;
 }
}

Step 3. Encrypt the data using encryptData():

import {encryptData} from './utils';
                    
const originalData={
    name:'IDKBlogs'
}
const salt = process.env.SALT || '6d090796-ecdf-11ea-adc1-0242ac112345';
const encryptedData = encryptData(originalData, salt);
localStorage.setItem('SOME_NON_RADABLE_KEY', encryptedData); // SOME_NON_RADABLE_KEY like 'mk' as 'myKey'

Step 4. Decrypt the data using decryptData():

import { decryptData } from './utils';

let mkLocalData = localStorage.getItem('mk');
  if(!mkLocalData){
       // Handle, if there is no data in localStorage, or if someone deleted the localStorage.
    }
const salt = process.env.SALT || '6d090796-ecdf-11ea-adc1-0242ac112345';
const originalData = decryptData(mkLocalData, salt);
if(!originalData){
  // will executes if someone altered the code in localstorage.
}

You can learn more about this here https://idkblogs.com/js/304/Secure-your-app-data-in-localStorage

we can use react-secure-storage to store and retrieve securely data in localstorage in the fllowing way

secureLocalStorage.setItem("boolean", true); // to store data 
secureLocalStorage.getItem("boolean"); // to retrieve data

Example:

import { useEffect } from  "react";
import  secureLocalStorage  from  "react-secure-storage";

  
const App = () => {
    useEffect(() => {
        secureLocalStorage.setItem("object", {
            message:  "This is testing of local storage",
        });
        secureLocalStorage.setItem("number", 12);
        secureLocalStorage.setItem("string", "12");
        secureLocalStorage.setItem("boolean", true); // to store data 
        let value = secureLocalStorage.getItem("boolean"); // to retrieve data
    }, []);

   return (
        <div>
            This is a sample code
        </div>
    );
}

export  default  App;