How can I password protect every page of my website, with accounts and password made by myself

Viewed 29

I'm fairly new to coding, and when I try to find a way to lock my website behind a username and password field, every tutorial just hides them as a plain variable in some random file. I'm wanting to make the website only accessible once a username and password have been entered, but I want the usernames and passwords to be made and managed by myself, so only people I know can access it. If this is a really obvious thing I apologise, but if it's something that I can specifically look up please let me know so I can do more independent research.

1 Answers

There's no good way to do this on the frontend alone.

every tutorial just hides them as a plain variable in some random file.

Sounds like some pretty shoddy tutorials. Anyone could look at the source code of the site and get in.

The right thing to do would be to:

  • Hash the passwords (one-way encryption so that the original password text cannot be recovered, even if someone gains access to the hash)
  • Save the passwords in a database or (if there aren't many) in environment variables on your server

Set up routing on the server so that if the user isn't authenticated, none of the protected content gets sent to them in the first place - redirect them to the login page. (Don't serve the HTML of a protected page and then try to do validation from that page; with that approach, users would still be able to open up the developer tools and bypass your restrictions, by inserting their own code and removing your own).

Anything on the client-side can be tampered with and bypassed; gate requests behind the server instead, which is (or, has the potential to be) much more secure.

Related