This question is a bit more about concepts.
So I have wildfly backend server which is paired with a MySQL 5.5 database that I created. I am trying to implement login - logout on my website. To login/signup and logout, I am using Google's oauth2 API: <div class="g-signin2" data-onsuccess="onSignIn"></div>
Once this occurs, I am sending the id_token (from Google) to my backend server (via websocket. Before I implemented the login/logout system, I used websockets for communication between my JavaScript and Wildfly server). The id_token is verified there, and then the user gets added to my MySQL database if he/she signed up at which point the database creates an id for the user. It returns this back to the JavaScript (via a secure websocket connection). If the user logged in, then (after id_token has been verified) his/her id is retrieved from the database and sent to my JavaScript.
Once this occurs, the user needs to have access to some protected pages that only logged in users can gain access to. My question is how can I do this (I am not asking for you to write code for me, but instead to point me in the right direction). At first I thought that in my navigation bar, I will add access to protected pages once the user has been logged in, but then un-signed in users can also access them.
Secondly, how can the user id be passed between the protected pages. For example, if a user clicks on page X and then page Y, how can page X's and page Y's JavaScript access the id. I thought a way to do it would be through storing the id sent from the server as localStorage or cookie, but according to this article, it is unsafe to store sensitive information as localStorage or Cookie. So how do I store this user id, so when the user goes to any protected page and does something that requires the website to communicate with the server/database, the id can be passed and appropriate changes can be made to the MySQL database for that id/user. (Another way of saying this is how can the id remain constant across all the protected pages for a particle user's session. If you look at the top of this website, it shows your profile picture with your reputation, and no matter where you go on the website, it remains there. So how did the developers of this website do this? Did they use sessopnStorage to store the user id so whenever you click on another protected page, the JavaScript of that page sends a request to the database to pull the profile picture and reputation of the user so it can then be displayed on the navigation bar? But then wouldn't this be a very inefficient solution?).
Thank you so much for the help and advice! I have never done this before and was wondering how to do this, so thank you so much for your help. I really appreciate it.
