Create and edit professional email templates for Authentik SSO authentication flows. Use when working with Authentik email templates (.html files) for authentication events such as password reset, account confirmation, email verification, account exists notifications, invitations, or any other Authentik email communication. This skill provides templates, styling patterns, Django template syntax guidance, and deployment workflows for the avatar-deployment project.
Create professional, branded email templates for Authentik authentication flows.
assets/ matching your email typecommon/authentik-templates/All Authentik email templates follow this pattern per official documentation:
{# Django comment describing template purpose #}
{% load i18n %}
{# Optional: {% load humanize %} for time formatting #}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and title with {% trans %} tags -->
<style>
/* Inline CSS for email client compatibility */
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<h1>{% trans 'Header Title' %}</h1>
</div>
<div class="content">
{% blocktrans with username=user.username %}
<p>Hello {{ username }},</p>
{% endblocktrans %}
<!-- Main email body with {{ url }} -->
</div>
<div class="footer">
<!-- Standard Octopize footer -->
</div>
</div>
</body>
</html>
Per authentik documentation (https://docs.goauthentik.io/add-secure-apps/flows-stages/stages/email/):
{% load i18n %}user.name - username is the correct variable{% blocktrans with username=user.username %}{% blocktrans with expires=expires|naturaltime %} not raw {{ expires }}{% trans 'Text' %} tagsUse these as starting points:
{{ url }}, {{ expires|naturaltime }}, {{ user.username }}{% load i18n %} and {% load humanize %}{{ url }}, {{ user.username }}{% load i18n %}{{ url }}{% load i18n %}{{ url }}, {{ expires|naturaltime }}, {{ invitation }}{# Comments #}
{% load i18n %} {# Required for all templates #}
{% load humanize %} {# Required when using expires|naturaltime #}
{# Translate static text #}
{% trans 'Static Text' %}
{# Translate text with variables #}
{% blocktrans with username=user.username %}
Hello {{ username }},
{% endblocktrans %}
{# Format expiration time #}
{% blocktrans with expires=expires|naturaltime %}
This link expires {{ expires }}.
{% endblocktrans %}
{{ url }} - Full URL for user action{{ user.username }} - User's username (primary identifier){{ expires }} - Token expiration timestamp (use with |naturaltime)user.name|default:"there" }}{% if condition %}...{% endif %} {% for item in list %}...{% endfor %}
See [authentik-variables.md](references/authentik-variables.md) for complete reference.
## Styling Guidelines
### Must-Have Elements
1. **Inline CSS** - Email clients don't support external stylesheets
2. **Max width 600px** - Optimal for mobile and desktop
3. **Web-safe fonts** - Segoe UI, Arial, sans-serif fallbacks
4. **Responsive design** - `viewport` meta tag, mobile-friendly buttons
### Color Usage
Match colors to email purpose using Octopize brand palette:
- **Teal (Primary)**: Welcome, confirmation, general communications
- **Darker Teal**: Security, passwords, authentication
- **Amber**: Warnings, expiration notices
- **Red-Orange**: Critical alerts, account suspension
See [color-schemes.md](references/color-schemes.md) for exact color codes.
### Button Best Practices
```html
<center>
<a href="{{ url }}" class="button">Action Text</a>
</center>
<p>Or copy and paste this link into your browser:</p>
<p style="word-break: break-all; color: #43e97b; font-size: 14px;">{{ url }}</p>
Always provide both button and plain text URL for accessibility.
After creating/editing templates in common/authentik-templates/:
./sync-templates.sh
docker/authentik/custom-templates/ and services-api-helm-chart/static/emails/⚠️ Never edit docker/authentik/custom-templates/ or services-api-helm-chart/static/emails/ directly - they are auto-synced.
Templates must match Authentik's expected names:
email_password_reset.htmlemail_account_confirmation.htmlemail_account_exists.htmlMost frequently used:
{{ user.name }} - User's display name{{ user.email }} - User's email{{ url }} - Action URL (reset, confirm, etc.){{ expires }} - Link expiration in hoursBefore deployment:
{{ url }}Reference existing templates in common/authentik-templates/:
email_password_reset.html - Security-focused with warning boxemail_account_confirmation.html - Professional welcome messageemail_account_exists.html - Informative with helpful guidance