Local Storage with RESTful API for user authentication. Is this a safe method?

Question

I would really like some opinions on whether the following is a safe method as user authentication, and if not, please point out it's shortcomings.

• React front end
• PHP / MySQL based RESTful API on remote server

1) user signs up, data is posted to the API, user is emailed a single use activation link to ensure email is valid before they can access their account.

2) user signs in, API validates the data in all of the usual ways and then sends back a JSON object containing their user ID and an access token.

3) user ID and access token are set in localStorage on the users device upon receiving the data. React then grabs that data from localStorage and uses it to set and control the state in Redux stores providing an App wide Auth state.

4) user ID and access token are sent along with every future request made to the API. In the instances where a user isn't logged in, i.e - they don't supply a valid user id with matching token, they are automatically prevented from requesting anything that requires authentication at the very first entry point of the API. Suitable responses are sent back which in turn update the front end state to reflect a non-logged in user.

5) When the user logs out the access Token is deleted from localStorage.

A bit more detail about some the inner workings :

• All tokens are generated server side and stored in the DB, they are random and unique bin2hex(random_bytes(32)) and only valid when supplied with the matching user ID. So changing the user ID in a request will result in a failed auth response, as will supplying a valid user ID with a mismatching or expired token.

• Tokens are single use and a new token is generated, stored and then sent back in the response from every authenticated request along with the corresponding user ID. This may be overkill and put a lot of extra strain on the server. Would really like your opinions on this aspect especially please.

• Tokens are set to expire in 2hrs regardless. So if the user leaves themselves logged in, they will be automatically logged out after 2hrs of inactivity.

• User ID and Token are sent as part of the JSON body of every request (not in the headers). Is this a cause for concern?

• At no point (other than sign up and login) is the users password transmitted or stored in localStorage or used by the React frontend. A matching user ID and Token is all that is required to validate the user after the initial authorization.

• All connections are made via HTTPS.

Can you spot any glaring security risks in this approach? Am I missing the elephant in the room here?

Obviously the user ID and matching token is as good as supplying the users email and password on every request as far as auth goes, but I can't use PHP sessions or cookies* as the API is hosted on a different domain. This is the best workaround I could come up with without having to go down the JWT or Oauth route.

How flawed it could be in regards to how I am checking and validating data on the API can't be practically addressed here, but assuming that it is all being done correctly is this method secure enough in principle?

I look forward to and thank you in advance for your opinions :)

*without a ton of workarounds which would ultimately be superflous as this App can only be used with modern browsers which all support localStorage.

Answer 1

In my opinion is not save to store the token in the local store,

As said in https://auth0.com/docs/security/store-tokens

Since Browser local storage (or session storage) is not secure. Any data stored there may be vulnerable to cross-site scripting. If an attacker steals a token, they can gain access to and make requests to your API. Treat tokens like credit card numbers or passwords: don’t store them in local storage.

A better option is to use cookies since they are managed by the browser.