How To Password Protect A Static Website

Thursday, Oct 15, 2015

DEPRECATED This post refers to an older version of Aerobatic. We now offer the password-protect plugin to accomplish the same objective.

A common request from our customers, especially digital agencies, is to be able to password protect their web site such that clients can preview it while in development, while making sure that it’s not accessible to the general public.

In the following example, we’ll create a simple password protected site using the new Aerobatic basic-auth plugin.

For this tutorial, we’ll assume that you already have a static site hosted with Aerobatic, and now you just want to add authentication.

Step 1: Create a package.json

Either create a package.json file, or in your repository’s existing package.json file, add the following code block. Make sure the package.json file is in the root of your repository that you’re hosting with Aerobatic.

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

In the example above, we’ve included an optional path attribute. In this case, only pages that are in the /protected folder require a username and password. If you want to protect the whole site, just omit the path attribute from the package.json.

Step 2: Create Environment Variables

In the package.json file above, you’ll notice that we have two environment variables, BASIC_AUTH_USERNAME and BASIC_AUTH_PASSWORD. In the Aerobatic dashboard page for your repo, click the Environment Variables link and add your two environment variables. These are the values that you’ll give to the users that you want to permit access to your site. In the example below, both the username and password are “aerobatic.” Presumably you’ll want to create something a bit more secure :-)

Step 3: Push your code

Push your updated repo with the newly createdpackage.json file, and you’re done!

Sample App