JS hybrid app - storing token in localStorage

Question

I'm developing a hybrid app where the user has the possibility to click "remember me" when logging in with username and password. In case user has only 1 "stored" account it automatically logs him in, but in case he has more than 1 "stored" account, the app shows him the list of the available accounts (like the one when logging into Gmail).

To implement the above behaviour, I have come up with this procedure:

1. At the first login the username and password are sent to server via HTTPS
2. If the credentials are correct, the server generates a token with such procedure:
   • merge username and password hash into a string
   • hash the string again with SHA and a server secret
   • substitute the chars in the string
   • create a N-char string (token) from the string
3. This token is then sent back to the device and the username and this token are stored to LocalStorage
4. From now on the user logs in with the username and this token (automatically or when clicking the account he wants to login into)

Would this be secure enough or should I improve something? I'm a bit worried though about storing usernames into LS, but that's the only information I have when showing the user what account he's logging into.

Edit: There can be several different people (for instance family members) logged in the account, because the app controls a device.

Answer 1

For the part about generating tokens you can look into something called JWT. As said on the page JWT is a "method for representing claims securely between two parties", which means you can use it to verify that the user using your page is in fact who he states to be. For the other parts, what you came up with is a preety standard strategy (user signs in, gets token, uses this token to use the app without needing to sign in again).

Simple explaination about JWT since you had a lot of questions:

JWT consists of three parts Header, Payload and Signature. Header and Payload are public (ie. user having the token can read them, they are only Base64 encoded), so don't store secret data inside them (althrough username and password hashed with salt should be fine). When you generate jwt, server calculates hash of header+payload+secret (secret known only to server) and puts it in the signature. Then when user tries to authenticate the signature must match with the data (since server again hashes header+payload+secret and compares it with signature) and only then it is accepted by server. This way without knowing the secret user can't change the data by himself. JWT also implement "out of the box" one additional feature you might be interested in - expiration time. This way you can automatically logout users if they haven't used the page for certain periods of time. As to refreshing tokens there are a couple of ways and you need to deicide yourself whats the right way for you, Link