I have run into a dilemma lately when trying to Authenticate using Google OAuth on a React app through an Express server.
My main question is How should React interact with Express? Moreover, how can I store the session in browser (controlled by React), based on what the server is constructing (using passport), so that the user stays logged in if page refresh?
Another question would be, how should React check if a user is logged in when accessing the application?
You would likely need to use a cookie system if you wanted it to be more obscure. I believe that passport also has a package called passport-cookie which lets you handle that user side authentication. Check it out here.
Thank you for the reply @clm1.
I have ended up using cookie-parser (at least for now) to store the token signed in the back-end. But the OAuth server is communicating to the Front-end only. Is this fine?
Now I am exploring ideas on how to ‘save’ Redux store to persist between refresh and path change. I have found to do so in user’s browser localStorage. But this raises some security issues (XSS attacks). Can someone suggest any other way so that storing the state is more secure? Thanks.
I see what you’re saying. You may want to look into cacheing the data for the user. This would require you to add cacheing checks in areas where a user inputs information such that, if said data point has a value in the cache, you populate that value. If a user updates the input you want to rewrite the value in the cache.