Adding user account authentication to your site

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

Restrict access to your site to a set of users you invite.

Visitors will be prompted to enter an email address and password.

To set up user account authentication for your site:

Go to the Site Settings / Authentication section
Select the Accounts tab and click Switch to User Account authentication

Screenshot of Account tab in Authentication interface

To add a user to your site:

Enter the email address of the person you are adding
Click Add User

The user receives an email with instructions to set a password. You can remove them at any time.

To remove a user:

Locate the user you want to remove, and click Delete
Click again to confirm

Screenshot of account tab with added user in Authentication interface

Visitors to your site will be prompted for an email address and password to view. They can also reset their passwords from this screen.

Custom Interfaces#

Customize these authentication pages 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.

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

This is not necessary if the page contains only HTML.

Filename: login.html

Form action: not required

Form inputs: email, password

Message classes: has-incorrect-login

copied

<!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 email address or password.
      </div>

      <label for="email">Email Address</label>
      <input id="email" type="email" name="email" autofocus>

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

      <input type="submit" value="Log in">
    </form>

    <a href="/reset-password">Forgot your password?</a>
  </body>
</html>

Set Password#

Filename: set-password.html

Form action: /set-password

Form inputs: password, password-confirm, token

Message classes: has-password-mismatch, has-invalid-link, has-token-expired, has-success

set-password.html

copied

<!DOCTYPE html>

<html>
  <head>
    <title>Set Password</title>
    <style>
      .password-mismatch-message,
      .invalid-link-message,
      .token-expired-message,
      .success-message {
        display: none;
      }

      .has-password-mismatch .password-mismatch-message,
      .has-invalid-link .invalid-link-message,
      .has-token-expired .token-expired-message,
      .has-success .success-message {
        display: block;
      }

      .has-success label,
      .has-success input {
        display: none;
      }
    </style>
  </head>
  <body class="{{messageClasses}}">
    <h1>Set Password</h1>
    <form action="/set-password" method="post">
      <div class="password-mismatch-message">
        Password did not match confirmation.
      </div>
      <div class="invalid-link-message">
        Your reset link is no longer valid.
        <a href="/reset-password">Reset your password</a> to get another.
      </div>
      <div class="token-expired-message">
        Your reset link has expired.
        <a href="/reset-password">Reset your password</a> to get another.
      </div>
      <div class="success-message">
        Successfully set your password.
      </div>

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

      <label for="password-confirm">Confirm Password</label>
      <input id="password-confirm" type="password" name="password-confirm">

      <input type="hidden" name="token" value="{{token}}">

      <input type="submit" value="Set Password">
    </form>
  </body>
</html>

Reset Password#

Filename: reset-password.html

Form action: /reset-password

Form inputs: email

Message classes: has-no-email, has-success

reset-password.html

copied


<!DOCTYPE html>

<html>
  <head>
    <title>Reset Password</title>
    <style>
      .no-email-message,
      .success-message {
        display: none;
      }

      .has-success .success-message,
      .has-no-email .no-email-message {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Reset Password</h1>

    <form action="/reset-password" method="post" class="{{messageClasses}}">
      <div class="no-email-message">
        You must provide an email address.
      </div>
      <div class="success-message">
        We've sent you an email with instructions to reset your password.
      </div>

      <label for="email">Email Address</label>
      <input id="email" type="email" name="email" autofocus>

      <input type="submit" value="Reset Password">
    </form>
  </body>
</html>

Adding user account authentication to your site

Custom Interfaces#

User Account Login#

Set Password#

Reset Password#