How to add a simple login to a web page

Do you need to hide or protect content on a web page. Here is a simple, but not 100% secure way to add a log on.

If the images are under copyright you might have a point in keeping the cards somewhat close. Here you can add a .gitignore file (you can choose to ignore a file or folder before you push). In that case you could share the code – but keep the images to yourself.

First hide everything: 

Then add a log on to the web page. This can be done in JavaScript. Just add an input field, and select a codeword, say “cheesecake”. Now encrypt the word by an online service such as 

Then you’ll get this string: 5ac5355b84894ede056ab81b324c4675

In the CSS add a style that will hide everything. You can do this by hiding the <body> element. You can do this via JavaScript also.

You can use prompt in order to get the password from the user.

Now you can compare the input from the form with the string – and display what’s on the webpage, e.g. via a 

if (myCode == "5ac5355b84894ede056ab81b324c4675"){

โ€‚โ€‚โ€‚โ€‚โ€‚โ€‚// here: display the page content

  = "block"

} else {

          // error message

          document.write("No access")


Probably your user don’t want to log in every time. Here you can save a true for logged in in local storage / session storage.

Protecting a Web page in .htacces

Now the solution above is not 100% secure. A better way to protect your pages is by .htaccess. Here you can follow my tutorial on YouTube.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enable Notifications OK No thanks

We use cookies - more information will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.