Authentication templates

Authentication templates define HTML forms for use in form-based authentication policies.

Sophos Firewall provides customizable HTML and CSS templates. To ensure that the authentication templates work well, learn more about the variables.

Variables in authentication templates

You can use the variables listed here. The first table lists the required variables, and the second table lists the optional ones.

The template must have the following variables and structure:

Variable	Description
`<form action="<?login_path?>" method="POST">`	A form element with the following parameters: method set to `Post` action set to `<?login_path?>`
`<input name="httpd_username" type="text">`	The form element must have an input element with name set to `httpd_username`. Example: `<form action="<?login_path?>" method="POST"><p><label for="httpd_username">Username:</label> <input name="httpd_username" type="text"></p></form>`
`<input name="httpd_password" type="password">`	The form element must have an input element with the name parameter set to `httpd_password`. Example: `<form action="<?login_path?>" method="POST"><p><label for="httpd_password">Password:</label> <input name="httpd_password" type="text"></p></form>`
`<input name="otp_field" type="password">`	The form element must have an input element with the name parameter set to `otp_field`. Example: `<form action="<?login_path?>" method="POST"><?otp_field?><p><label for="otp_field">One Time Password:</label><input name="otp_field" type="password"></p><?otp_field?></form>`

Note

Only <?login_path?> is substituted.

Variable	Description
`<?assets_path?>`	Substituted by the path containing the assets you upload with the authentication template. To have a clean authentication template, place the style sheets, images, and other elements outside the template. Example: `<link rel="stylesheet" type="text/css" href="<?assets_path?>/stylesheet.css">`
`<?admin_contact?>`	Substituted by the email address entered in Administration > Notification settings > Email settings > Send notifications to email address.
`<?company_logo?>`	To replace the Sophos logo, insert the path to your logo.
`<?company_text?>`	Replace the variable with the text you want users to see.

Download authentication template

Sophos Firewall provides the following default authentication template to help you protect your web servers through WAF rules. See WAF.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Updated asset path -->
    <link rel="stylesheet" type="text/css" href="<?assets_path?>/default_stylesheet.css">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Login</title>
  </head>
  <body>
    <div id="container">
      <div class="info">
        <!-- Updated logo path -->
        <img src="<?company_logo?>" alt="">
        <p><?company_text?></p>
      </div>
      <!-- Updated login path -->
      <form action="<?login_path?>" method="POST">
        <p><label for="httpd_username">Username:</label>
          <input name="httpd_username" type="text"></p>
        <p><label for="httpd_password">Password:</label>
          <input name="httpd_password" type="password"></p>
        <!-- New OTP field -->
        <?otp_field?><p><label for="otp_field">One Time Password:</label>
          <input name="otp_field" type="password"></p><?otp_field?>
        <p><input type="submit" value="Login"></p>
      </form>
      <!-- Removed persistency option -->
      <!-- Updated admin contact to empty -->
      <div class="note">If you encounter any problems or questions, please contact <b><?admin_contact?></b>.</div>
    </div>
  </body>
</html>

Download CSS template

html, body {
  width: 100%;
  height: 100%;
  color: #444;
  background: #f0f0f0;
  font: 9pt Arial,Helvetica,sans-serif;
}
#container {
  position: fixed;
  width: 340px;
  height: 470px;
  top: 40%;
  left: 50%;
  margin-top: -170px;
  margin-left: -170px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.info {
  font-size: 14px;
  padding-left: 20px;
  padding-top: 20px;
  line-height: 23px;
  text-align: center;
}
.note {
  font-size: 11.5px;
  color: #606060;
  line-height: 14px;
  float: left;
  margin: 20px;
  text-align: justify;
}
form {
  margin: 0 auto;
  margin-top: 20px;
}
label {
  color: #555;
  display: inline-block;
  margin-left: 18px;
  padding-top: 10px;
  font-size: 14px;
}
input {
  font-size: 12px;
  outline: none;
}
input[type=text], input[type=password] {
  color: #777;
  padding-left: 10px;
  margin: 10px;
  margin-top: 12px;
  margin-left: 18px;
  width: 300px;
  height: 35px;
}
input[type=text]:focus, input[type=password]:focus {
  border: 1px solid #a8c9e4;
  box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
input[type=submit] {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
  width: 80px;
  height: 30px;
  font-size: 14px;
  width: 80px;
  height: 30px;
  left: 50%;
}

More resources

Notification settings