From b448e76db4400bfb218fd3d1b625d2f5b1747134 Mon Sep 17 00:00:00 2001
From: "Jens L." <jens@goauthentik.io>
Date: Fri, 9 May 2025 17:58:43 +0200
Subject: [PATCH] web/flows/sfe: fix global background image not being loaded
 (#14442)

* web/flows/sfe: add initial loading spinner

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix brand-level default flow background not working with SFE and loading original image with full flow interface

https://github.com/goauthentik/authentik/pull/13079#issuecomment-2853357407
Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 authentik/flows/templates/if/flow-sfe.html | 3 ++-
 authentik/flows/templates/if/flow.html     | 4 ++--
 authentik/flows/views/interface.py         | 4 +++-
 web/packages/sfe/src/index.ts              | 9 +++++++++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/authentik/flows/templates/if/flow-sfe.html b/authentik/flows/templates/if/flow-sfe.html
index abea71934b..1dc99a80d7 100644
--- a/authentik/flows/templates/if/flow-sfe.html
+++ b/authentik/flows/templates/if/flow-sfe.html
@@ -15,6 +15,7 @@
         {% endblock %}
         <link rel="stylesheet" type="text/css" href="{% static 'dist/sfe/bootstrap.min.css' %}">
         <meta name="sentry-trace" content="{{ sentry_trace }}" />
+        <link rel="prefetch" href="{{ flow_background_url }}" />
         {% include "base/header_js.html" %}
         <style>
           html,
@@ -22,7 +23,7 @@
             height: 100%;
           }
           body {
-            background-image: url("{{ flow.background_url }}");
+            background-image: url("{{ flow_background_url }}");
             background-repeat: no-repeat;
             background-size: cover;
           }
diff --git a/authentik/flows/templates/if/flow.html b/authentik/flows/templates/if/flow.html
index 2cf3246db3..0eb9ec7559 100644
--- a/authentik/flows/templates/if/flow.html
+++ b/authentik/flows/templates/if/flow.html
@@ -5,7 +5,7 @@
 
 {% block head_before %}
 {{ block.super }}
-<link rel="prefetch" href="{{ flow.background_url }}" />
+<link rel="prefetch" href="{{ flow_background_url }}" />
 {% if flow.compatibility_mode and not inspector %}
 <script>ShadyDOM = { force: !navigator.webdriver };</script>
 {% endif %}
@@ -21,7 +21,7 @@ window.authentik.flow = {
 <script src="{% versioned_script 'dist/flow/FlowInterface-%v.js' %}" type="module"></script>
 <style>
 :root {
-    --ak-flow-background: url("{{ flow.background_url }}");
+    --ak-flow-background: url("{{ flow_background_url }}");
 }
 </style>
 {% endblock %}
diff --git a/authentik/flows/views/interface.py b/authentik/flows/views/interface.py
index 2806ba782f..d8b1e1cebc 100644
--- a/authentik/flows/views/interface.py
+++ b/authentik/flows/views/interface.py
@@ -13,7 +13,9 @@ class FlowInterfaceView(InterfaceView):
     """Flow interface"""
 
     def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
-        kwargs["flow"] = get_object_or_404(Flow, slug=self.kwargs.get("flow_slug"))
+        flow = get_object_or_404(Flow, slug=self.kwargs.get("flow_slug"))
+        kwargs["flow"] = flow
+        kwargs["flow_background_url"] = flow.background_url(self.request)
         kwargs["inspector"] = "inspector" in self.request.GET
         return super().get_context_data(**kwargs)
 
diff --git a/web/packages/sfe/src/index.ts b/web/packages/sfe/src/index.ts
index a33e54a22a..a4cc79b62f 100644
--- a/web/packages/sfe/src/index.ts
+++ b/web/packages/sfe/src/index.ts
@@ -47,7 +47,16 @@ class SimpleFlowExecutor {
         return `${ak().api.base}api/v3/flows/executor/${this.flowSlug}/?query=${encodeURIComponent(window.location.search.substring(1))}`;
     }
 
+    loading() {
+        this.container.innerHTML = `<div class="d-flex justify-content-center">
+            <div class="spinner-border spinner-border-md" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>`;
+    }
+
     start() {
+        this.loading();
         $.ajax({
             type: "GET",
             url: this.apiURL,