How do I add basic authentication to my web site?

My web site is hosted with the Aerobatic add-on for Bitbucket, and now I'd like to limit access to users with a username and password.

Step-by-step guide

Navigate to your web site's repository
Either create a package.json file or, in your existing package.json, add the code block below (the /protected path is optional). Make sure your package.json is in the root level of your repository.
Git push your code to Bitbucket
In Bitbucket, navigate to the Aerobatic Hosting link in your repository
Click environment variables and add an environment variable for the username and another for the password

package.json

{
  "_virtualApp": {
    "router": [
      {
        "module": "basic-auth",
        "path": "/protected",
        "options": {
          "username": "env:BASIC_AUTH_USERNAME",
          "password": "env:BASIC_AUTH_PASSWORD"
        }
      },
      {
        "module": "webpage"
      }
    ]
  }
}

Auth Environment Variables

Sample App

Here is a sample web site that uses the Aerobatic basic-auth plugin. http://auth-demo.aerobatic.io/
The code for this sample site can be found on Bitbucket at https://bitbucket.org/aerobatic/auth-demo/src

Further Documentation

Full documentation on basic authentication can be found on 4front.io which is the open-source project that Aerobatic is built on.

http://4front.io/docs/plugins/basic-auth.html

How do I add basic authentication to my web site?

Step-by-step guide

package.json

Sample App

Further Documentation

Related articles