Customization

Modify Authority's appearance with Jinja templates.

Overview

Authority uses Crinja (Jinja2-compatible) templates for all pages:

Login / Registration
OAuth consent
Password reset
Admin dashboard
User profile

Template Structure

public/
├── templates/
│   ├── layout.html          # Base layout
│   ├── signin.html          # Login page
│   ├── signup.html          # Registration
│   ├── authorize.html       # OAuth consent
│   ├── activate.html        # Device activation
│   ├── forgot-password.html # Password reset request
│   ├── reset-password.html  # Password reset form
│   ├── errors.html          # Error messages
│   └── emails/              # Email templates
│       ├── verification.html
│       ├── password-reset.html
│       └── welcome.html
├── css/
│   └── styles.css           # Main stylesheet
└── js/
    └── app.js               # Client JavaScript

UI Components

Template Syntax

Variables

<h1>Welcome, {{ user.name }}</h1>
<p>Email: {{ user.email }}</p>

Conditionals

{% if error %}
<div class="alert alert-error">{{ error }}</div>
{% endif %}

{% if user.mfa_enabled %}
<span class="badge">MFA Enabled</span>
{% endif %}

Loops

<ul class="scopes">
{% for scope in scopes %}
  <li>{{ scope.name }}: {{ scope.description }}</li>
{% endfor %}
</ul>

Template Inheritance

Base layout (layout.html):

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}Authority{% endblock %}</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  {% block body %}{% endblock %}
  <script src="/js/app.js"></script>
</body>
</html>

Page template (signin.html):

{% extends "layout.html" %}
{% set title = "Sign In" %}

{% block body %}
<main class="login-form">
  {% include "errors.html" %}
  <form action="/signin" method="post">
    <input type="text" name="username" placeholder="Username" required>
    <input type="password" name="password" placeholder="Password" required>
    <button type="submit">Sign In</button>
  </form>
</main>
{% endblock %}

Available Variables

Variable

Description

forward_url

Redirect URL after login

error

Error message

username

Previously entered username

Authorization Page

Variable

Description

client_name

OAuth client name

client_id

Client identifier

scopes

Requested scopes

redirect_uri

Callback URL

state

CSRF state parameter

Device Activation

Variable

Description

user_code

Pre-filled code

audience

Client name

error

Error message

Styling

CSS Variables

:root {
  /* Primary colors */
  --primary-color: #7c3aed;
  --primary-hover: #6d28d9;

  /* Background colors */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;

  /* Text colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;

  /* Status colors */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

Custom Theme

Create a custom theme:

/* Light theme */
.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
}

Screenshots

Landing Page

Admin Dashboard

Configuration

Custom Template Path

TEMPLATES_PATH=/path/to/custom/templates

Reload Templates

In development, templates reload automatically. In production:

# Restart server to reload templates
docker-compose restart authority

Best Practices

Do:

Keep custom templates in version control
Test on multiple screen sizes
Maintain accessibility (ARIA, contrast)
Preserve security features (CSRF tokens)

Avoid:

Removing hidden form fields
Modifying form action URLs
Disabling client-side validation
Adding inline JavaScript

Next Steps

Email Templates - Customize emails
Branding - Logo and colors
User Interface Reference - Full reference

PreviousPassword Reset NextEmail Templates

Last updated 4 days ago

Was this helpful?

hashtagOverview

hashtagTemplate Structure

hashtagUI Components

hashtagTemplate Syntax

hashtagVariables

hashtagConditionals

hashtagLoops

hashtagTemplate Inheritance

hashtagAvailable Variables

hashtagSign In Page

hashtagAuthorization Page

hashtagDevice Activation

hashtagStyling

hashtagCSS Variables

hashtagCustom Theme

hashtagScreenshots

hashtagLanding Page

hashtagSign In

hashtagAdmin Dashboard

hashtagConfiguration

hashtagCustom Template Path

hashtagReload Templates

hashtagBest Practices

hashtagNext Steps

Overview

Template Structure

UI Components

Template Syntax

Variables

Conditionals

Loops

Template Inheritance

Available Variables

Sign In Page

Authorization Page

Device Activation

Styling

CSS Variables

Custom Theme

Screenshots

Landing Page

Sign In

Admin Dashboard

Configuration

Custom Template Path

Reload Templates

Best Practices

Next Steps