Programming Security

How to Make a Login Protected Area for Your Website

Joe Coburn 24-05-2017

You’ve learned how to make a website How to Make a Website: For Beginners Today I'll be guiding you through the process of making a complete website from scratch. Don't worry if this sounds difficult. I'll guide you through it every step of the way. Read More and read our jQuery guide A Basic Guide to JQuery for Javascript Programmers If you are a Javascript programmer, this guide to JQuery will help you start coding like a ninja. Read More . What’s next? Creating a password protected area for your website is essential for keeping your stuff secure. Fortunately, it’s easier than you may think!


Getting Started

There are many ways to password protect a website. You could setup an online database So What Is a Database, Anyway? [MakeUseOf Explains] For a programmer or a technology enthusiast, the concept of a database is something that can really be taken for granted. However, for many people the concept of a database itself is a bit foreign.... Read More and code your own login system, or you could use a content management system such as WordPress How To Setup A Self-hosted WordPress Blog for Free Read More .

Today I’ll be showing you how to password protect your website by using your web server.

You’ll need an Apache web server to follow along. Many other web servers provide similar functionality, but the configuration steps needed may be different.


Apache is one of the most popular web servers on the planet, and as the name suggests, it serves web pages. A common phrase you may have heard is LAMP, which stands for Linux, Apache, MySQL, and PHP/Python/Perl. You won’t need any programming languages or databases today, and you don’t need Linux either — the Windows variant is called a WAMP stack.


There are many variations now, as many websites switch to database engines such as PostgreSQL or web servers such as NGINX, but LAMP is much easier to say than LEMP, LAPP, LNMP, or LNPP, so it can be considered as more of a catch-all phrase.

If you use a web hosting The Best Web Hosting Services: Shared, VPS, and Dedicated Looking for the best web hosting service for your needs? Here are our best recommendations for your blog or website. Read More service to run your website, you are all set (providing it’s running Apache). If you’re not sure what type of hosting you need, then check out website hosting explained The Various Forms Of Website Hosting Explained [Technology Explained] Read More . If you want to develop or experiment on your own computer, you’ll need to create a virtual web development environment How to Create a Virtual Web Development Environment and Server So how do you balance your ability to multi-task with your need to develop web apps in the native context where they'll run? Enter virtual machines. Read More .

What Is an .htaccess File?

Htaccess, or hypertext access is a configuration file. It’s used to configure Apache to your needs. It works on a per-directory basis, so you can have one set of rules and configurations for your media hosting, and another totally different set for your blog. Htaccess files are called so after their name. An htaccess file is a text file called .htaccess. Notice how it does not have a name, rather the extension is called htaccess. This may be hidden by default in Windows, so take a look at how to view hidden files and folders How to View Hidden Files and Folders in Windows Need to work with a hidden file or folder in Windows? Here's how to view them in just a few clicks. Read More in Windows if you’re having trouble.

Here’s some of the cool things htaccess can do:

  • Block spam visitors.
  • Compress pages on-the-fly.
  • Prevent image hotlinking.
  • Serve custom error pages.

You may have seen default error pages. They get the job done, but look quite basic:

HTTP Error

With Apache you can make these pages much nicer, along with a whole host of other features!

Configure htaccess

Now that you know what it is, let’s setup htaccess. You first need to enable it, which is done by editing the httpd.conf file, which is another Apache configuration file. Find the following line:

<Directory "/var/www/htdocs">

The directory path (/var/www/htdocs) is the location of your website root. This may be different if you have changed it. Change the following subsequent line from this:

AllowOverride None

To this:

AllowOverride All

Restart Apache and you will now be ready to use your htaccess files. If you’re using an online hosting provider, you may need to configure these options in your online control panel.

Here’s the code you need to put in your htaccess file:

AuthType Basic
AuthName "MUO Secret Area"
AuthUserFile /.htpasswd
Require valid-user

Save this htaccess file anywhere you like. Putting it at the top level will password protect your entire website, or you could put it in a specific directory, and only have it protect that folder.

There are two key things this is doing. The AuthName is presented to any user who attempts to login. In this case, it is set to “MUO Secret Area”, but you can change this to anything you want. The AuthUserFile needs to point to a valid .htpasswd file. This file needs to contain a list of usernames and passwords in the following format:


That’s it! Your website or directory is now password protected. Here’s what that looks like when you are prompted for credentials:

Authentication Required

Your browser controls the look and feel of this login box, so it’s not possible to configure this. You may want to create strong passwords How To Create Strong Passwords That You Can Remember Easily Read More , and ensure that the rest of your website security can stand up to any potentially nefarious actions.

Going Deeper

Now that you know the basics, let’s look at an advanced example. Say you want to give your Raspberry Pi web server How to Host Your Own Website on a Raspberry Pi Need to run a website but can't afford the hosting costs? Build your own LAMP-capable web server with a low-powered Raspberry Pi. Read More access to your protected directory. You could configure the Pi to supply the correct login credentials, but it’s even easier to allow password free access for a specific IP Address.

Configure your Pi with a static IP address, and then replace the previous example with this new code:

AuthType Basic
AuthName "MUO Secret Area"
AuthUserFile /.htpasswd
Require valid-user
Order deny,allow
Deny from all
Allow from
Satisfy any

This code contains the same instructions as the previous example, with the addition of a few extra lines at the bottom. The most important one is this:

Allow from

This tells Apache to allow the IP Address password free access. Anybody coming from a different IP Address will need to supply a valid username and password. Make sure you change to the IP address of your Pi or any other device you wish to supply access to.

Here’s the default error page if you don’t login correctly, or don’t have the correct IP Address

Unauthorised Access

Performance Tips

Htaccess provides a brilliant way to configure a variety of things on your web server, particularly if you don’t have much control over the rest of the server. It’s easy to get carried away however, and reduce the performance of your website significantly. If you’re able to, consider using PHP or any other language to perform complex tasks, and save htaccess for when your requirements are smaller, or you don’t have full control of the server.

Did you learn anything new today? What are your favorite htaccess tricks? Let us know in the comments below!

Related topics: Password, Web Development.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

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