{"id":825,"date":"2008-07-23T05:45:03","date_gmt":"2008-07-23T12:45:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=825"},"modified":"2016-02-11T11:43:15","modified_gmt":"2016-02-11T18:43:15","slug":"easily-password-protect-a-website-or-subdirectory","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/easily-password-protect-a-website-or-subdirectory\/","title":{"rendered":"Easily Password Protect a Website or Subdirectory"},"content":{"rendered":"

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.<\/p>\n

<\/p>\n

\"\"<\/p>\n

.htaccess file<\/h3>\n
AuthType Basic  \r\nAuthName \"restricted area\"  \r\nAuthUserFile \/path\/to\/the\/directory\/you\/are\/protecting\/.htpasswd  \r\nrequire valid-user<\/code><\/pre>\n
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:<\/p>\n
\/home\/21410\/domains\/css-tricks.com\/html\/examples\/PasswordProtected\/.htpasswd<\/code><\/pre>\n
You should be able to to echo out a phpinfo(); on a page in that directory to scope this directory out.<\/p>\n
.htpasswd file<\/h3>\n
css-tricks:csmBH6tTLNZBE<\/code><\/pre>\n
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<\/a>.<\/p>\n
In fact, I obviously first learned this from David as pretty much this exact same tip<\/a> 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.<\/p>\n
See it in action<\/h3>\n
Live example here<\/a>. <\/p>\n
Login\/Password is css-tricks\/css-tricks<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":322482,"url":"https:\/\/css-tricks.com\/lets-create-our-own-authentication-api-with-nodejs-and-graphql\/","url_meta":{"origin":825,"position":0},"title":"Let’s Create Our Own Authentication API with Nodejs and GraphQL","date":"October 13, 2020","format":false,"excerpt":"Authentication is one of the most challenging tasks for developers just starting with GraphQL. There are a lot of technical considerations, including what ORM would be easy to set up, how to generate secure tokens and hash passwords, and even what HTTP library to use and how to use it.\u00a0\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/auth-lock-website.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316504,"url":"https:\/\/css-tricks.com\/building-a-blog-with-next-js\/","url_meta":{"origin":825,"position":1},"title":"Building a Blog with Next.js","date":"July 9, 2020","format":false,"excerpt":"In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll. I've always been a big fan of how Jekyll makes it easier for beginners to setup a blog and at the same time also provides a great degree of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/next-js-blog.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303932,"url":"https:\/\/css-tricks.com\/build-a-node-js-tool-to-record-and-compare-google-lighthouse-reports\/","url_meta":{"origin":825,"position":2},"title":"Build a Node.js Tool to Record and Compare Google Lighthouse Reports","date":"March 16, 2020","format":false,"excerpt":"In this tutorial, I\u2019ll show you step by step how to create a simple tool in Node.js to run Google Lighthouse audits via the command line, save the reports they generate in JSON format and then compare them so web performance can be monitored as the website grows and develops.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/google-lighthouse.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352074,"url":"https:\/\/css-tricks.com\/how-to-implement-logging-in-a-node-js-application-with-pino-logger\/","url_meta":{"origin":825,"position":3},"title":"How to Implement Logging in a Node.js Application With Pino-logger","date":"September 22, 2021","format":false,"excerpt":"Logging, on its own, is a key aspect of any application. Logging helps developers comprehend what it is that their code is doing. It also helps save developers hours of debugging work. This tutorial is about implementing logging in a Node.js application using Pino-logger. With logging, you can store every\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/pino-logger.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330977,"url":"https:\/\/css-tricks.com\/converting-and-optimizing-images-from-the-command-line\/","url_meta":{"origin":825,"position":4},"title":"Converting and Optimizing Images From the Command Line","date":"December 21, 2020","format":false,"excerpt":"Images take up to 50% of the total size of an average web page. And if images are not optimized, users end up downloading extra bytes. And if they\u2019re downloading extra bytes, the site not only takes that much more time to load, but users are using more data, both\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/optimize-images-terminal.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":174918,"url":"https:\/\/css-tricks.com\/sprinkling-php-server-side-techniques-help-front-end-tasks\/","url_meta":{"origin":825,"position":5},"title":"A Sprinkling of PHP: Server-Side Techniques to Help with Front End Tasks","date":"July 8, 2014","format":false,"excerpt":"The following is a guest post by Zachary Brady. Zachary is about to take us on a beginner's journey using PHP to do some things that us front end developers sometimes need to do. To me, this kind of thing doesn't make us back end developers, but more resourceful front\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/825"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=825"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/825\/revisions"}],"predecessor-version":[{"id":237949,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/825\/revisions\/237949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}