Secure Way To Handle Frontend Login

A few questions came across my mind about how to secure a login page (Web). When I build a demo app for instance a web-application with VueJS or just really blank using HTML/JS, I

Solution 1:

I am assuming we are in a typical single page app/web app context here, with separated front end and back end (api) projects, communicating via (asynchronouse) HTTP requests:

In this case: Yes it will be safe because your front end does not contain any protected data in the first place. It's the servers responsibility to only send data the client is allowed to have.

In this case, it doesn't matter what exactly the server responds to your login. It could be a JSON with success and a token or the current user object and a cookie. The important part is that your front end now knows a secret the server gave it. The frontend can now happily switch to another view (remember, a view does not come with any data initally) and request some protected data it wants to display with the received secret.

If you would have tricked the front end to think you are logged in, the request now would fail (because you never got a secret from the server) and you would sit there, starring at a blank UI and probably an error message.

To your last question, if you are forced to PHP (or so): No but yes. You will need something on your server side that knows about your users and their privileges, something that decides who is allowed to view or alter data, but that something does not have to be PHP. Common serverside languages for web applications would be Node.js, PHP and Python but you are by no means limited to them.

Solution 2:

You could set a session variable for the current user if the login was succesfull. The session is server-side so it is much trickier to hijack the session key.

Further, you could set a time stamp and check when the user's last page refresh took place on each page load. If he did not refresh the page for X amount of time, you can unset the session variable and log out the user.