web/user: fix race condition in user settings flow executor (cherry-pick #13163) (#13169)

web/user: fix race condition in user settings flow executor (#13163)

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

web/src/elements/Interface/brandProvider.ts

@@ -3,6 +3,7 @@ import type { AbstractConstructor } from "@goauthentik/elements/types.js";
 
 import { consume } from "@lit/context";
 import type { LitElement } from "lit";
+import { state } from "lit/decorators.js";
 
 import type { CurrentBrand } from "@goauthentik/api";
 
@@ -12,6 +13,7 @@ export function WithBrandConfig<T extends AbstractConstructor<LitElement>>(
 ) {
     abstract class WithBrandProvider extends superclass {
         @consume({ context: authentikBrandContext, subscribe })
+        @state()
         public brand!: CurrentBrand;
     }
     return WithBrandProvider;

web/src/user/user-settings/details/UserSettingsFlowExecutor.ts

@@ -10,7 +10,7 @@ import { StageHost } from "@goauthentik/flow/stages/base";
 import "@goauthentik/user/user-settings/details/stages/prompt/PromptStage";
 
 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, html } from "lit";
+import { CSSResult, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
@@ -83,13 +83,15 @@ export class UserSettingsFlowExecutor
             });
     }
 
-    firstUpdated(): void {
+    updated(changedProperties: PropertyValues<this>): void {
+        if (changedProperties.has("brand") && this.brand) {
             this.flowSlug = this.brand?.flowUserSettings;
             if (!this.flowSlug) {
                 return;
             }
             this.nextChallenge();
         }
+    }
 
     async nextChallenge(): Promise<void> {
         this.loading = true;
@@ -161,7 +163,7 @@ export class UserSettingsFlowExecutor
                 // Flow has finished, so let's load while in the background we can restart the flow
                 this.loading = true;
                 console.debug("authentik/user/flows: redirect to '/', restarting flow.");
-                this.firstUpdated();
+                this.nextChallenge();
                 this.globalRefresh();
                 showMessage({
                     level: MessageLevel.success,