Is there a secure way to store data like login credentials on client-side?

Question

I am using React JS, and I would like to store user's login credentials on client's browser so they don't have to enter email and password each time.

How can I securely store user's login credentials in the browser?

Answer 1

Define securely. If your definition is like "no one beside the user can use the credentials to access the application" then forget it. No technical or technological mean can make it happen. The definition is simply to broad, and if the attack models include the attacker having access to your user agent (browser) or physical access to your device, then the solution gets hopeless pretty quick.

Think encryption can help? You have encrypted the payload using some key. Now you have to protect the key. Encryption does not solve your problem. It just shifts it somewhere else. All security through obscurity solutions use stuff like this.

We usually define security of passing secrets as something that requires us to be protected from the remote attacker. Someone who has the access to the wire and can sniff the traffic, someone who may have access to some of the remote machines you are communicating with. This makes the problem solvable at least to some degree. It allows you to use either well configured cookies or local web storage to use it as cache.

Having said that - storing credentials is usually considered bad practice anyway. You may store your refresh tokens, you may store your session id, but you should not store your users credentials in anything else but a password manager. Refresh tokens and session ids will expire on its own and does not reveal anything about the user when they do.

To better understand what is allowed and disallowed when designing your solution please have a look into OWASP ASVS.

Answer 2

Even if there are many replies on the same subject for numerous queries, I wanted to share my ideas nonetheless.

It is impossible to completely safeguard data saved on local storage and it is a bad practice to save user credentials on localStorage , as @Marek pointed out in the prior response, but we can make it difficult for people to crack it.

Encryption is one of the solutions in this case, but it is still insufficient to secure local storage if you just encrypt the data and store it there using a shared or application-specific encryption key.

Here is why.

Consider the following scenario: you’ve encrypted the user’s login information and saved it locally. When you reload the platform, you’re decrypting the data that’s been written to local storage and marking the user as logged in or logged out. Your website and the platform use a single secure key to encrypt and decrypt, which means only your website knows how to decrypt.

If someone copies data from local storage and pastes it into a separate browser, then visits your site, your website will authenticate the user. Why? because your website understands how to decode data! then, what can we do? It is preferable to generate a special encryption key that is only known by each browser and use that key to encrypt the data.

One method is to utilise the react-secure-storage package, which generates a special encryption key known only to the browser being used.

Here is how to use it:

yarn add react-secure-storage

npm install react-secure-storage

Sample code

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);
        let value = secureLocalStorage.getItem("boolean");
    }, []);

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

export  default  App;