I’m not sure how “correct” my answer is but I have a few suggestions (from personal experience) that you may want to consider having a component higher in the hierarchy in your app handle authentication in its
componentDidMount life cycle and storing whatever you need in
How high in the hierarchy depends on whether or not anything below it requires access to the data you are storing in
localStorage. This way you can make sure that whenever there is a page refresh on pages that require access user data, your app will retrieve the newest information and store it in
An alternative to using
localStorage is to use a state container like Redux, which works equally well from personal experience.
I have NOT been formally trained on cyber security and the following comment is simply based on personal experience with React, Redux, Node and Passport; please take it with a grain of salt and do your own research (or ask an expert).
If I’m not mistaken, it’s not a good idea to store sensitive information in
localStorage and you probably want to wipe it on sign out (if you are using Redux instead of
localStorage then I think this isn’t an issue) or when the session expires. You can still use session cookies when working with React, similar to how you would in a non-React app, instead of rolling some sort of JWT implementation like 99% of the blog posts out there tells you to (some of them don’t even hash passwords…). Authorisation of further requests can also be initiated using that mechanism, too, with the appropriate credentials settings for your requests.