diff --git a/.env.example b/.env.example
index 898f524..343f7c2 100644
--- a/.env.example
+++ b/.env.example
@@ -3,6 +3,7 @@
# ==============================================================================
PG_PASS=
AUTHENTIK_SECRET_KEY=
+ENCRYPTION_KEY=
# ==============================================================================
# HOST CONFIGURATION
diff --git a/authentik/blueprints/kaboot-setup.yaml b/authentik/blueprints/kaboot-setup.yaml
index 2c6eaf2..c7510c2 100644
--- a/authentik/blueprints/kaboot-setup.yaml
+++ b/authentik/blueprints/kaboot-setup.yaml
@@ -25,6 +25,166 @@ metadata:
blueprints.goauthentik.io/description: "Complete Kaboot OAuth2/OIDC setup with enrollment flow"
entries:
+ # ═══════════════════════════════════════════════════════════════════════════════
+ # BRANDING
+ # ═══════════════════════════════════════════════════════════════════════════════
+
+ - id: kaboot-brand
+ model: authentik_brands.brand
+ identifiers:
+ domain: localhost
+ attrs:
+ domain: localhost
+ default: true
+ branding_title: Kaboot
+ branding_logo: /media/branding/logo.svg
+ branding_favicon: /media/branding/logo.svg
+ flow_authentication: !Find [authentik_flows.flow, [slug, default-authentication-flow]]
+ flow_invalidation: !Find [authentik_flows.flow, [slug, default-invalidation-flow]]
+ flow_user_settings: !Find [authentik_flows.flow, [slug, default-user-settings-flow]]
+ attributes:
+ settings:
+ theme:
+ base: light
+ css: |
+ /* Kaboot Theme for Authentik */
+
+ :root {
+ --ak-accent: #2563eb;
+ --ak-primary: #2563eb;
+ --ak-primary-dark: #1e40af;
+ --ak-primary-light: #60a5fa;
+ --ak-error: #ef4444;
+ --ak-success: #22c55e;
+ --pf-global--FontFamily--sans-serif: "Inter", system-ui, -apple-system, sans-serif;
+ }
+
+ /* Background color fallback (image set via Flow settings) */
+ body {
+ background-color: #2563eb !important;
+ }
+
+ /* Login Card */
+ .pf-c-login__main {
+ background-color: #ffffff !important;
+ border-radius: 2rem !important;
+ box-shadow: 0 10px 0 rgba(0,0,0,0.1) !important;
+ padding: 3rem !important;
+ max-width: 500px !important;
+ margin: 0 auto;
+ }
+
+ /* Inputs */
+ .pf-c-form-control {
+ border: 2px solid #e5e7eb !important;
+ border-radius: 1rem !important;
+ padding: 0.75rem 1rem !important;
+ font-weight: 600 !important;
+ color: #333 !important;
+ font-size: 1rem !important;
+ box-shadow: none !important;
+ transition: all 0.2s ease !important;
+ }
+
+ .pf-c-form-control:focus {
+ border-color: #2563eb !important;
+ outline: none !important;
+ }
+
+ /* Primary Button - Kaboot Signature 3D Style */
+ .pf-c-button.pf-m-primary {
+ background-color: #333333 !important;
+ color: #ffffff !important;
+ border: none !important;
+ border-radius: 1rem !important;
+ padding: 0.75rem 1.5rem !important;
+ font-weight: 800 !important;
+ font-size: 1.1rem !important;
+ box-shadow: 0 6px 0 #000000 !important;
+ transform: translateY(0) !important;
+ transition: all 0.1s ease !important;
+ text-transform: uppercase !important;
+ letter-spacing: 0.05em !important;
+ }
+
+ .pf-c-button.pf-m-primary:hover {
+ background-color: #1a1a1a !important;
+ }
+
+ .pf-c-button.pf-m-primary:active {
+ transform: translateY(6px) !important;
+ box-shadow: none !important;
+ }
+
+ /* Secondary/Link Buttons */
+ .pf-c-button.pf-m-secondary, .pf-c-button.pf-m-link {
+ color: #2563eb !important;
+ font-weight: 600 !important;
+ }
+
+ /* Titles */
+ .pf-c-title {
+ font-weight: 900 !important;
+ color: #111827 !important;
+ text-align: center !important;
+ margin-bottom: 1.5rem !important;
+ }
+
+ /* Logo styling if present in header */
+ .pf-c-brand {
+ filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
+ }
+
+ /* Alert/Notification boxes */
+ .pf-c-alert {
+ border-radius: 1rem !important;
+ border: 2px solid transparent !important;
+ box-shadow: 0 4px 0 rgba(0,0,0,0.05) !important;
+ }
+
+ .pf-c-alert.pf-m-danger {
+ background-color: #fef2f2 !important;
+ border-color: #fca5a5 !important;
+ color: #991b1b !important;
+ }
+
+ /* Footer links */
+ .pf-c-login__main-footer-links-item-link {
+ color: #6b7280 !important;
+ font-weight: 500 !important;
+ }
+
+ /* Hide the default background image if any */
+ .pf-c-background-image {
+ display: none !important;
+ }
+
+ # ═══════════════════════════════════════════════════════════════════════════════
+ # FLOW BACKGROUNDS
+ # ═══════════════════════════════════════════════════════════════════════════════
+
+ - id: update-authentication-flow-background
+ model: authentik_flows.flow
+ identifiers:
+ slug: default-authentication-flow
+ attrs:
+ title: Welcome to Kaboot!
+ background: /media/branding/background.svg
+
+ - id: update-invalidation-flow-background
+ model: authentik_flows.flow
+ identifiers:
+ slug: default-invalidation-flow
+ attrs:
+ background: /media/branding/background.svg
+
+ - id: update-authorization-flow-background
+ model: authentik_flows.flow
+ identifiers:
+ slug: default-provider-authorization-implicit-consent
+ attrs:
+ background: /media/branding/background.svg
+
# ═══════════════════════════════════════════════════════════════════════════════
# GROUPS
# ═══════════════════════════════════════════════════════════════════════════════
@@ -173,6 +333,7 @@ entries:
slug: enrollment-flow
designation: enrollment
authentication: none
+ background: /media/branding/background.svg
- id: enrollment-flow-prompt-binding
model: authentik_flows.flowstagebinding
diff --git a/authentik/branding/background.svg b/authentik/branding/background.svg
new file mode 100644
index 0000000..1454349
--- /dev/null
+++ b/authentik/branding/background.svg
@@ -0,0 +1,13 @@
+
diff --git a/authentik/branding/custom-css.yaml b/authentik/branding/custom-css.yaml
new file mode 100644
index 0000000..c5fe7d2
--- /dev/null
+++ b/authentik/branding/custom-css.yaml
@@ -0,0 +1,115 @@
+settings:
+ theme:
+ base: light
+ css: |
+ /* Kaboot Theme for Authentik */
+
+ :root {
+ --ak-accent: #2563eb;
+ --ak-primary: #2563eb;
+ --ak-primary-dark: #1e40af;
+ --ak-primary-light: #60a5fa;
+ --ak-error: #ef4444;
+ --ak-success: #22c55e;
+ --pf-global--FontFamily--sans-serif: "Inter", system-ui, -apple-system, sans-serif;
+ }
+
+ /* Background color fallback (image set via Brand settings) */
+ body {
+ background-color: #2563eb !important;
+ }
+
+ /* Login Card */
+ .pf-c-login__main {
+ background-color: #ffffff !important;
+ border-radius: 2rem !important;
+ box-shadow: 0 10px 0 rgba(0,0,0,0.1) !important;
+ padding: 3rem !important;
+ max-width: 500px !important;
+ margin: 0 auto;
+ }
+
+ /* Inputs */
+ .pf-c-form-control {
+ border: 2px solid #e5e7eb !important;
+ border-radius: 1rem !important;
+ padding: 0.75rem 1rem !important;
+ font-weight: 600 !important;
+ color: #333 !important;
+ font-size: 1rem !important;
+ box-shadow: none !important;
+ transition: all 0.2s ease !important;
+ }
+
+ .pf-c-form-control:focus {
+ border-color: #2563eb !important;
+ outline: none !important;
+ }
+
+ /* Primary Button - Kaboot Signature 3D Style */
+ .pf-c-button.pf-m-primary {
+ background-color: #333333 !important;
+ color: #ffffff !important;
+ border: none !important;
+ border-radius: 1rem !important;
+ padding: 0.75rem 1.5rem !important;
+ font-weight: 800 !important;
+ font-size: 1.1rem !important;
+ box-shadow: 0 6px 0 #000000 !important;
+ transform: translateY(0) !important;
+ transition: all 0.1s ease !important;
+ text-transform: uppercase !important;
+ letter-spacing: 0.05em !important;
+ }
+
+ .pf-c-button.pf-m-primary:hover {
+ background-color: #1a1a1a !important;
+ }
+
+ .pf-c-button.pf-m-primary:active {
+ transform: translateY(6px) !important;
+ box-shadow: none !important;
+ }
+
+ /* Secondary/Link Buttons */
+ .pf-c-button.pf-m-secondary, .pf-c-button.pf-m-link {
+ color: #2563eb !important;
+ font-weight: 600 !important;
+ }
+
+ /* Titles */
+ .pf-c-title {
+ font-weight: 900 !important;
+ color: #111827 !important;
+ text-align: center !important;
+ margin-bottom: 1.5rem !important;
+ }
+
+ /* Logo styling if present in header */
+ .pf-c-brand {
+ filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
+ }
+
+ /* Alert/Notification boxes */
+ .pf-c-alert {
+ border-radius: 1rem !important;
+ border: 2px solid transparent !important;
+ box-shadow: 0 4px 0 rgba(0,0,0,0.05) !important;
+ }
+
+ .pf-c-alert.pf-m-danger {
+ background-color: #fef2f2 !important;
+ border-color: #fca5a5 !important;
+ color: #991b1b !important;
+ }
+
+ /* Footer links */
+ .pf-c-login__main-footer-links-item-link {
+ color: #6b7280 !important;
+ font-weight: 500 !important;
+ }
+
+ /* Hide the default background image if any */
+ .pf-c-background-image {
+ display: none !important;
+ }
diff --git a/authentik/branding/logo.svg b/authentik/branding/logo.svg
new file mode 100644
index 0000000..4ce81da
--- /dev/null
+++ b/authentik/branding/logo.svg
@@ -0,0 +1,15 @@
+
diff --git a/components/AuthButton.tsx b/components/AuthButton.tsx
index 39e1473..330dd47 100644
--- a/components/AuthButton.tsx
+++ b/components/AuthButton.tsx
@@ -75,7 +75,7 @@ export const AuthButton: React.FC = ({ onAccountSettingsClick }