Skip to content

User Accounts

On this page:

Loading...

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:

  1. Go to the Site Settings / Authentication section
  2. Select User Account and click Switch to User Account authentication
Screenshot of Account tab in Authentication interface

To add a user to your site:

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

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

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.

Screenshot of account login 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.

Important

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

User Account Login

**Filename: **login.html

Form action: not required

Form inputs: email, password

Message classes: has-incorrect-login

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 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
<!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
<!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>
On this page:

Loading...

Don’t miss the latest
CloudCannon news freshly delivered to your inbox