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
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 wish to remove, and click Delete
- Click again to confirm
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 %}.
User Account Login#
Filename: login.html
Form action: not required
Form inputs: email, password
Message classes: has-incorrect-login
<!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
<!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
<!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>