Templating

How to use templates to theme your authentication domain

  3 minute read  

NOTE: This is only available to Pro plans and up

Templating

All of the pages present under an authentication domain (for example, the login page, login success page, password entry page, etc.) are customizable. They are based on Jinja templates, allowing a high degree of customizability while remaining fast and easy to use.

How templates are implemented

All pages take the form of a static HTML file, which links to a global CSS file. This allows for simple customizations to the colors present on a given page, while also supporting fully custom designs.

Restrictions

All templates uploaded to Authproject must be under 300KB in size. This is done to keep the templates lightweight and easily handled by our servers.

Samples

For example, the login pages looks like the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Login</title>
    <!-- Bootstrap CSS v5.x CDN -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link href="/static/style.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="card login-card">
          <div class="login-card-title">Login to Your Account</div>
          <div class="login-card-body">
            <form method="POST" action="/login">
              {% if message %}
              <div class="mb-3">
                <p class="text-primary text-center">{{ message }}</p>
              </div>
              {% endif %} {% if error %}
              <div class="mb-3">
                <p class="text-danger text-center">{{ error }}</p>
              </div>
              {% endif %}
              <div class="mb-3">
                <label for="inputEmail" class="form-label">Email address</label>
                <input
                  type="email"
                  class="form-control"
                  id="inputEmail"
                  name="email"
                  placeholder="Enter email"
                />
              </div>
              <button type="submit" class="btn btn-success w-100 btn-square">
                Login
              </button>
              <a href="/reset" class="text-success">
                <p class="text-center pt-3">Reset password</p>
              </a>
              <a href="/signup" class="text-success">
                <p class="text-center">Sign Up</p>
              </a>
            </form>
          </div>
        </div>
      </div>
      <div class="row">
        <footer class="text-center mt-4">
          <small
            >Powered by <a href="https://authproject.com">Authproject</a></small
          >
        </footer>
      </div>
    </div>
  </body>
</html>

Explanation

The HTML is structured into three primary parts:

  1. The header, which includes relevant CSS
  2. The body, which utilizes Jinja templates
  3. The footer, which is simply “Powered by Authproject”

The Header

While not required, it is recommended that all templates include the global style.css file for theming. It must contain valid CSS, and is not given any variables to be used in the template. That is to say, the file should be CSS without any Jinja syntax.

The Body

The body is composed of HTML templated with Jinja. Each page is passed a set of variables (described on the individual page’s documentation), and can perform actions based on those variables’ contents. For example, the Login page is passed the following:

  • message - A message to be displayed to the user, but not an error
  • error - An error to be displayed to the user

These simple variables contain pre-formatted text strings to transparently display to the user in the page.

The footer is simple in this page - it simply has a link to Authproject.

Ready to get started?

To see more on templates, browse the page documentation in the side bar.

To sign up for Authproject, simply visit ours home page and contact us.

Template Tutorial

Tutorial to write your own templates in Authproject

Page Reference

Reference documentation for each template page