When no framework or CMS was chosen when creating the App,
htdocs is the default root folder of the App. Create a new folder, called something like
root. Move all your web contents into that folder. Set the newly created folder containing everything now, as the new root path in the Dashboard, see also here on how to do the last part. This step not required, as with fortrabbit all files starting with:
.ht* will be blocked from delivery.
.htaccess file in the directory you want to secure, also see our .htaccess article. Likely that this is your new root directory, can also be below that. Be careful, the dot at the beginning of the file names indicates that it is a hidden file. You can upload the file by any deployment method: with Git, by SFTP or create it on remote via SSH. Please note, that all frameworks and CMS systems will already have an
.htaccess file in their own root path. You can modify that as well. This is, what your
.htaccess should contain for HTTP auth:
AuthName "Welcome to my awesome project. Please Login."
The first line starts the directive. The second line set a hello message which is printed to greet the user. The third line points the server to the file that stores the username and password to login, this is an absolute path. This
.htpasswd file should NOT be reachable from the outside, via http. That's why you have moved all the files one level deeper. The last line finally sets the rule, that only valid users are allowed to browse.
As you can already guess by now, the
.htpasswd file hosts the required username and password to enter your project. And this is how that file can look like:
The username is before the colon. The long string after the colon is the password. It needs to be Base64 encrypted. "htpasswd" is a command line tool likely installed on your local machine (sorry not on fortrabbit yet, so you have to run that locally):
htpasswd -c ~/directory/.htpasswd john
The -c flag create a new file. The first param defines the file name and (absolute) pat to store it. The second param the username. The tool will prompt for the password. You can also use web service like this one:
So now, as you know how to create a password protected area for your website, you need to figure out how to implement it. Most likely you want this for a "staging" area — a version of your website that is publicly served, but not intended to be open for everyone. That can be your website before it get's live or even a dedicated permanent staging area. Please see our multi staging article for more on this.
Likely, your goal is, to ask users for a password only on the staging area, but not on your local environment or even a live version. Unfortunately HTTP Auth does not play very well with standard practices of environment detection, as this is happening on a different layer. Here is what you can do:
You can upload the two files
.htpasswd directly via SSH or SFTP into your App on fortrabbit. This is not very programmatic, but pragmatic. And it works. This applies only to the Universal Stack with persistent storage.
When deploying with Git, you can use a post-deploy hook, to trigger automatic generation (or placement) of the required files. This applies to the Universal and Professional Stack Apps.
HTTP Auth is a basic, standard, minimally invasive solution. There is no UI and no dependency you need to take care of. Even database access is not required. That's the beauty of it. So it's most likely compatible with the rest of your application. But HTTP Auth is not the only way to protect your website with username and password. Your CMS or framework might bring their on solutions for this. There are plenty plugins for Craft CMS and WordPress.
Check out our htaccess article for more hands-on examples.