Easily Password Protect a Website or Subdirectory

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

Working on a website that you need others to see, but not the whole world? Password protecting a website (or a sub directory within a website) is actually a pretty easy thing to do.

.htaccess file

AuthType Basic  
AuthName "restricted area"  
AuthUserFile /path/to/the/directory/you/are/protecting/.htpasswd  
require valid-user

The exact path to the file is extremely important here. If you have it wrong, it will still ask for a password but nothing will seem to work. On Media Temple, my path looks like this:

/home/21410/domains/css-tricks.com/html/examples/PasswordProtected/.htpasswd

You should be able to to echo out a phpinfo(); on a page in that directory to scope this directory out.

.htpasswd file

css-tricks:csmBH6tTLNZBE

That is what the contents of the .htpasswd file should look like. One username and password per line, separated by a colon. Notice the password is encrypted though. You will need to use a special tool to encrypt your password in this way (MD5). David Walsh has a tool just for this.

In fact, I obviously first learned this from David as pretty much this exact same tip is on his site. Still, I think it’s worthy of re-posting because this is an extremely useful tool to have in your toolbox.

See it in action

Live example here.

Login/Password is css-tricks/css-tricks