Adding password authentication to your site

Require a password to access your site.

To set up password authentication for your site:

  1. Go to the Site Settings / Authentication section
  2. Select Password and click Switch to Password authentication
  3. Enter a password and click Update Site Password
Screenshot of password tab in the authentication interface

Visitors to your site will be prompted for the password to view.

Screenshot of password login splash screen

Creating a custom login page

Customize the password login page with your own branding.

CloudCannon injects classes into the HTML to indicate the result of the action. They are injected into {{messageClasses}}. Use these classes to provide error handling and success notifications in your forms.

Filename: login.html

Form action: not required

Form inputs: username, password

Message classes: has-incorrect-login

Important

For Jekyll-generated pages, use raw tags so Jekyll outputs it for CloudCannon to process later: {% raw %}{{messageClasses}}{% endraw %}.

Important

CloudCannon requires a hidden username input here for internal reasons. The value is ignored.

login.html
<!DOCTYPE html>

<html>
  <head>
    <title>Log in</title>
    <style>
      .incorrect-login-message {
        display: none;
      }

      .has-incorrect-login .incorrect-login-message {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Log in</h1>

    <form action="" method="post" class="{{messageClasses}}">
      <div class="incorrect-login-message">
        Incorrect password.
      </div>

      <label for="password">Password</label>
      <input id="password" type="password" name="password" autofocus>

      <input type="hidden" name="username" value="user">

      <input type="submit" value="Log in">
    </form>
  </body>
</html>
Was this article helpful? or Suggest an improvement >