docusaurus-config: v1.0.6

web: Clean up browser-only module imports that crash WebDriverIO. (#14330 )
* web: Clean up browser-only module imports that crash WebDriverIO. * web: Clarify slug format output.
2025-05-03 02:38:03 +02:00 · 2025-05-02 20:04:05 -04:00 · 2025-05-02 19:48:19 -04:00 · 2025-05-02 21:26:40 +02:00 · 2025-05-02 18:15:20 +00:00 · 2025-05-02 19:21:55 +02:00
140 changed files with 3070 additions and 2125 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -118,3 +118,15 @@ updates:
      prefix: "core:"
    labels:
      - dependencies
+  - package-ecosystem: docker-compose
+    directories:
+      # - /scripts # Maybe
+      - /tests/e2e
+    schedule:
+      interval: daily
+      time: "04:00"
+    open-pull-requests-limit: 10
+    commit-message:
+      prefix: "core:"
+    labels:
+      - dependencies
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -16,7 +16,7 @@
    ],
    "typescript.preferences.importModuleSpecifier": "non-relative",
    "typescript.preferences.importModuleSpecifierEnding": "index",
-    "typescript.tsdk": "./web/node_modules/typescript/lib",
+    "typescript.tsdk": "./node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true,
    "yaml.schemas": {
        "./blueprints/schema.json": "blueprints/**/*.yaml"
@ -30,7 +30,5 @@
        }
    ],
    "go.testFlags": ["-count=1"],
-    "github-actions.workflows.pinned.workflows": [
-        ".github/workflows/ci-main.yml"
-    ]
+    "github-actions.workflows.pinned.workflows": [".github/workflows/ci-main.yml"]
 }
--- a/go.mod
+++ b/go.mod
@ -22,7 +22,7 @@ require (
 	github.com/pires/go-proxyproto v0.8.0
 	github.com/prometheus/client_golang v1.22.0
 	github.com/redis/go-redis/v9 v9.8.0
-	github.com/sethvargo/go-envconfig v1.2.0
+	github.com/sethvargo/go-envconfig v1.3.0
 	github.com/sirupsen/logrus v1.9.3
 	github.com/spf13/cobra v1.9.1
 	github.com/stretchr/testify v1.10.0
--- a/go.sum
+++ b/go.sum
@ -251,8 +251,8 @@ github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFR
 github.com/rogpeppe/go-internal v1.11.0 h1:cWPaGQEPrBb5/AsnsZesgZZ9yb1OQ+GOISoDNXVBh4M=
 github.com/rogpeppe/go-internal v1.11.0/go.mod h1:ddIwULY96R17DhadqLgMfk9H9tvdUzkipdSkR5nkCZA=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
-github.com/sethvargo/go-envconfig v1.2.0 h1:q3XkOZWkC+G1sMLCrw9oPGTjYexygLOXDmGUit1ti8Q=
-github.com/sethvargo/go-envconfig v1.2.0/go.mod h1:JLd0KFWQYzyENqnEPWWZ49i4vzZo/6nRidxI8YvGiHw=
+github.com/sethvargo/go-envconfig v1.3.0 h1:gJs+Fuv8+f05omTpwWIu6KmuseFAXKrIaOZSh8RMt0U=
+github.com/sethvargo/go-envconfig v1.3.0/go.mod h1:JLd0KFWQYzyENqnEPWWZ49i4vzZo/6nRidxI8YvGiHw=
 github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE=
 github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
 github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
--- a/locale/zh_TW/LC_MESSAGES/django.mo
+++ b/locale/zh_TW/LC_MESSAGES/django.mo
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,546 @@
 {
    "name": "@goauthentik/authentik",
-    "version": "2025.2.1",
+    "version": "2025.4.0",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "@goauthentik/authentik",
-            "version": "2025.2.1"
+            "version": "2025.4.0",
+            "devDependencies": {
+                "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+                "prettier": "^3.3.3",
+                "prettier-plugin-organize-imports": "^4.1.0",
+                "prettier-plugin-packagejson": "^2.5.10",
+                "typescript": "^5.6.2"
+            }
+        },
+        "node_modules/@babel/code-frame": {
+            "version": "7.26.2",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+            "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.25.9",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/generator": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz",
+            "integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.27.0",
+                "@babel/types": "^7.27.0",
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.25",
+                "jsesc": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-string-parser": {
+            "version": "7.25.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+            "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-identifier": {
+            "version": "7.25.9",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+            "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/parser": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+            "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.27.0"
+            },
+            "bin": {
+                "parser": "bin/babel-parser.js"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@babel/template": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
+            "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.26.2",
+                "@babel/parser": "^7.27.0",
+                "@babel/types": "^7.27.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/traverse": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
+            "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.26.2",
+                "@babel/generator": "^7.27.0",
+                "@babel/parser": "^7.27.0",
+                "@babel/template": "^7.27.0",
+                "@babel/types": "^7.27.0",
+                "debug": "^4.3.1",
+                "globals": "^11.1.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/types": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+            "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.25.9",
+                "@babel/helper-validator-identifier": "^7.25.9"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.8",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+            "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/set-array": "^1.2.1",
+                "@jridgewell/sourcemap-codec": "^1.4.10",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/set-array": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+            "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/sourcemap-codec": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+            "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.25",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+            "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "node_modules/@pkgr/core": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.2.tgz",
+            "integrity": "sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/unts"
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.2.tgz",
+            "integrity": "sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@babel/generator": "^7.26.5",
+                "@babel/parser": "^7.26.7",
+                "@babel/traverse": "^7.26.7",
+                "@babel/types": "^7.26.7",
+                "javascript-natural-sort": "^0.7.1",
+                "lodash": "^4.17.21"
+            },
+            "engines": {
+                "node": ">18.12"
+            },
+            "peerDependencies": {
+                "@vue/compiler-sfc": "3.x",
+                "prettier": "2.x - 3.x",
+                "prettier-plugin-svelte": "3.x",
+                "svelte": "4.x || 5.x"
+            },
+            "peerDependenciesMeta": {
+                "@vue/compiler-sfc": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                },
+                "svelte": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/debug": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+            "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/detect-indent": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-7.0.1.tgz",
+            "integrity": "sha512-Mc7QhQ8s+cLrnUfU/Ji94vG/r8M26m8f++vyres4ZoojaRDpZ1eSIh/EpzLNwlWuvzSZ3UbDFspjFvTDXe6e/g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.20"
+            }
+        },
+        "node_modules/detect-newline": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-4.0.1.tgz",
+            "integrity": "sha512-qE3Veg1YXzGHQhlA6jzebZN2qVf6NX+A7m7qlhCGG30dJixrAQhYOsJjsnBjJkCSmuOPpCk30145fr8FV0bzog==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/fdir": {
+            "version": "6.4.4",
+            "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
+            "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "picomatch": "^3 || ^4"
+            },
+            "peerDependenciesMeta": {
+                "picomatch": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/get-stdin": {
+            "version": "9.0.0",
+            "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
+            "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/git-hooks-list": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/git-hooks-list/-/git-hooks-list-3.2.0.tgz",
+            "integrity": "sha512-ZHG9a1gEhUMX1TvGrLdyWb9kDopCBbTnI8z4JgRMYxsijWipgjSEYoPWqBuIB0DnRnvqlQSEeVmzpeuPm7NdFQ==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/fisker/git-hooks-list?sponsor=1"
+            }
+        },
+        "node_modules/globals": {
+            "version": "11.12.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+            "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/is-plain-obj": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+            "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/javascript-natural-sort": {
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+            "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jsesc": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+            "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jsesc": "bin/jsesc"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/picomatch": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+            "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/prettier": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+            "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-plugin-organize-imports": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-4.1.0.tgz",
+            "integrity": "sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "prettier": ">=2.0",
+                "typescript": ">=2.9",
+                "vue-tsc": "^2.1.0"
+            },
+            "peerDependenciesMeta": {
+                "vue-tsc": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/prettier-plugin-packagejson": {
+            "version": "2.5.10",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-packagejson/-/prettier-plugin-packagejson-2.5.10.tgz",
+            "integrity": "sha512-LUxATI5YsImIVSaaLJlJ3aE6wTD+nvots18U3GuQMJpUyClChaZlQrqx3dBnbhF20OnKWZyx8EgyZypQtBDtgQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "sort-package-json": "2.15.1",
+                "synckit": "0.9.2"
+            },
+            "peerDependencies": {
+                "prettier": ">= 1.16.0"
+            },
+            "peerDependenciesMeta": {
+                "prettier": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/semver": {
+            "version": "7.7.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+            "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/sort-object-keys": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/sort-object-keys/-/sort-object-keys-1.1.3.tgz",
+            "integrity": "sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/sort-package-json": {
+            "version": "2.15.1",
+            "resolved": "https://registry.npmjs.org/sort-package-json/-/sort-package-json-2.15.1.tgz",
+            "integrity": "sha512-9x9+o8krTT2saA9liI4BljNjwAbvUnWf11Wq+i/iZt8nl2UGYnf3TH5uBydE7VALmP7AGwlfszuEeL8BDyb0YA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "detect-indent": "^7.0.1",
+                "detect-newline": "^4.0.0",
+                "get-stdin": "^9.0.0",
+                "git-hooks-list": "^3.0.0",
+                "is-plain-obj": "^4.1.0",
+                "semver": "^7.6.0",
+                "sort-object-keys": "^1.1.3",
+                "tinyglobby": "^0.2.9"
+            },
+            "bin": {
+                "sort-package-json": "cli.js"
+            }
+        },
+        "node_modules/synckit": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
+            "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@pkgr/core": "^0.1.0",
+                "tslib": "^2.6.2"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/unts"
+            }
+        },
+        "node_modules/tinyglobby": {
+            "version": "0.2.13",
+            "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
+            "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fdir": "^6.4.4",
+                "picomatch": "^4.0.2"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/SuperchupuDev"
+            }
+        },
+        "node_modules/tslib": {
+            "version": "2.8.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+            "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+            "dev": true,
+            "license": "0BSD"
+        },
+        "node_modules/typescript": {
+            "version": "5.8.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+            "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
        }
    }
 }
--- a/package.json
+++ b/package.json
@ -1,5 +1,15 @@
 {
    "name": "@goauthentik/authentik",
    "version": "2025.4.0",
-    "private": true
+    "private": true,
+    "type": "module",
+    "devDependencies": {
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "prettier": "^3.3.3",
+        "prettier-plugin-organize-imports": "^4.1.0",
+        "prettier-plugin-packagejson": "^2.5.10",
+        "typescript": "^5.6.2"
+    },
+    "workspaces": [],
+    "prettier": "./packages/prettier-config/index.js"
 }
--- a/packages/docusaurus-config/package-lock.json
+++ b/packages/docusaurus-config/package-lock.json
@ -1,12 +1,12 @@
 {
    "name": "@goauthentik/docusaurus-config",
-    "version": "1.0.5",
+    "version": "1.0.6",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "@goauthentik/docusaurus-config",
-            "version": "1.0.5",
+            "version": "1.0.6",
            "license": "MIT",
            "dependencies": {
                "deepmerge-ts": "^7.1.5",
--- a/packages/docusaurus-config/package.json
+++ b/packages/docusaurus-config/package.json
@ -1,6 +1,6 @@
 {
    "name": "@goauthentik/docusaurus-config",
-    "version": "1.0.5",
+    "version": "1.0.6",
    "description": "authentik's Docusaurus config",
    "license": "MIT",
    "scripts": {
--- a/packages/monorepo/package.json
+++ b/packages/monorepo/package.json
@ -1,19 +0,0 @@
-{
-    "name": "@goauthentik/monorepo",
-    "version": "1.0.0",
-    "description": "Utilities for the authentik monorepo.",
-    "private": true,
-    "license": "MIT",
-    "type": "module",
-    "exports": {
-        "./package.json": "./package.json",
-        ".": {
-            "import": "./index.js",
-            "types": "./out/index.d.ts"
-        }
-    },
-    "types": "./out/index.d.ts",
-    "engines": {
-        "node": ">=20.11"
-    }
-}
--- a/packages/monorepo/paths.js
+++ b/packages/monorepo/paths.js
@ -1,30 +0,0 @@
-import { createRequire } from "node:module";
-import { dirname, join, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-/**
- * @typedef {'~authentik'} MonoRepoRoot
- */
-
-/**
- * The root of the authentik monorepo.
- */
-export const MonoRepoRoot = /** @type {MonoRepoRoot} */ (resolve(__dirname, "..", ".."));
-
-const require = createRequire(import.meta.url);
-
-/**
- * Resolve a package name to its location in the monorepo to the single node_modules directory.
- * @param {string} packageName
- * @returns {string} The resolved path to the package.
- * @throws {Error} If the package cannot be resolved.
- */
-export function resolvePackage(packageName) {
-    const packageJSONPath = require.resolve(join(packageName, "package.json"), {
-        paths: [MonoRepoRoot],
-    });
-
-    return dirname(packageJSONPath);
-}
--- a/packages/monorepo/scripts.js
+++ b/packages/monorepo/scripts.js
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,28 @@
+// TypeScript Project Configuration
+{
+    "extends": "./packages/tsconfig/tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "watchOptions": {
+        "excludeDirectories": [
+            "**/.git", // Git
+            "**/.yarn", // Yarn
+            "**/.vscode", // VS Code
+            "**/.vscode-test-web", // VS Code Web Test
+            "**/dist", // Distributed build files
+            "**/out", // Output build files
+            "**/.drafts", // Drafts
+            "**/.github", // GitHub
+            "**/node_modules" // Node modules
+        ]
+    },
+
+    // The root project has no sources of its own. By setting `files` to an empty
+    // list, TS won't automatically include all sources below root (the default).
+    "files": [],
+    "references": [
+        // Note that references are in the order we want them to be built.
+        // TODO: Left blank until TypeScript workspaces are complete.
+    ]
+}
--- a/web/.prettierignore
+++ b/web/.prettierignore
@ -2,15 +2,11 @@
 node_modules
 # don't lint build output (make sure it's set to your correct build folder name)
 dist
+out
 # don't lint nyc coverage output
 coverage
 # Import order matters
-poly.ts
 src/locale-codes.ts
 src/locales/
 storybook-static/
-# Prettier breaks the tsconfig file
-tsconfig.json
 .storybook/css-import-maps*
-package.json
-packages/**/package.json
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -1,6 +1,44 @@
 {
    "name": "@goauthentik/web",
    "version": "0.0.0",
+    "license": "MIT",
+    "private": true,
+    "scripts": {
+        "build": "wireit",
+        "build-locales": "wireit",
+        "build-locales:build": "wireit",
+        "build-proxy": "wireit",
+        "build:sfe": "wireit",
+        "esbuild:watch": "node scripts/build-web.mjs --watch",
+        "extract-locales": "wireit",
+        "format": "wireit",
+        "lint": "wireit",
+        "lint:imports": "wireit",
+        "lint:lockfile": "wireit",
+        "lint:nightmare": "wireit",
+        "lint:precommit": "wireit",
+        "lint:types": "wireit",
+        "lit-analyse": "wireit",
+        "postinstall": "bash scripts/patch-spotlight.sh",
+        "precommit": "wireit",
+        "prettier": "wireit",
+        "prettier-check": "wireit",
+        "pseudolocalize": "wireit",
+        "storybook": "storybook dev -p 6006",
+        "storybook:build": "wireit",
+        "test": "wireit",
+        "test:e2e": "wireit",
+        "test:e2e:watch": "wireit",
+        "test:watch": "wireit",
+        "tsc": "wireit",
+        "watch": "run-s build-locales esbuild:watch"
+    },
+    "type": "module",
+    "exports": {
+        "./package.json": "./package.json",
+        "./paths": "./paths.js",
+        "./scripts/*": "./scripts/*.mjs"
+    },
    "dependencies": {
        "@codemirror/lang-css": "^6.3.1",
        "@codemirror/lang-html": "^6.4.9",
@ -13,7 +51,6 @@
        "@formatjs/intl-listformat": "^7.5.7",
        "@fortawesome/fontawesome-free": "^6.6.0",
        "@goauthentik/api": "^2025.4.0-1746018955",
-        "@lit-labs/ssr": "3.2.2",
        "@lit/context": "^1.1.2",
        "@lit/localize": "^0.12.2",
        "@lit/reactive-element": "^2.0.4",
@ -54,6 +91,7 @@
        "remark-gfm": "^4.0.1",
        "remark-mdx-frontmatter": "^5.0.0",
        "style-mod": "^4.1.2",
+        "trusted-types": "^2.0.0",
        "ts-pattern": "^5.4.0",
        "unist-util-visit": "^5.0.0",
        "webcomponent-qr-code": "^1.2.0",
@ -62,6 +100,7 @@
    "devDependencies": {
        "@eslint/js": "^9.11.1",
        "@goauthentik/esbuild-plugin-live-reload": "^1.0.4",
+        "@goauthentik/monorepo": "^1.0.0",
        "@goauthentik/prettier-config": "^1.0.4",
        "@goauthentik/tsconfig": "^1.0.4",
        "@hcaptcha/types": "^1.0.4",
@ -93,13 +132,13 @@
        "@wdio/spec-reporter": "^9.1.2",
        "chromedriver": "^131.0.1",
        "esbuild": "^0.25.0",
+        "esbuild-plugin-copy": "^2.1.1",
        "esbuild-plugin-polyfill-node": "^0.3.0",
        "esbuild-plugins-node-modules-polyfill": "^1.7.0",
        "eslint": "^9.11.1",
        "eslint-plugin-lit": "^1.15.0",
        "eslint-plugin-wc": "^2.1.1",
        "github-slugger": "^2.0.0",
-        "glob": "^11.0.0",
        "globals": "^15.10.0",
        "knip": "^5.30.6",
        "lit-analyzer": "^2.0.3",
@ -110,7 +149,6 @@
        "rollup-plugin-postcss-lit": "^2.1.0",
        "storybook": "^8.3.4",
        "storybook-addon-mock": "^5.0.0",
-        "syncpack": "^13.0.0",
        "turnstile-types": "^1.2.3",
        "typescript": "^5.6.2",
        "typescript-eslint": "^8.8.0",
@ -118,10 +156,6 @@
        "vite-tsconfig-paths": "^5.0.1",
        "wireit": "^0.14.9"
    },
-    "engines": {
-        "node": ">=20"
-    },
-    "license": "MIT",
    "optionalDependencies": {
        "@esbuild/darwin-arm64": "^0.24.0",
        "@esbuild/linux-amd64": "^0.18.11",
@ -130,48 +164,6 @@
        "@rollup/rollup-linux-arm64-gnu": "4.23.0",
        "@rollup/rollup-linux-x64-gnu": "4.23.0"
    },
-    "overrides": {
-        "rapidoc": {
-            "@apitools/openapi-parser@": "0.0.37"
-        },
-        "chromedriver": {
-            "axios": "^1.8.4"
-        }
-    },
-    "prettier": "@goauthentik/prettier-config",
-    "private": true,
-    "scripts": {
-        "build": "wireit",
-        "build-locales": "wireit",
-        "build-locales:build": "wireit",
-        "build-proxy": "wireit",
-        "build:sfe": "wireit",
-        "esbuild:watch": "node scripts/build-web.mjs --watch",
-        "extract-locales": "wireit",
-        "format": "wireit",
-        "lint": "wireit",
-        "lint:imports": "wireit",
-        "lint:lockfile": "wireit",
-        "lint:nightmare": "wireit",
-        "lint:package": "wireit",
-        "lint:precommit": "wireit",
-        "lint:types": "wireit",
-        "lit-analyse": "wireit",
-        "postinstall": "bash scripts/patch-spotlight.sh",
-        "precommit": "wireit",
-        "prettier": "wireit",
-        "prettier-check": "wireit",
-        "pseudolocalize": "wireit",
-        "storybook": "storybook dev -p 6006",
-        "storybook:build": "wireit",
-        "test": "wireit",
-        "test:e2e": "wireit",
-        "test:e2e:watch": "wireit",
-        "test:watch": "wireit",
-        "tsc": "wireit",
-        "watch": "run-s build-locales esbuild:watch"
-    },
-    "type": "module",
    "wireit": {
        "build": {
            "#comment": [
@ -248,10 +240,7 @@
            "command": "lit-localize extract"
        },
        "format": {
-            "command": "prettier --write .",
-            "dependencies": [
-                "lint:package"
-            ]
+            "command": "prettier --write ."
        },
        "format:packages": {
            "dependencies": [
@ -290,9 +279,6 @@
                "./packages/sfe:lint:lockfile"
            ]
        },
-        "lint:package": {
-            "command": "syncpack format -i '    '"
-        },
        "lint:nightmare": {
            "command": "${NODE_RUNNER} ./scripts/eslint.mjs --nightmare",
            "env": {
@ -323,7 +309,6 @@
                "lint:types",
                "lint:components",
                "lint:spelling",
-                "lint:package",
                "lint:lockfile",
                "lint:lockfiles",
                "lint:precommit",
@ -388,8 +373,20 @@
            ]
        }
    },
+    "engines": {
+        "node": ">=20"
+    },
    "workspaces": [
        ".",
        "./packages/*"
-    ]
+    ],
+    "prettier": "@goauthentik/prettier-config",
+    "overrides": {
+        "rapidoc": {
+            "@apitools/openapi-parser@": "0.0.37"
+        },
+        "chromedriver": {
+            "axios": "^1.8.4"
+        }
+    }
 }
--- a/web/packages/esbuild-plugin-live-reload/package.json
+++ b/web/packages/esbuild-plugin-live-reload/package.json
@ -1,22 +1,11 @@
 {
    "name": "@goauthentik/esbuild-plugin-live-reload",
-    "description": "ESBuild plugin to watch for file changes and trigger client-side reloads.",
    "version": "1.0.4",
-    "dependencies": {
-        "find-free-ports": "^3.1.1"
-    },
-    "devDependencies": {
-        "@goauthentik/prettier-config": "^1.0.4",
-        "@goauthentik/tsconfig": "^1.0.4",
-        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-        "@types/node": "^22.14.1",
-        "esbuild": "^0.25.0",
-        "prettier": "^3.3.3",
-        "typescript": "^5.6.2"
-    },
-    "engines": {
-        "node": ">=20.11"
-    },
+    "description": "ESBuild plugin to watch for file changes and trigger client-side reloads.",
+    "license": "MIT",
+    "private": true,
+    "main": "index.js",
+    "type": "module",
    "exports": {
        "./package.json": "./package.json",
        ".": {
@ -32,22 +21,33 @@
            "import": "./plugin/index.js"
        }
    },
+    "dependencies": {
+        "find-free-ports": "^3.1.1"
+    },
+    "devDependencies": {
+        "@goauthentik/prettier-config": "^1.0.4",
+        "@goauthentik/tsconfig": "^1.0.4",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "@types/node": "^22.14.1",
+        "esbuild": "^0.25.0",
+        "prettier": "^3.3.3",
+        "typescript": "^5.6.2"
+    },
+    "peerDependencies": {
+        "esbuild": "^0.25.0"
+    },
+    "engines": {
+        "node": ">=20.11"
+    },
+    "types": "./out/index.d.ts",
    "files": [
        "./index.js",
        "client/**/*",
        "plugin/**/*",
        "out/**/*"
    ],
-    "license": "MIT",
-    "main": "index.js",
-    "peerDependencies": {
-        "esbuild": "^0.25.0"
-    },
    "prettier": "@goauthentik/prettier-config",
-    "private": true,
    "publishConfig": {
        "access": "public"
-    },
-    "type": "module",
-    "types": "./out/index.d.ts"
+    }
 }
--- a/web/packages/monorepo/LICENSE.txt
+++ b/web/packages/monorepo/LICENSE.txt
--- a/web/packages/monorepo/README.md
+++ b/web/packages/monorepo/README.md
@ -2,4 +2,3 @@

 This package contains utility scripts common to all TypeScript and JavaScript packages in the
 `@goauthentik` monorepo.
-
--- a/web/packages/monorepo/build.js
+++ b/web/packages/monorepo/build.js
@ -0,0 +1,42 @@
+/**
+ * @file Utility functions for building and copying files.
+ */
+
+/**
+ * A source environment variable, which can be a string, number, boolean, null, or undefined.
+ * @typedef {string | number | boolean | null | undefined} EnvironmentVariable
+ */
+
+/**
+ * A type helper for serializing environment variables.
+ *
+ * @template {EnvironmentVariable} T
+ * @typedef {T extends string ? `"${T}"` : T} JSONify
+ */
+
+/**
+ * Given an object of environment variables, returns a new object with the same keys and values, but
+ * with the values serialized as strings.
+ *
+ * @template {Record<string, EnvironmentVariable>} EnvRecord
+ * @template {string} [Prefix='process.env.']
+ *
+ * @param {EnvRecord} input
+ * @param {Prefix} [prefix='process.env.']
+ *
+ * @returns {{[K in keyof EnvRecord as `${Prefix}${K}`]: JSONify<EnvRecord[K]>}}
+ */
+export function serializeEnvironmentVars(input, prefix = /** @type {Prefix} */ ("process.env.")) {
+    /**
+     * @type {Record<string, string>}
+     */
+    const env = {};
+
+    for (const [key, value] of Object.entries(input)) {
+        const namespaceKey = prefix + key;
+
+        env[namespaceKey] = JSON.stringify(value || "");
+    }
+
+    return /** @type {any} */ (env);
+}
--- a/web/packages/monorepo/constants.js
+++ b/web/packages/monorepo/constants.js
@ -1,8 +1,9 @@
 /**
 * @file Constants for JavaScript and TypeScript files.
- *
 */

+/// <reference types="../../types/global.js" />
+
 /**
 * The current Node.js environment, defaulting to "development" when not set.
 *
@ -12,6 +13,4 @@
 * ensure that module tree-shaking works correctly.
 *
 */
-export const NodeEnvironment = /** @type {'development' | 'production'} */ (
-    process.env.NODE_ENV || "development"
-);
+export const NodeEnvironment = process.env.NODE_ENV || "development";
--- a/web/packages/monorepo/index.js
+++ b/web/packages/monorepo/index.js
@ -1,4 +1,7 @@
+/// <reference types="./types/global.js" />
+
 export * from "./paths.js";
 export * from "./constants.js";
+export * from "./build.js";
 export * from "./version.js";
 export * from "./scripting.js";
--- a/web/packages/monorepo/package.json
+++ b/web/packages/monorepo/package.json
@ -0,0 +1,28 @@
+{
+    "name": "@goauthentik/monorepo",
+    "version": "1.0.0",
+    "description": "Utilities for the authentik monorepo.",
+    "license": "MIT",
+    "private": true,
+    "main": "index.js",
+    "type": "module",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./out/index.d.ts",
+            "import": "./index.js"
+        }
+    },
+    "devDependencies": {
+        "@goauthentik/prettier-config": "^1.0.4",
+        "@goauthentik/tsconfig": "^1.0.4",
+        "@types/node": "^22.14.1",
+        "prettier": "^3.3.3",
+        "typescript": "^5.6.2"
+    },
+    "engines": {
+        "node": ">=20.11"
+    },
+    "types": "./out/index.d.ts",
+    "prettier": "@goauthentik/prettier-config"
+}
--- a/web/packages/monorepo/paths.js
+++ b/web/packages/monorepo/paths.js
@ -0,0 +1,45 @@
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const relativeDirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * @typedef {'~authentik'} MonoRepoRoot
+ */
+
+/**
+ * The root of the authentik monorepo.
+ */
+// TODO: Revise when this package is moved to the monorepo's `packages/monorepo` directory.
+export const MonoRepoRoot = /** @type {MonoRepoRoot} */ (
+    resolve(relativeDirname, "..", "..", "..")
+);
+
+const require = createRequire(import.meta.url);
+
+/**
+ * Resolve a package name to its location in the monorepo to the single node_modules directory.
+ * @param {string} packageName
+ *
+ * @returns {string} The resolved path to the package.
+ * @throws {Error} If the package cannot be resolved.
+ */
+export function resolvePackage(packageName) {
+    const relativePackageJSONPath = join(packageName, "package.json");
+
+    /** @type {string} */
+    let absolutePackageJSONPath;
+
+    try {
+        absolutePackageJSONPath = require.resolve(relativePackageJSONPath);
+    } catch (cause) {
+        const error = new Error(`Failed to resolve package "${packageName}"`);
+
+        error.cause = cause;
+
+        throw error;
+    }
+
+    return dirname(absolutePackageJSONPath);
+}
--- a/web/packages/monorepo/scripting.js
+++ b/web/packages/monorepo/scripting.js
--- a/web/packages/monorepo/tsconfig.json
+++ b/web/packages/monorepo/tsconfig.json
--- a/web/packages/monorepo/types/global.d.ts
+++ b/web/packages/monorepo/types/global.d.ts
@ -0,0 +1,15 @@
+declare module "process" {
+    global {
+        namespace NodeJS {
+            interface ProcessEnv {
+                /**
+                 * An environment variable used to determine
+                 * whether Node.js is running in production mode.
+                 *
+                 * @see {@link https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production | The difference between development and production}
+                 */
+                NODE_ENV?: "production" | "development";
+            }
+        }
+    }
+}
--- a/web/packages/monorepo/version.js
+++ b/web/packages/monorepo/version.js
@ -1,6 +1,6 @@
 import { execSync } from "node:child_process";

-import PackageJSON from "../../package.json" with { type: "json" };
+import PackageJSON from "../../../package.json" with { type: "json" };
 import { MonoRepoRoot } from "./paths.js";

 /**
--- a/web/paths.js
+++ b/web/paths.js
@ -0,0 +1,78 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const relativeDirname = dirname(fileURLToPath(import.meta.url));
+
+//#region Base paths
+
+/**
+ * @typedef {'@goauthentik/web'} WebPackageIdentifier
+ */
+
+/**
+ * The root of the web package.
+ */
+export const PackageRoot = /** @type {WebPackageIdentifier} */ (resolve(relativeDirname));
+
+/**
+ * The name of the distribution directory.
+ */
+export const DistDirectoryName = "dist";
+
+/**
+ * Path to the web package's distribution directory.
+ *
+ * This is where the built files are located after running the build process.
+ */
+export const DistDirectory = /** @type {`${WebPackageIdentifier}/${DistDirectoryName}`} */ (
+    resolve(relativeDirname, DistDirectoryName)
+);
+
+//#endregion
+
+//#region Entry points
+
+/**
+ * @typedef {{ in: string, out: string }} EntryPointTarget
+ *
+ * ESBuild entrypoint target.
+ * Matches the type defined in the ESBuild context.
+ */
+
+/**
+ * Entry points available for building.
+ *
+ * @satisfies {Record<string, EntryPointTarget>}
+ */
+export const EntryPoint = /** @type {const} */ ({
+    Admin: {
+        in: resolve(PackageRoot, "src", "admin", "AdminInterface", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "admin", "AdminInterface"),
+    },
+    User: {
+        in: resolve(PackageRoot, "src", "user", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "user", "UserInterface"),
+    },
+    Flow: {
+        in: resolve(PackageRoot, "src", "flow", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "flow", "FlowInterface"),
+    },
+    Standalone: {
+        in: resolve(PackageRoot, "src", "standalone", "api-browser/index.entrypoint.ts"),
+        out: resolve(DistDirectory, "standalone", "api-browser", "index"),
+    },
+    StandaloneLoading: {
+        in: resolve(PackageRoot, "src", "standalone", "loading/index.entrypoint.ts"),
+        out: resolve(DistDirectory, "standalone", "loading", "index"),
+    },
+    RAC: {
+        in: resolve(PackageRoot, "src", "rac", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "rac", "index"),
+    },
+    Polyfill: {
+        in: resolve(PackageRoot, "src", "polyfill", "index.entrypoint.ts"),
+        out: resolve(DistDirectory, "poly"),
+    },
+});
+
+//#endregion
--- a/web/scripts/build-web.mjs
+++ b/web/scripts/build-web.mjs
@ -4,138 +4,86 @@
 * @import { BuildOptions } from "esbuild";
 */
 import { liveReloadPlugin } from "@goauthentik/esbuild-plugin-live-reload/plugin";
-import { execFileSync } from "child_process";
+import {
+    MonoRepoRoot,
+    NodeEnvironment,
+    readBuildIdentifier,
+    resolvePackage,
+    serializeEnvironmentVars,
+} from "@goauthentik/monorepo";
+import { DistDirectory, DistDirectoryName, EntryPoint, PackageRoot } from "@goauthentik/web/paths";
 import { deepmerge } from "deepmerge-ts";
 import esbuild from "esbuild";
+import copy from "esbuild-plugin-copy";
 import { polyfillNode } from "esbuild-plugin-polyfill-node";
-import { copyFileSync, mkdirSync, readFileSync, statSync } from "fs";
-import { globSync } from "glob";
-import * as path from "path";
-import { cwd } from "process";
-import process from "process";
-import { fileURLToPath } from "url";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";

 import { mdxPlugin } from "./esbuild/build-mdx-plugin.mjs";

-const __dirname = fileURLToPath(new URL(".", import.meta.url));
-let authentikProjectRoot = path.join(__dirname, "..", "..");
+const logPrefix = "[Build]";

-try {
-    // Use the package.json file in the root folder, as it has the current version information.
-    authentikProjectRoot = execFileSync("git", ["rev-parse", "--show-toplevel"], {
-        encoding: "utf8",
-    }).replace("\n", "");
-} catch (_error) {
-    // We probably don't have a .git folder, which could happen in container builds.
-}
+const definitions = serializeEnvironmentVars({
+    NODE_ENV: NodeEnvironment,
+    CWD: process.cwd(),
+    AK_API_BASE_PATH: process.env.AK_API_BASE_PATH,
+});

-const packageJSONPath = path.join(authentikProjectRoot, "./package.json");
-const rootPackage = JSON.parse(readFileSync(packageJSONPath, "utf8"));
-
-const NODE_ENV = process.env.NODE_ENV || "development";
-const AK_API_BASE_PATH = process.env.AK_API_BASE_PATH || "";
-
-const environmentVars = new Map([
-    ["NODE_ENV", NODE_ENV],
-    ["CWD", cwd()],
-    ["AK_API_BASE_PATH", AK_API_BASE_PATH],
-]);
-
-const definitions = Object.fromEntries(
-    Array.from(environmentVars).map(([key, value]) => {
-        return [`process.env.${key}`, JSON.stringify(value)];
-    }),
-);
+const patternflyPath = resolvePackage("@patternfly/patternfly");

 /**
- * All is magic is just to make sure the assets are copied into the right places. This is a very
- * stripped down version of what the rollup-copy-plugin does, without any of the features we don't
- * use, and using globSync instead of globby since we already had globSync lying around thanks to
- * Typescript. If there's a third argument in an array entry, it's used to replace the internal path
- * before concatenating it all together as the destination target.
- * @type {Array<[string, string, string?]>}
- */
-const assetsFileMappings = [
-    ["node_modules/@patternfly/patternfly/patternfly.min.css", "."],
-    ["node_modules/@patternfly/patternfly/assets/**", ".", "node_modules/@patternfly/patternfly/"],
-    ["src/common/styles/**", "."],
-    ["src/assets/images/**", "./assets/images"],
-    ["./icons/*", "./assets/icons"],
-];
-
-/**
- * @param {string} filePath
- */
-const isFile = (filePath) => statSync(filePath).isFile();
-
-/**
- * @param {string} src Source file
- * @param {string} dest Destination folder
- * @param {string} [strip] Path to strip from the source file
- */
-function nameCopyTarget(src, dest, strip) {
-    const target = path.join(dest, strip ? src.replace(strip, "") : path.parse(src).base);
-    return [src, target];
-}
-
-for (const [source, rawdest, strip] of assetsFileMappings) {
-    const matchedPaths = globSync(source);
-    const dest = path.join("dist", rawdest);
-
-    const copyTargets = matchedPaths.map((path) => nameCopyTarget(path, dest, strip));
-
-    for (const [src, dest] of copyTargets) {
-        if (isFile(src)) {
-            mkdirSync(path.dirname(dest), { recursive: true });
-            copyFileSync(src, dest);
-        }
-    }
-}
-
-/**
- * @typedef {[source: string, destination: string]} EntryPoint
- */
-
-/**
- * This starts the definitions used for esbuild: Our targets, our arguments, the function for
- * running a build, and three options for building: watching, building, and building the proxy.
- * Ordered by largest to smallest interface to build even faster
- *
- * @type {EntryPoint[]}
- */
-const entryPoints = [
-    ["admin/AdminInterface/AdminInterface.ts", "admin"],
-    ["user/UserInterface.ts", "user"],
-    ["flow/FlowInterface.ts", "flow"],
-    ["standalone/api-browser/index.ts", "standalone/api-browser"],
-    ["rac/index.ts", "rac"],
-    ["standalone/loading/index.ts", "standalone/loading"],
-    ["polyfill/poly.ts", "."],
-];
-
-/**
- * @type {import("esbuild").BuildOptions}
+ * @type {Readonly<BuildOptions>}
 */
 const BASE_ESBUILD_OPTIONS = {
+    entryNames: `[dir]/[name]-${readBuildIdentifier()}`,
+    chunkNames: "[dir]/chunks/[name]-[hash]",
+    assetNames: "assets/[dir]/[name]-[hash]",
+    publicPath: path.join("/static", DistDirectoryName),
+    outdir: DistDirectory,
    bundle: true,
    write: true,
    sourcemap: true,
-    minify: NODE_ENV === "production",
+    minify: NodeEnvironment === "production",
+    legalComments: "external",
    splitting: true,
    treeShaking: true,
    external: ["*.woff", "*.woff2"],
-    tsconfig: path.resolve(__dirname, "..", "tsconfig.build.json"),
+    tsconfig: path.resolve(PackageRoot, "tsconfig.build.json"),
    loader: {
        ".css": "text",
    },
    plugins: [
+        copy({
+            assets: [
+                {
+                    from: path.join(patternflyPath, "patternfly.min.css"),
+                    to: ".",
+                },
+                {
+                    from: path.join(patternflyPath, "assets", "**"),
+                    to: "./assets",
+                },
+                {
+                    from: path.resolve(PackageRoot, "src", "common", "styles", "**"),
+                    to: ".",
+                },
+                {
+                    from: path.resolve(PackageRoot, "src", "assets", "images", "**"),
+                    to: "./assets/images",
+                },
+                {
+                    from: path.resolve(PackageRoot, "icons", "*"),
+                    to: "./assets/icons",
+                },
+            ],
+        }),
        polyfillNode({
            polyfills: {
                path: true,
            },
        }),
        mdxPlugin({
-            root: authentikProjectRoot,
+            root: MonoRepoRoot,
        }),
    ],
    define: definitions,
@ -151,69 +99,43 @@ const BASE_ESBUILD_OPTIONS = {
    },
 };

-/**
- * Creates a version ID for the build.
- * @returns {string}
- */
-function composeVersionID() {
-    const { version } = rootPackage;
-    const buildHash = process.env.GIT_BUILD_HASH;
+async function cleanDistDirectory() {
+    const timerLabel = `${logPrefix} ♻️ Cleaning previous builds...`;

-    if (buildHash) {
-        return `${version}+${buildHash}`;
-    }
+    console.time(timerLabel);

-    return version;
+    await fs.rm(DistDirectory, {
+        recursive: true,
+        force: true,
+    });
+
+    await fs.mkdir(DistDirectory, {
+        recursive: true,
+    });
+
+    console.timeEnd(timerLabel);
 }

 /**
- * Build a single entry point.
+ * Creates an ESBuild options, extending the base options with the given overrides.
 *
- * @param {EntryPoint} buildTarget
- * @param {Partial<esbuild.BuildOptions>} [overrides]
- * @throws {Error} on build failure
+ * @param {BuildOptions} overrides
+ * @returns {BuildOptions}
 */
-function createEntryPointOptions([source, dest], overrides = {}) {
-    const outdir = path.join(__dirname, "..", "dist", dest);
-
+export function createESBuildOptions(overrides) {
    /**
-     * @type {esbuild.BuildOptions}
+     * @type {BuildOptions}
     */
+    const mergedOptions = deepmerge(BASE_ESBUILD_OPTIONS, overrides);

-    const entryPointConfig = {
-        entryPoints: [`./src/${source}`],
-        entryNames: `[dir]/[name]-${composeVersionID()}`,
-        publicPath: path.join("/static", "dist", dest),
-        outdir,
-    };
-
-    /**
-     * @type {esbuild.BuildOptions}
-     */
-    const mergedConfig = deepmerge(BASE_ESBUILD_OPTIONS, entryPointConfig, overrides);
-
-    return mergedConfig;
-}
-
-/**
- * Build all entry points in parallel.
- *
- * @param {EntryPoint[]} entryPoints
- * @returns {Promise<esbuild.BuildResult[]>}
- */
-async function buildParallel(entryPoints) {
-    return Promise.all(
-        entryPoints.map((entryPoint) => {
-            return esbuild.build(createEntryPointOptions(entryPoint));
-        }),
-    );
+    return mergedOptions;
 }

 function doHelp() {
    console.log(`Build the authentik UI

        options:
-            -w, --watch: Build all ${entryPoints.length} interfaces
+            -w, --watch: Build all interfaces
            -p, --proxy: Build only the polyfills and the loading application
            -h, --help: This help message
 `);
@ -222,27 +144,29 @@ function doHelp() {
 }

 async function doWatch() {
-    console.log("Watching all entry points...");
+    console.group(`${logPrefix} 🤖 Watching entry points`);

-    const buildContexts = await Promise.all(
-        entryPoints.map((entryPoint) => {
-            return esbuild.context(
-                createEntryPointOptions(entryPoint, {
-                    define: definitions,
-                    plugins: [
-                        liveReloadPlugin({
-                            logPrefix: `Build Observer (${entryPoint[1]})`,
-                            relativeRoot: path.join(__dirname, ".."),
-                        }),
-                    ],
-                }),
-            );
-        }),
-    );
+    const entryPoints = Object.entries(EntryPoint).map(([entrypointID, target]) => {
+        console.log(entrypointID);

-    await Promise.all(buildContexts.map((context) => context.rebuild()));
+        return target;
+    });

-    await Promise.allSettled(buildContexts.map((context) => context.watch()));
+    console.groupEnd();
+
+    const buildOptions = createESBuildOptions({
+        entryPoints,
+        plugins: [
+            liveReloadPlugin({
+                relativeRoot: PackageRoot,
+            }),
+        ],
+    });
+
+    const buildContext = await esbuild.context(buildOptions);
+
+    await buildContext.rebuild();
+    await buildContext.watch();

    return /** @type {Promise<void>} */ (
        new Promise((resolve) => {
@ -254,15 +178,34 @@ async function doWatch() {
 }

 async function doBuild() {
-    console.log("Building all entry points");
+    console.group(`${logPrefix} 🚀 Building entry points:`);

-    return buildParallel(entryPoints);
+    const entryPoints = Object.entries(EntryPoint).map(([entrypointID, target]) => {
+        console.log(entrypointID);
+
+        return target;
+    });
+
+    console.groupEnd();
+
+    const buildOptions = createESBuildOptions({
+        entryPoints,
+    });
+
+    await esbuild.build(buildOptions);
+
+    console.log("Build complete");
 }

 async function doProxy() {
-    return buildParallel(
-        entryPoints.filter(([_, dest]) => ["standalone/loading", "."].includes(dest)),
-    );
+    const entryPoints = [EntryPoint.StandaloneLoading];
+
+    const buildOptions = createESBuildOptions({
+        entryPoints,
+    });
+
+    await esbuild.build(buildOptions);
+    console.log("Proxy build complete");
 }

 async function delegateCommand() {
@ -284,12 +227,16 @@ async function delegateCommand() {
    }
 }

-await delegateCommand()
-    .then(() => {
-        console.log("Build complete");
-        process.exit(0);
-    })
-    .catch((error) => {
-        console.error(error);
-        process.exit(1);
-    });
+await cleanDistDirectory()
+    // ---
+    .then(() =>
+        delegateCommand()
+            .then(() => {
+                console.log("Build complete");
+                process.exit(0);
+            })
+            .catch((error) => {
+                console.error(error);
+                process.exit(1);
+            }),
+    );
--- a/web/src/admin/AdminInterface/AboutModal.ts
+++ b/web/src/admin/AdminInterface/AboutModal.ts
@ -1,11 +1,11 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { VERSION } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
+import { DefaultBrand } from "@goauthentik/common/ui/config";
 import "@goauthentik/elements/EmptyState";
 import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
 import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider";
 import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
-import { DefaultBrand } from "@goauthentik/elements/sidebar/SidebarBrand";

 import { msg } from "@lit/localize";
 import { TemplateResult, css, html } from "lit";
--- a/web/src/admin/AdminInterface/AdminSidebar.ts
+++ b/web/src/admin/AdminInterface/AdminSidebar.ts
@ -1,186 +1,97 @@
-import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants";
-import { me } from "@goauthentik/common/users";
-import { AKElement } from "@goauthentik/elements/Base";
-import {
-    CapabilitiesEnum,
-    WithCapabilitiesConfig,
-} from "@goauthentik/elements/Interface/capabilitiesProvider";
-import { WithVersion } from "@goauthentik/elements/Interface/versionProvider";
 import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "@goauthentik/elements/router/Route";
-import { getRootStyle } from "@goauthentik/elements/utils/getRootStyle";
 import { spread } from "@open-wc/lit-helpers";

 import { msg } from "@lit/localize";
 import { TemplateResult, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
+import { repeat } from "lit/directives/repeat.js";

-import { UiThemeEnum } from "@goauthentik/api";
-import type { SessionUser, UserSelf } from "@goauthentik/api";
+// The second attribute type is of string[] to help with the 'activeWhen' control, which was
+// commonplace and singular enough to merit its own handler.
+type SidebarEntry = [
+    path: string | null,
+    label: string,
+    attributes?: Record<string, any> | string[] | null, // eslint-disable-line
+    children?: SidebarEntry[],
+];

-@customElement("ak-admin-sidebar")
-export class AkAdminSidebar extends WithCapabilitiesConfig(WithVersion(AKElement)) {
-    @property({ type: Boolean, reflect: true })
-    open = true;
+/**
+ * Recursively renders a sidebar entry.
+ */
+export function renderSidebarItem([
+    path,
+    label,
+    attributes,
+    children,
+]: SidebarEntry): TemplateResult {
+    const properties = Array.isArray(attributes)
+        ? { ".activeWhen": attributes }
+        : (attributes ?? {});

-    @state()
-    impersonation: UserSelf["username"] | null = null;
-
-    constructor() {
-        super();
-        me().then((user: SessionUser) => {
-            this.impersonation = user.original ? user.user.username : null;
-        });
-        this.toggleOpen = this.toggleOpen.bind(this);
-        this.checkWidth = this.checkWidth.bind(this);
+    if (path) {
+        properties.path = path;
    }

-    // This has to be a bound method so the event listener can be removed on disconnection as
-    // needed.
-    toggleOpen() {
-        this.open = !this.open;
-    }
-
-    checkWidth() {
-        // This works just fine, but it assumes that the `--ak-sidebar--minimum-auto-width` is in
-        // REMs. If that changes, this code will have to be adjusted as well.
-        const minWidth =
-            parseFloat(getRootStyle("--ak-sidebar--minimum-auto-width")) *
-            parseFloat(getRootStyle("font-size"));
-        this.open = window.innerWidth >= minWidth;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener(EVENT_SIDEBAR_TOGGLE, this.toggleOpen);
-        window.addEventListener("resize", this.checkWidth);
-        // After connecting to the DOM, we can now perform this check to see if the sidebar should
-        // be open by default.
-        this.checkWidth();
-    }
-
-    // The symmetry (☟, ☝) here is critical in that you want to start adding these handlers after
-    // connection, and removing them before disconnection.
-
-    disconnectedCallback() {
-        window.removeEventListener(EVENT_SIDEBAR_TOGGLE, this.toggleOpen);
-        window.removeEventListener("resize", this.checkWidth);
-        super.disconnectedCallback();
-    }
-
-    render() {
-        return html`
-            <ak-sidebar
-                class="pf-c-page__sidebar ${this.open ? "pf-m-expanded" : "pf-m-collapsed"} ${this
-                    .activeTheme === UiThemeEnum.Light
-                    ? "pf-m-light"
-                    : ""}"
-            >
-                ${this.renderSidebarItems()}
-            </ak-sidebar>
-        `;
-    }
-
-    updated() {
-        // This is permissible as`:host.classList` is not one of the properties Lit uses as a
-        // scheduling trigger. This sort of shenanigans can trigger an loop, in that it will trigger
-        // a browser reflow, which may trigger some other styling the application is monitoring,
-        // triggering a re-render which triggers a browser reflow, ad infinitum. But we've been
-        // living with that since jQuery, and it's both well-known and fortunately rare.
-
-        // eslint-disable-next-line wc/no-self-class
-        this.classList.remove("pf-m-expanded", "pf-m-collapsed");
-        // eslint-disable-next-line wc/no-self-class
-        this.classList.add(this.open ? "pf-m-expanded" : "pf-m-collapsed");
-    }
-
-    renderSidebarItems(): TemplateResult {
-        // The second attribute type is of string[] to help with the 'activeWhen' control, which was
-        // commonplace and singular enough to merit its own handler.
-        type SidebarEntry = [
-            path: string | null,
-            label: string,
-            attributes?: Record<string, any> | string[] | null, // eslint-disable-line
-            children?: SidebarEntry[],
-        ];
-
-        // prettier-ignore
-        const sidebarContent: SidebarEntry[] = [
-            [null, msg("Dashboards"), { "?expanded": true }, [
-                ["/administration/overview", msg("Overview")],
-                ["/administration/dashboard/users", msg("User Statistics")],
-                ["/administration/system-tasks", msg("System Tasks")]]],
-            [null, msg("Applications"), null, [
-                ["/core/applications", msg("Applications"), [`^/core/applications/(?<slug>${SLUG_REGEX})$`]],
-                ["/core/providers", msg("Providers"), [`^/core/providers/(?<id>${ID_REGEX})$`]],
-                ["/outpost/outposts", msg("Outposts")]]],
-            [null, msg("Events"), null, [
-                ["/events/log", msg("Logs"), [`^/events/log/(?<id>${UUID_REGEX})$`]],
-                ["/events/rules", msg("Notification Rules")],
-                ["/events/transports", msg("Notification Transports")]]],
-            [null, msg("Customization"), null, [
-                ["/policy/policies", msg("Policies")],
-                ["/core/property-mappings", msg("Property Mappings")],
-                ["/blueprints/instances", msg("Blueprints")],
-                ["/policy/reputation", msg("Reputation scores")]]],
-            [null, msg("Flows and Stages"), null, [
-                ["/flow/flows", msg("Flows"), [`^/flow/flows/(?<slug>${SLUG_REGEX})$`]],
-                ["/flow/stages", msg("Stages")],
-                ["/flow/stages/prompts", msg("Prompts")]]],
-            [null, msg("Directory"), null, [
-                ["/identity/users", msg("Users"), [`^/identity/users/(?<id>${ID_REGEX})$`]],
-                ["/identity/groups", msg("Groups"), [`^/identity/groups/(?<id>${UUID_REGEX})$`]],
-                ["/identity/roles", msg("Roles"), [`^/identity/roles/(?<id>${UUID_REGEX})$`]],
-                ["/identity/initial-permissions", msg("Initial Permissions"), [`^/identity/initial-permissions/(?<id>${ID_REGEX})$`]],
-                ["/core/sources", msg("Federation and Social login"), [`^/core/sources/(?<slug>${SLUG_REGEX})$`]],
-                ["/core/tokens", msg("Tokens and App passwords")],
-                ["/flow/stages/invitations", msg("Invitations")]]],
-            [null, msg("System"), null, [
-                ["/core/brands", msg("Brands")],
-                ["/crypto/certificates", msg("Certificates")],
-                ["/outpost/integrations", msg("Outpost Integrations")],
-                ["/admin/settings", msg("Settings")]]],
-        ];
-
-        // Typescript requires the type here to correctly type the recursive path
-        type SidebarRenderer = (_: SidebarEntry) => TemplateResult;
-
-        const renderOneSidebarItem: SidebarRenderer = ([path, label, attributes, children]) => {
-            const properties = Array.isArray(attributes)
-                ? { ".activeWhen": attributes }
-                : (attributes ?? {});
-            if (path) {
-                properties.path = path;
-            }
-            return html`<ak-sidebar-item ${spread(properties)}>
-                ${label ? html`<span slot="label">${label}</span>` : nothing}
-                ${map(children, renderOneSidebarItem)}
-            </ak-sidebar-item>`;
-        };
-
-        // prettier-ignore
-        return html`
-            ${map(sidebarContent, renderOneSidebarItem)}
-            ${this.renderEnterpriseMenu()}
-        `;
-    }
-
-    renderEnterpriseMenu() {
-        return this.can(CapabilitiesEnum.IsEnterprise)
-            ? html`
-                  <ak-sidebar-item>
-                      <span slot="label">${msg("Enterprise")}</span>
-                      <ak-sidebar-item path="/enterprise/licenses">
-                          <span slot="label">${msg("Licenses")}</span>
-                      </ak-sidebar-item>
-                  </ak-sidebar-item>
-              `
-            : nothing;
-    }
+    return html`<ak-sidebar-item ${spread(properties)}>
+        ${label ? html`<span slot="label">${label}</span>` : nothing}
+        ${children ? renderSidebarItems(children) : nothing}
+    </ak-sidebar-item>`;
 }

-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-admin-sidebar": AkAdminSidebar;
-    }
+/**
+ * Recursively renders a collection of sidebar entries.
+ */
+export function renderSidebarItems(entries: readonly SidebarEntry[]) {
+    return repeat(entries, ([path, label]) => path || label, renderSidebarItem);
 }
+
+// prettier-ignore
+export const AdminSidebarEntries: readonly SidebarEntry[] = [
+    [null, msg("Dashboards"), { "?expanded": true }, [
+        ["/administration/overview", msg("Overview")],
+        ["/administration/dashboard/users", msg("User Statistics")],
+        ["/administration/system-tasks", msg("System Tasks")]]
+    ],
+    [null, msg("Applications"), null, [
+        ["/core/applications", msg("Applications"), [`^/core/applications/(?<slug>${SLUG_REGEX})$`]],
+        ["/core/providers", msg("Providers"), [`^/core/providers/(?<id>${ID_REGEX})$`]],
+        ["/outpost/outposts", msg("Outposts")]]
+    ],
+    [null, msg("Events"), null, [
+        ["/events/log", msg("Logs"), [`^/events/log/(?<id>${UUID_REGEX})$`]],
+        ["/events/rules", msg("Notification Rules")],
+        ["/events/transports", msg("Notification Transports")]]
+    ],
+    [null, msg("Customization"), null, [
+        ["/policy/policies", msg("Policies")],
+        ["/core/property-mappings", msg("Property Mappings")],
+        ["/blueprints/instances", msg("Blueprints")],
+        ["/policy/reputation", msg("Reputation scores")]]
+    ],
+    [null, msg("Flows and Stages"), null, [
+        ["/flow/flows", msg("Flows"), [`^/flow/flows/(?<slug>${SLUG_REGEX})$`]],
+        ["/flow/stages", msg("Stages")],
+        ["/flow/stages/prompts", msg("Prompts")]]
+    ],
+    [null, msg("Directory"), null, [
+        ["/identity/users", msg("Users"), [`^/identity/users/(?<id>${ID_REGEX})$`]],
+        ["/identity/groups", msg("Groups"), [`^/identity/groups/(?<id>${UUID_REGEX})$`]],
+        ["/identity/roles", msg("Roles"), [`^/identity/roles/(?<id>${UUID_REGEX})$`]],
+        ["/identity/initial-permissions", msg("Initial Permissions"), [`^/identity/initial-permissions/(?<id>${ID_REGEX})$`]],
+        ["/core/sources", msg("Federation and Social login"), [`^/core/sources/(?<slug>${SLUG_REGEX})$`]],
+        ["/core/tokens", msg("Tokens and App passwords")],
+        ["/flow/stages/invitations", msg("Invitations")]]
+    ],
+    [null, msg("System"), null, [
+        ["/core/brands", msg("Brands")],
+        ["/crypto/certificates", msg("Certificates")],
+        ["/outpost/integrations", msg("Outpost Integrations")],
+        ["/admin/settings", msg("Settings")]]
+    ],
+];
+
+// prettier-ignore
+export const AdminSidebarEnterpriseEntries: readonly SidebarEntry[] = [
+    [null, msg("Enterprise"), null, [
+        ["/enterprise/licenses", msg("Licenses"), null]
+    ],
+]]
--- a/web/src/admin/AdminInterface/index.entrypoint.ts
+++ b/web/src/admin/AdminInterface/index.entrypoint.ts
@ -4,13 +4,17 @@ import { ROUTES } from "@goauthentik/admin/Routes";
 import {
    EVENT_API_DRAWER_TOGGLE,
    EVENT_NOTIFICATION_DRAWER_TOGGLE,
+    EVENT_SIDEBAR_TOGGLE,
 } from "@goauthentik/common/constants";
 import { configureSentry } from "@goauthentik/common/sentry";
 import { me } from "@goauthentik/common/users";
 import { WebsocketClient } from "@goauthentik/common/ws";
 import { AuthenticatedInterface } from "@goauthentik/elements/Interface";
+import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider.js";
 import "@goauthentik/elements/ak-locale-context";
 import "@goauthentik/elements/banner/EnterpriseStatusBanner";
+import "@goauthentik/elements/banner/EnterpriseStatusBanner";
+import "@goauthentik/elements/banner/VersionBanner";
 import "@goauthentik/elements/banner/VersionBanner";
 import "@goauthentik/elements/messages/MessageContainer";
 import "@goauthentik/elements/messages/MessageContainer";
@ -21,25 +25,32 @@ import "@goauthentik/elements/router/RouterOutlet";
 import "@goauthentik/elements/sidebar/Sidebar";
 import "@goauthentik/elements/sidebar/SidebarItem";

-import { CSSResult, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";

 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
+import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

-import { SessionUser, UiThemeEnum } from "@goauthentik/api";
+import { LicenseSummaryStatusEnum, SessionUser, UiThemeEnum } from "@goauthentik/api";

-import "./AdminSidebar";
+import {
+    AdminSidebarEnterpriseEntries,
+    AdminSidebarEntries,
+    renderSidebarItems,
+} from "./AdminSidebar.js";

 if (process.env.NODE_ENV === "development") {
    await import("@goauthentik/esbuild-plugin-live-reload/client");
 }

@customElement("ak-interface-admin")
-export class AdminInterface extends AuthenticatedInterface {
+export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
+    //#region Properties
+
    @property({ type: Boolean })
    notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);

@ -54,12 +65,29 @@ export class AdminInterface extends AuthenticatedInterface {
    @query("ak-about-modal")
    aboutModal?: AboutModal;

+    @property({ type: Boolean, reflect: true })
+    public sidebarOpen: boolean;
+
+    #toggleSidebar = () => {
+        this.sidebarOpen = !this.sidebarOpen;
+    };
+
+    #sidebarMatcher: MediaQueryList;
+    #sidebarListener = (event: MediaQueryListEvent) => {
+        this.sidebarOpen = event.matches;
+    };
+
+    //#endregion
+
+    //#region Styles
+
    static get styles(): CSSResult[] {
        return [
            PFBase,
            PFPage,
            PFButton,
            PFDrawer,
+            PFNav,
            css`
                .pf-c-page__main,
                .pf-c-drawer__content,
@ -67,23 +95,30 @@ export class AdminInterface extends AuthenticatedInterface {
                    z-index: auto !important;
                    background-color: transparent;
                }
+
                .display-none {
                    display: none;
                }
+
                .pf-c-page {
                    background-color: var(--pf-c-page--BackgroundColor) !important;
                }
-                /* Global page background colour */
-                :host([theme="dark"]) .pf-c-page {
-                    --pf-c-page--BackgroundColor: var(--ak-dark-background);
+
+                :host([theme="dark"]) {
+                    /* Global page background colour */
+                    .pf-c-page {
+                        --pf-c-page--BackgroundColor: var(--ak-dark-background);
+                    }
                }
-                ak-enterprise-status,
-                ak-version-banner {
+
+                ak-page-navbar {
                    grid-area: header;
                }
-                ak-admin-sidebar {
+
+                .ak-sidebar {
                    grid-area: nav;
                }
+
                .pf-c-drawer__panel {
                    z-index: var(--pf-global--ZIndex--xl);
                }
@ -91,10 +126,23 @@ export class AdminInterface extends AuthenticatedInterface {
        ];
    }

+    //#endregion
+
+    //#region Lifecycle
+
    constructor() {
        super();
        this.ws = new WebsocketClient();

+        this.#sidebarMatcher = window.matchMedia("(min-width: 1200px)");
+        this.sidebarOpen = this.#sidebarMatcher.matches;
+    }
+
+    public connectedCallback() {
+        super.connectedCallback();
+
+        window.addEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar);
+
        window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
            this.notificationDrawerOpen = !this.notificationDrawerOpen;
            updateURLParams({
@ -108,6 +156,14 @@ export class AdminInterface extends AuthenticatedInterface {
                apiDrawerOpen: this.apiDrawerOpen,
            });
        });
+
+        this.#sidebarMatcher.addEventListener("change", this.#sidebarListener);
+    }
+
+    public disconnectedCallback(): void {
+        super.disconnectedCallback();
+        window.removeEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar);
+        this.#sidebarMatcher.removeEventListener("change", this.#sidebarListener);
    }

    async firstUpdated(): Promise<void> {
@ -118,6 +174,7 @@ export class AdminInterface extends AuthenticatedInterface {
            this.user.user.isSuperuser ||
            // TODO: somehow add `access_admin_interface` to the API schema
            this.user.user.systemPermissions.includes("access_admin_interface");
+
        if (!canAccessAdmin && this.user.user.pk > 0) {
            window.location.assign("/if/user/");
        }
@ -125,10 +182,14 @@ export class AdminInterface extends AuthenticatedInterface {

    render(): TemplateResult {
        const sidebarClasses = {
+            "pf-c-page__sidebar": true,
            "pf-m-light": this.activeTheme === UiThemeEnum.Light,
+            "pf-m-expanded": this.sidebarOpen,
+            "pf-m-collapsed": !this.sidebarOpen,
        };

        const drawerOpen = this.notificationDrawerOpen || this.apiDrawerOpen;
+
        const drawerClasses = {
            "pf-m-expanded": drawerOpen,
            "pf-m-collapsed": !drawerOpen,
@ -136,11 +197,18 @@ export class AdminInterface extends AuthenticatedInterface {

        return html` <ak-locale-context>
            <div class="pf-c-page">
-                <ak-enterprise-status interface="admin"></ak-enterprise-status>
-                <ak-version-banner></ak-version-banner>
-                <ak-admin-sidebar
-                    class="pf-c-page__sidebar ${classMap(sidebarClasses)}"
-                ></ak-admin-sidebar>
+                <ak-page-navbar>
+                    <ak-version-banner></ak-version-banner>
+                    <ak-enterprise-status interface="admin"></ak-enterprise-status>
+                </ak-page-navbar>
+
+                <ak-sidebar class="${classMap(sidebarClasses)}">
+                    ${renderSidebarItems(AdminSidebarEntries)}
+                    ${this.licenseSummary?.status !== LicenseSummaryStatusEnum.Unlicensed
+                        ? renderSidebarItems(AdminSidebarEnterpriseEntries)
+                        : nothing}
+                </ak-sidebar>
+
                <div class="pf-c-page__drawer">
                    <div class="pf-c-drawer ${classMap(drawerClasses)}">
                        <div class="pf-c-drawer__main">
--- a/web/src/admin/AdminInterface/index.ts
+++ b/web/src/admin/AdminInterface/index.ts
@ -1,5 +0,0 @@
-import { AdminInterface } from "./AdminInterface";
-import "./AdminInterface";
-
-export { AdminInterface };
-export default AdminInterface;
--- a/web/src/admin/admin-overview/AdminOverviewPage.ts
+++ b/web/src/admin/admin-overview/AdminOverviewPage.ts
@ -94,10 +94,13 @@ export class AdminOverviewPage extends AdminOverviewBase {
    }

    render(): TemplateResult {
-        const name = this.user?.user.name ?? this.user?.user.username;
+        const username = this.user?.user.name || this.user?.user.username;

-        return html`<ak-page-header description=${msg("General system status")} ?hasIcon=${false}>
-                <span slot="header"> ${msg(str`Welcome, ${name || ""}.`)} </span>
+        return html` <ak-page-header
+                header=${msg(str`Welcome, ${username || ""}.`)}
+                description=${msg("General system status")}
+                ?hasIcon=${false}
+            >
            </ak-page-header>
            <section class="pf-c-page__main-section">
                <div class="pf-l-grid pf-m-gutter">
--- a/web/src/admin/admin-settings/AdminSettingsForm.ts
+++ b/web/src/admin/admin-settings/AdminSettingsForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-number-input";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
@ -184,20 +183,14 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                label=${msg("Reputation: lower limit")}
                required
                name="reputationLowerLimit"
-                value="${first(
-                    this._settings?.reputationLowerLimit,
-                    DEFAULT_REPUTATION_LOWER_LIMIT,
-                )}"
+                value="${this._settings?.reputationLowerLimit ?? DEFAULT_REPUTATION_LOWER_LIMIT}"
                help=${msg("Reputation cannot decrease lower than this value. Zero or negative.")}
            ></ak-number-input>
            <ak-number-input
                label=${msg("Reputation: upper limit")}
                required
                name="reputationUpperLimit"
-                value="${first(
-                    this._settings?.reputationUpperLimit,
-                    DEFAULT_REPUTATION_UPPER_LIMIT,
-                )}"
+                value="${this._settings?.reputationUpperLimit ?? DEFAULT_REPUTATION_UPPER_LIMIT}"
                help=${msg("Reputation cannot increase higher than this value. Zero or positive.")}
            ></ak-number-input>
            <ak-form-element-horizontal label=${msg("Footer links")} name="footerLinks">
@ -257,7 +250,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                label=${msg("Default token length")}
                required
                name="defaultTokenLength"
-                value="${first(this._settings?.defaultTokenLength, 60)}"
+                value="${this._settings?.defaultTokenLength ?? 60}"
                help=${msg("Default length of generated tokens")}
            ></ak-number-input>
        `;
--- a/web/src/admin/admin-settings/AdminSettingsPage.ts
+++ b/web/src/admin/admin-settings/AdminSettingsPage.ts
@ -83,13 +83,10 @@ export class AdminSettingsPage extends AKElement {
    }

    render() {
-        if (!this.settings) {
-            return nothing;
-        }
+        if (!this.settings) return nothing;
+
        return html`
-            <ak-page-header icon="fa fa-cog" header="" description="">
-                <span slot="header"> ${msg("System settings")} </span>
-            </ak-page-header>
+            <ak-page-header icon="fa fa-cog" header="${msg("System settings")}"> </ak-page-header>
            <section class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
                <div class="pf-c-card">
                    <div class="pf-c-card__body">
--- a/web/src/admin/applications/ApplicationForm.ts
+++ b/web/src/admin/applications/ApplicationForm.ts
@ -1,7 +1,6 @@
 import "@goauthentik/admin/applications/ProviderSelectModal";
 import { iconHelperText } from "@goauthentik/admin/helperText";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-file-input";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-switch-input";
@ -194,7 +193,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                    ></ak-text-input>
                    <ak-switch-input
                        name="openInNewTab"
-                        ?checked=${first(this.instance?.openInNewTab, false)}
+                        ?checked=${this.instance?.openInNewTab ?? false}
                        label=${msg("Open in new tab")}
                        help=${msg(
                            "If checked, the launch URL will open in a new browser tab or window from the user's application library.",
@ -221,7 +220,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                        : html` <ak-text-input
                              label=${msg("Icon")}
                              name="metaIcon"
-                              value=${first(this.instance?.metaIcon, "")}
+                              value=${this.instance?.metaIcon ?? ""}
                              help=${iconHelperText}
                          >
                          </ak-text-input>`}
--- a/web/src/admin/applications/entitlements/ApplicationEntitlementForm.ts
+++ b/web/src/admin/applications/entitlements/ApplicationEntitlementForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -60,7 +59,7 @@ export class ApplicationEntitlementForm extends ModelForm<ApplicationEntitlement
        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -72,7 +71,7 @@ export class ApplicationEntitlementForm extends ModelForm<ApplicationEntitlement
            >
                <ak-codemirror
                    mode=${CodeMirrorMode.YAML}
-                    value="${YAML.stringify(first(this.instance?.attributes, {}))}"
+                    value="${YAML.stringify(this.instance?.attributes ?? {})}"
                >
                </ak-codemirror>
                <p class="pf-c-form__helper-text">
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
@ -1,7 +1,6 @@
 import { policyOptions } from "@goauthentik/admin/applications/PolicyOptions.js";
 import { ApplicationWizardStep } from "@goauthentik/admin/applications/wizard/ApplicationWizardStep.js";
 import "@goauthentik/admin/applications/wizard/ak-wizard-title.js";
-import { isSlug } from "@goauthentik/common/utils.js";
 import { camelToSnake } from "@goauthentik/common/utils.js";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-slug-input";
@ -11,6 +10,7 @@ import { type NavigableButton, type WizardButton } from "@goauthentik/components
 import { type KeyUnknown } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
+import { isSlug } from "@goauthentik/elements/router/utils.js";

 import { msg } from "@lit/localize";
 import { html } from "lit";
--- a/web/src/admin/blueprints/BlueprintForm.ts
+++ b/web/src/admin/blueprints/BlueprintForm.ts
@ -1,6 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-toggle-group";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
@ -80,7 +79,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.enabled, true)}
+                        ?checked=${this.instance?.enabled ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -184,7 +183,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                    <ak-form-element-horizontal label=${msg("Context")} name="context">
                        <ak-codemirror
                            mode=${CodeMirrorMode.YAML}
-                            value="${YAML.stringify(first(this.instance?.context, {}))}"
+                            value="${YAML.stringify(this.instance?.context ?? {})}"
                        >
                        </ak-codemirror>
                        <p class="pf-c-form__helper-text">
--- a/web/src/admin/brands/BrandForm.ts
+++ b/web/src/admin/brands/BrandForm.ts
@ -1,14 +1,13 @@
 import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
+import { DefaultBrand } from "@goauthentik/common/ui/config";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/SearchSelect";
-import { DefaultBrand } from "@goauthentik/elements/sidebar/SidebarBrand";
 import YAML from "yaml";

 import { msg } from "@lit/localize";
@ -54,7 +53,7 @@ export class BrandForm extends ModelForm<Brand, string> {
        return html` <ak-form-element-horizontal label=${msg("Domain")} required name="domain">
                <input
                    type="text"
-                    value="${first(this.instance?.domain, window.location.host)}"
+                    value="${this.instance?.domain ?? window.location.host}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -72,7 +71,7 @@ export class BrandForm extends ModelForm<Brand, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?._default, false)}
+                        ?checked=${this.instance?._default ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -92,10 +91,7 @@ export class BrandForm extends ModelForm<Brand, string> {
                    <ak-form-element-horizontal label=${msg("Title")} required name="brandingTitle">
                        <input
                            type="text"
-                            value="${first(
-                                this.instance?.brandingTitle,
-                                DefaultBrand.brandingTitle,
-                            )}"
+                            value="${this.instance?.brandingTitle ?? DefaultBrand.brandingTitle}"
                            class="pf-c-form-control"
                            required
                        />
@ -106,7 +102,7 @@ export class BrandForm extends ModelForm<Brand, string> {
                    <ak-form-element-horizontal label=${msg("Logo")} required name="brandingLogo">
                        <input
                            type="text"
-                            value="${first(this.instance?.brandingLogo, DefaultBrand.brandingLogo)}"
+                            value="${this.instance?.brandingLogo ?? DefaultBrand.brandingLogo}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
@ -123,10 +119,8 @@ export class BrandForm extends ModelForm<Brand, string> {
                    >
                        <input
                            type="text"
-                            value="${first(
-                                this.instance?.brandingFavicon,
-                                DefaultBrand.brandingFavicon,
-                            )}"
+                            value="${this.instance?.brandingFavicon ??
+                            DefaultBrand.brandingFavicon}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
@ -143,10 +137,8 @@ export class BrandForm extends ModelForm<Brand, string> {
                    >
                        <input
                            type="text"
-                            value="${first(
-                                this.instance?.brandingDefaultFlowBackground,
-                                "/static/dist/assets/images/flow_background.jpg",
-                            )}"
+                            value="${this.instance?.brandingDefaultFlowBackground ??
+                            "/static/dist/assets/images/flow_background.jpg"}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
@ -165,10 +157,8 @@ export class BrandForm extends ModelForm<Brand, string> {
                    >
                        <ak-codemirror
                            mode=${CodeMirrorMode.CSS}
-                            value="${first(
-                                this.instance?.brandingCustomCss,
-                                DefaultBrand.brandingCustomCss,
-                            )}"
+                            value="${this.instance?.brandingCustomCss ??
+                            DefaultBrand.brandingCustomCss}"
                        >
                        </ak-codemirror>
                        <p class="pf-c-form__helper-text">
@ -317,7 +307,7 @@ export class BrandForm extends ModelForm<Brand, string> {
                    <ak-form-element-horizontal label=${msg("Attributes")} name="attributes">
                        <ak-codemirror
                            mode=${CodeMirrorMode.YAML}
-                            value="${YAML.stringify(first(this.instance?.attributes, {}))}"
+                            value="${YAML.stringify(this.instance?.attributes ?? {})}"
                        >
                        </ak-codemirror>
                        <p class="pf-c-form__helper-text">
--- a/web/src/admin/events/TransportForm.ts
+++ b/web/src/admin/events/TransportForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/Radio";
@ -185,7 +184,7 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.sendOnce, false)}
+                        ?checked=${this.instance?.sendOnce ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/flows/FlowForm.ts
+++ b/web/src/admin/flows/FlowForm.ts
@ -1,7 +1,6 @@
 import { DesignationToLabel, LayoutToLabel } from "@goauthentik/admin/flows/utils";
 import { AuthenticationEnum } from "@goauthentik/api/dist/models/AuthenticationEnum";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import {
    CapabilitiesEnum,
    WithCapabilitiesConfig,
@ -227,7 +226,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.compatibilityMode, false)}
+                                ?checked=${this.instance?.compatibilityMode ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -407,7 +406,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                          >
                              <input
                                  type="text"
-                                  value="${first(this.instance?.background, "")}"
+                                  value="${this.instance?.background ?? ""}"
                                  class="pf-c-form-control"
                              />
                              <p class="pf-c-form__helper-text">
--- a/web/src/admin/flows/StageBindingForm.ts
+++ b/web/src/admin/flows/StageBindingForm.ts
@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first, groupBy } from "@goauthentik/common/utils";
+import { groupBy } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/Radio";
@ -123,7 +123,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
            <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
                <input
                    type="number"
-                    value="${first(this.instance?.order, this.defaultOrder)}"
+                    value="${this.instance?.order ?? this.defaultOrder}"
                    class="pf-c-form-control"
                    required
                />
@ -133,7 +133,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.evaluateOnPlan, false)}
+                        ?checked=${this.instance?.evaluateOnPlan ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -151,7 +151,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.reEvaluatePolicies, true)}
+                        ?checked=${this.instance?.reEvaluatePolicies ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/groups/GroupForm.ts
+++ b/web/src/admin/groups/GroupForm.ts
@ -1,6 +1,5 @@
 import "@goauthentik/admin/groups/MemberSelectModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider";
@ -77,7 +76,7 @@ export class GroupForm extends ModelForm<Group, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.isSuperuser, false)}
+                        ?checked=${this.instance?.isSuperuser ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -150,7 +149,7 @@ export class GroupForm extends ModelForm<Group, string> {
            >
                <ak-codemirror
                    mode=${CodeMirrorMode.YAML}
-                    value="${YAML.stringify(first(this.instance?.attributes, {}))}"
+                    value="${YAML.stringify(this.instance?.attributes ?? {})}"
                >
                </ak-codemirror>
                <p class="pf-c-form__helper-text">
--- a/web/src/admin/outposts/ServiceConnectionDockerForm.ts
+++ b/web/src/admin/outposts/ServiceConnectionDockerForm.ts
@ -1,6 +1,5 @@
 import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/SearchSelect";
@ -53,7 +52,7 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.local, false)}
+                        ?checked=${this.instance?.local ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
+++ b/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -57,7 +56,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.local, false)}
+                        ?checked=${this.instance?.local ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -75,7 +74,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
            <ak-form-element-horizontal label=${msg("Kubeconfig")} name="kubeconfig">
                <ak-codemirror
                    mode=${CodeMirrorMode.YAML}
-                    value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}"
+                    value="${YAML.stringify(this.instance?.kubeconfig ?? {})}"
                >
                </ak-codemirror>
                <p class="pf-c-form__helper-text">
@ -87,7 +86,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.verifySsl, true)}
+                        ?checked=${this.instance?.verifySsl ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/policies/PolicyBindingForm.ts
+++ b/web/src/admin/policies/PolicyBindingForm.ts
@ -3,7 +3,7 @@ import {
    PolicyBindingCheckTargetToLabel,
 } from "@goauthentik/admin/policies/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first, groupBy } from "@goauthentik/common/utils";
+import { groupBy } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-toggle-group";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -274,7 +274,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.enabled, true)}
+                        ?checked=${this.instance?.enabled ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -289,7 +289,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.negate, false)}
+                        ?checked=${this.instance?.negate ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -305,7 +305,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
            <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
                <input
                    type="number"
-                    value="${first(this.instance?.order, this.defaultOrder)}"
+                    value="${this.instance?.order ?? this.defaultOrder}"
                    class="pf-c-form-control"
                    required
                />
@ -313,7 +313,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
            <ak-form-element-horizontal label=${msg("Timeout")} ?required=${true} name="timeout">
                <input
                    type="number"
-                    value="${first(this.instance?.timeout, 30)}"
+                    value="${this.instance?.timeout ?? 30}"
                    class="pf-c-form-control"
                    required
                />
--- a/web/src/admin/policies/PolicyTestForm.ts
+++ b/web/src/admin/policies/PolicyTestForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
@ -125,7 +124,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
            <ak-form-element-horizontal label=${msg("Context")} name="context">
                <ak-codemirror
                    mode=${CodeMirrorMode.YAML}
-                    value=${YAML.stringify(first(this.request?.context, {}))}
+                    value=${YAML.stringify(this.request?.context ?? {})}
                >
                </ak-codemirror>
                <p class="pf-c-form__helper-text">
--- a/web/src/admin/policies/dummy/DummyPolicyForm.ts
+++ b/web/src/admin/policies/dummy/DummyPolicyForm.ts
@ -1,6 +1,5 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";

@ -51,7 +50,7 @@ export class DummyPolicyForm extends BasePolicyForm<DummyPolicy> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.executionLogging, false)}
+                        ?checked=${this.instance?.executionLogging ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -74,7 +73,7 @@ export class DummyPolicyForm extends BasePolicyForm<DummyPolicy> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.result, false)}
+                                ?checked=${this.instance?.result ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -91,7 +90,7 @@ export class DummyPolicyForm extends BasePolicyForm<DummyPolicy> {
                    >
                        <input
                            type="number"
-                            value="${first(this.instance?.waitMin, 1)}"
+                            value="${this.instance?.waitMin ?? 1}"
                            class="pf-c-form-control"
                            required
                        />
@ -108,7 +107,7 @@ export class DummyPolicyForm extends BasePolicyForm<DummyPolicy> {
                    >
                        <input
                            type="number"
-                            value="${first(this.instance?.waitMax, 5)}"
+                            value="${this.instance?.waitMax ?? 5}"
                            class="pf-c-form-control"
                            required
                        />
--- a/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
+++ b/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
@ -1,6 +1,5 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@ -63,7 +62,7 @@ export class EventMatcherPolicyForm extends BasePolicyForm<EventMatcherPolicy> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.executionLogging, false)}
+                        ?checked=${this.instance?.executionLogging ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/policies/expiry/ExpiryPolicyForm.ts
+++ b/web/src/admin/policies/expiry/ExpiryPolicyForm.ts
@ -1,6 +1,5 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";

@ -51,7 +50,7 @@ export class PasswordExpiryPolicyForm extends BasePolicyForm<PasswordExpiryPolic
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.executionLogging, false)}
+                        ?checked=${this.instance?.executionLogging ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -86,7 +85,7 @@ export class PasswordExpiryPolicyForm extends BasePolicyForm<PasswordExpiryPolic
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.denyOnly, false)}
+                                ?checked=${this.instance?.denyOnly ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/policies/expression/ExpressionPolicyForm.ts
+++ b/web/src/admin/policies/expression/ExpressionPolicyForm.ts
@ -1,7 +1,6 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/FormGroup";
@ -54,7 +53,7 @@ export class ExpressionPolicyForm extends BasePolicyForm<ExpressionPolicy> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.executionLogging, false)}
+                        ?checked=${this.instance?.executionLogging ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/policies/geoip/GeoIPPolicyForm.ts
+++ b/web/src/admin/policies/geoip/GeoIPPolicyForm.ts
@ -1,6 +1,5 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/ak-dual-select";
 import { DataProvision, DualSelectPair } from "@goauthentik/elements/ak-dual-select/types";
 import "@goauthentik/elements/forms/FormGroup";
@ -112,7 +111,7 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
                        <input
                            type="number"
                            min="1"
-                            value="${first(this.instance?.historyMaxDistanceKm, 100)}"
+                            value="${this.instance?.historyMaxDistanceKm ?? 100}"
                            class="pf-c-form-control"
                        />
                        <p class="pf-c-form__helper-text">
@ -128,7 +127,7 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
                        <input
                            type="number"
                            min="1"
-                            value="${first(this.instance?.distanceToleranceKm, 50)}"
+                            value="${this.instance?.distanceToleranceKm ?? 50}"
                            class="pf-c-form-control"
                        />
                        <p class="pf-c-form__helper-text">
@ -142,7 +141,7 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
                        <input
                            type="number"
                            min="1"
-                            value="${first(this.instance?.historyLoginCount, 5)}"
+                            value="${this.instance?.historyLoginCount ?? 5}"
                            class="pf-c-form-control"
                        />
                        <p class="pf-c-form__helper-text">
@ -178,7 +177,7 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
                        <input
                            type="number"
                            min="1"
-                            value="${first(this.instance?.impossibleToleranceKm, 50)}"
+                            value="${this.instance?.impossibleToleranceKm ?? 50}"
                            class="pf-c-form-control"
                        />
                        <p class="pf-c-form__helper-text">
--- a/web/src/admin/policies/password/PasswordPolicyForm.ts
+++ b/web/src/admin/policies/password/PasswordPolicyForm.ts
@ -1,6 +1,5 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";

@ -56,7 +55,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                >
                    <input
                        type="number"
-                        value="${first(this.instance?.lengthMin, 10)}"
+                        value="${this.instance?.lengthMin ?? 10}"
                        class="pf-c-form-control"
                        required
                    />
@ -68,7 +67,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                >
                    <input
                        type="number"
-                        value="${first(this.instance?.amountUppercase, 2)}"
+                        value="${this.instance?.amountUppercase ?? 2}"
                        class="pf-c-form-control"
                        required
                    />
@ -80,7 +79,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                >
                    <input
                        type="number"
-                        value="${first(this.instance?.amountLowercase, 2)}"
+                        value="${this.instance?.amountLowercase ?? 2}"
                        class="pf-c-form-control"
                        required
                    />
@ -92,7 +91,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                >
                    <input
                        type="number"
-                        value="${first(this.instance?.amountDigits, 2)}"
+                        value="${this.instance?.amountDigits ?? 2}"
                        class="pf-c-form-control"
                        required
                    />
@ -104,7 +103,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                >
                    <input
                        type="number"
-                        value="${first(this.instance?.amountSymbols, 2)}"
+                        value="${this.instance?.amountSymbols ?? 2}"
                        class="pf-c-form-control"
                        required
                    />
@ -154,7 +153,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                    >
                        <input
                            type="number"
-                            value="${first(this.instance?.hibpAllowedCount, 0)}"
+                            value="${this.instance?.hibpAllowedCount ?? 0}"
                            class="pf-c-form-control"
                            required
                        />
@ -179,7 +178,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                    >
                        <input
                            type="number"
-                            value="${first(this.instance?.zxcvbnScoreThreshold, 0)}"
+                            value="${this.instance?.zxcvbnScoreThreshold ?? 0}"
                            class="pf-c-form-control"
                            required
                        />
@ -236,7 +235,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.executionLogging, false)}
+                        ?checked=${this.instance?.executionLogging ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -272,7 +271,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.checkStaticRules, true)}
+                        ?checked=${this.instance?.checkStaticRules ?? true}
                        @change=${(ev: Event) => {
                            const el = ev.target as HTMLInputElement;
                            this.showStatic = el.checked;
@ -291,7 +290,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.checkHaveIBeenPwned, true)}
+                        ?checked=${this.instance?.checkHaveIBeenPwned ?? true}
                        @change=${(ev: Event) => {
                            const el = ev.target as HTMLInputElement;
                            this.showHIBP = el.checked;
@ -316,7 +315,7 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.checkZxcvbn, true)}
+                        ?checked=${this.instance?.checkZxcvbn ?? true}
                        @change=${(ev: Event) => {
                            const el = ev.target as HTMLInputElement;
                            this.showZxcvbn = el.checked;
--- a/web/src/admin/policies/reputation/ReputationPolicyForm.ts
+++ b/web/src/admin/policies/reputation/ReputationPolicyForm.ts
@ -1,6 +1,5 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";

@ -61,7 +60,7 @@ doesn't pass when either or both of the selected options are equal or above the
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.executionLogging, false)}
+                        ?checked=${this.instance?.executionLogging ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -84,7 +83,7 @@ doesn't pass when either or both of the selected options are equal or above the
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.checkIp, true)}
+                                ?checked=${this.instance?.checkIp ?? true}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -99,7 +98,7 @@ doesn't pass when either or both of the selected options are equal or above the
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.checkUsername, false)}
+                                ?checked=${this.instance?.checkUsername ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/policies/unique_password/UniquePasswordPolicyForm.ts
+++ b/web/src/admin/policies/unique_password/UniquePasswordPolicyForm.ts
@ -1,6 +1,5 @@
 import { BasePolicyForm } from "@goauthentik/admin/policies/BasePolicyForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";

@ -51,7 +50,7 @@ export class UniquePasswordPolicyForm extends BasePolicyForm<UniquePasswordPolic
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.executionLogging, false)}
+                        ?checked=${this.instance?.executionLogging ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -88,7 +87,7 @@ export class UniquePasswordPolicyForm extends BasePolicyForm<UniquePasswordPolic
            >
                <input
                    type="number"
-                    value="${first(this.instance?.numHistoricalPasswords, 1)}"
+                    value="${this.instance?.numHistoricalPasswords ?? 1}"
                    class="pf-c-form-control"
                    required
                />
--- a/web/src/admin/property-mappings/PropertyMappingTestForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import { Form } from "@goauthentik/elements/forms/Form";
@ -181,7 +180,7 @@ export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
            <ak-form-element-horizontal label=${msg("Context")} name="context">
                <ak-codemirror
                    mode=${CodeMirrorMode.YAML}
-                    value=${YAML.stringify(first(this.request?.context, {}))}
+                    value=${YAML.stringify(this.request?.context ?? {})}
                >
                </ak-codemirror>
                <p class="pf-c-form__helper-text">${this.renderExampleButtons()}</p>
--- a/web/src/admin/providers/google_workspace/GoogleWorkspaceProviderForm.ts
+++ b/web/src/admin/providers/google_workspace/GoogleWorkspaceProviderForm.ts
@ -4,7 +4,6 @@ import {
    propertyMappingsSelector,
 } from "@goauthentik/admin/providers/google_workspace/GoogleWorkspaceProviderFormHelpers.js";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
@ -68,7 +67,7 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                    >
                        <ak-codemirror
                            mode=${CodeMirrorMode.JavaScript}
-                            .value="${first(this.instance?.credentials, {})}"
+                            .value="${this.instance?.credentials ?? {}}"
                        ></ak-codemirror>
                        <p class="pf-c-form__helper-text">
                            ${msg("Google Cloud credentials file.")}
@ -81,7 +80,7 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                    >
                        <input
                            type="email"
-                            value="${first(this.instance?.delegatedSubject, "")}"
+                            value="${this.instance?.delegatedSubject ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            required
                        />
@ -98,7 +97,7 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.defaultGroupEmailDomain, "")}"
+                            value="${this.instance?.defaultGroupEmailDomain ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            required
                        />
@ -166,7 +165,7 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.dryRun, false)}
+                                ?checked=${this.instance?.dryRun ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -191,7 +190,7 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.excludeUsersServiceAccount, true)}
+                                ?checked=${this.instance?.excludeUsersServiceAccount ?? true}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderForm.ts
+++ b/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderForm.ts
@ -4,7 +4,6 @@ import {
    propertyMappingsSelector,
 } from "@goauthentik/admin/providers/microsoft_entra/MicrosoftEntraProviderFormHelpers.js";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
@ -66,7 +65,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.clientId, "")}"
+                            value="${this.instance?.clientId ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            required
                        />
@ -81,7 +80,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.clientSecret, "")}"
+                            value="${this.instance?.clientSecret ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            required
                        />
@ -96,7 +95,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.tenantId, "")}"
+                            value="${this.instance?.tenantId ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            required
                        />
@ -155,7 +154,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.dryRun, false)}
+                                ?checked=${this.instance?.dryRun ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -180,7 +179,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.excludeUsersServiceAccount, true)}
+                                ?checked=${this.instance?.excludeUsersServiceAccount ?? true}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
@ -4,7 +4,7 @@ import {
    IRedirectURIInput,
    akOAuthRedirectURIInput,
 } from "@goauthentik/admin/providers/oauth2/OAuth2ProviderRedirectURI";
-import { ascii_letters, digits, first, randomString } from "@goauthentik/common/utils";
+import { ascii_letters, digits, randomString } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/components/ak-textarea-input";
@ -161,7 +161,7 @@ export function renderForm(
                <ak-text-input
                    name="clientId"
                    label=${msg("Client ID")}
-                    value="${first(provider?.clientId, randomString(40, ascii_letters + digits))}"
+                    value="${provider?.clientId ?? randomString(40, ascii_letters + digits)}"
                    required
                    inputHint="code"
                >
@ -169,10 +169,7 @@ export function renderForm(
                <ak-text-input
                    name="clientSecret"
                    label=${msg("Client Secret")}
-                    value="${first(
-                        provider?.clientSecret,
-                        randomString(128, ascii_letters + digits),
-                    )}"
+                    value="${provider?.clientSecret ?? randomString(128, ascii_letters + digits)}"
                    inputHint="code"
                    ?hidden=${!showClientSecret}
                >
@ -257,7 +254,7 @@ export function renderForm(
                    label=${msg("Access code validity")}
                    inputHint="code"
                    required
-                    value="${first(provider?.accessCodeValidity, "minutes=1")}"
+                    value="${provider?.accessCodeValidity ?? "minutes=1"}"
                    .bighelp=${html`<p class="pf-c-form__helper-text">
                            ${msg("Configure how long access codes are valid for.")}
                        </p>
@ -267,7 +264,7 @@ export function renderForm(
                <ak-text-input
                    name="accessTokenValidity"
                    label=${msg("Access Token validity")}
-                    value="${first(provider?.accessTokenValidity, "minutes=5")}"
+                    value="${provider?.accessTokenValidity ?? "minutes=5"}"
                    inputHint="code"
                    required
                    .bighelp=${html` <p class="pf-c-form__helper-text">
@ -280,7 +277,7 @@ export function renderForm(
                <ak-text-input
                    name="refreshTokenValidity"
                    label=${msg("Refresh Token validity")}
-                    value="${first(provider?.refreshTokenValidity, "days=30")}"
+                    value="${provider?.refreshTokenValidity ?? "days=30"}"
                    inputHint="code"
                    ?required=${true}
                    .bighelp=${html` <p class="pf-c-form__helper-text">
@ -317,7 +314,7 @@ export function renderForm(
                <ak-switch-input
                    name="includeClaimsInIdToken"
                    label=${msg("Include claims in id_token")}
-                    ?checked=${first(provider?.includeClaimsInIdToken, true)}
+                    ?checked=${provider?.includeClaimsInIdToken ?? true}
                    help=${msg(
                        "Include User claims from scopes in the id_token, for applications that don't access the userinfo endpoint.",
                    )}
--- a/web/src/admin/providers/proxy/ProxyProviderViewPage.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderViewPage.ts
@ -3,7 +3,6 @@ import "@goauthentik/admin/providers/proxy/ProxyProviderForm";
 import "@goauthentik/admin/rbac/ObjectPermissionsPage";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
-import { convertToSlug } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/components/events/ObjectChangelog";
 import MDCaddyStandalone from "@goauthentik/docs/add-secure-apps/providers/proxy/_caddy_standalone.md";
@ -22,6 +21,7 @@ import type { Replacer } from "@goauthentik/elements/ak-mdx";
 import "@goauthentik/elements/buttons/ModalButton";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
+import { formatSlug } from "@goauthentik/elements/router/utils.js";

 import { msg } from "@lit/localize";
 import { CSSResult, PropertyValues, TemplateResult, css, html } from "lit";
@ -183,7 +183,7 @@ export class ProxyProviderViewPage extends AKElement {
        return html`<ak-tabs pageIdentifier="proxy-setup">
            ${servers.map((server) => {
                return html`<section
-                    slot="page-${convertToSlug(server.label)}"
+                    slot="page-${formatSlug(server.label)}"
                    data-tab-title="${server.label}"
                    class="pf-c-page__main-section pf-m-no-padding-mobile ak-markdown-section"
                >
--- a/web/src/admin/providers/rac/EndpointForm.ts
+++ b/web/src/admin/providers/rac/EndpointForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
@ -99,7 +98,7 @@ export class EndpointForm extends ModelForm<Endpoint, string> {
            >
                <input
                    type="number"
-                    value="${first(this.instance?.maximumConnections, 1)}"
+                    value="${this.instance?.maximumConnections ?? 1}"
                    class="pf-c-form-control"
                    required
                />
@ -123,7 +122,7 @@ export class EndpointForm extends ModelForm<Endpoint, string> {
                    <ak-form-element-horizontal label=${msg("Settings")} name="settings">
                        <ak-codemirror
                            mode="yaml"
-                            value="${YAML.stringify(first(this.instance?.settings, {}))}"
+                            value="${YAML.stringify(this.instance?.settings ?? {})}"
                        >
                        </ak-codemirror>
                        <p class="pf-c-form__helper-text">${msg("Connection settings.")}</p>
--- a/web/src/admin/providers/rac/RACProviderForm.ts
+++ b/web/src/admin/providers/rac/RACProviderForm.ts
@ -1,7 +1,6 @@
 import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-branded-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
@ -82,7 +81,7 @@ export class RACProviderFormPage extends ModelForm<RACProvider, number> {
            >
                <input
                    type="text"
-                    value="${first(this.instance?.connectionExpiry, "hours=8")}"
+                    value="${this.instance?.connectionExpiry ?? "hours=8"}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -100,7 +99,7 @@ export class RACProviderFormPage extends ModelForm<RACProvider, number> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.deleteTokenOnDisconnect, false)}
+                        ?checked=${this.instance?.deleteTokenOnDisconnect ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -135,7 +134,7 @@ export class RACProviderFormPage extends ModelForm<RACProvider, number> {
                    <ak-form-element-horizontal label=${msg("Settings")} name="settings">
                        <ak-codemirror
                            mode="yaml"
-                            value="${YAML.stringify(first(this.instance?.settings, {}))}"
+                            value="${YAML.stringify(this.instance?.settings ?? {})}"
                        >
                        </ak-codemirror>
                        <p class="pf-c-form__helper-text">${msg("Connection settings.")}</p>
--- a/web/src/admin/providers/radius/RadiusProviderFormForm.ts
+++ b/web/src/admin/providers/radius/RadiusProviderFormForm.ts
@ -1,6 +1,6 @@
 import "@goauthentik/admin/common/ak-flow-search/ak-branded-flow-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
-import { ascii_letters, digits, first, randomString } from "@goauthentik/common/utils";
+import { ascii_letters, digits, randomString } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@ -78,17 +78,14 @@ export function renderForm(
                    name="sharedSecret"
                    label=${msg("Shared secret")}
                    .errorMessages=${errors?.sharedSecret ?? []}
-                    value=${first(
-                        provider?.sharedSecret,
-                        randomString(128, ascii_letters + digits),
-                    )}
+                    value=${provider?.sharedSecret ?? randomString(128, ascii_letters + digits)}
                    required
                    inputHint="code"
                ></ak-text-input>
                <ak-text-input
                    name="clientNetworks"
                    label=${msg("Client Networks")}
-                    value=${first(provider?.clientNetworks, "0.0.0.0/0, ::/0")}
+                    value=${provider?.clientNetworks ?? "0.0.0.0/0, ::/0"}
                    .errorMessages=${errors?.clientNetworks ?? []}
                    required
                    help=${clientNetworksHelp}
--- a/web/src/admin/providers/scim/SCIMProviderFormForm.ts
+++ b/web/src/admin/providers/scim/SCIMProviderFormForm.ts
@ -1,5 +1,4 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -37,7 +36,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                <ak-text-input
                    name="url"
                    label=${msg("URL")}
-                    value="${first(provider?.url, "")}"
+                    value="${provider?.url ?? ""}"
                    .errorMessages=${errors?.url ?? []}
                    required
                    help=${msg("SCIM base url, usually ends in /v2.")}
@ -96,7 +95,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                        <input
                            class="pf-c-switch__input"
                            type="checkbox"
-                            ?checked=${first(provider?.dryRun, false)}
+                            ?checked=${provider?.dryRun ?? false}
                        />
                        <span class="pf-c-switch__toggle">
                            <span class="pf-c-switch__toggle-icon">
@ -119,7 +118,7 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                <ak-switch-input
                    name="excludeUsersServiceAccount"
                    label=${msg("Exclude service accounts")}
-                    ?checked=${first(provider?.excludeUsersServiceAccount, true)}
+                    ?checked=${provider?.excludeUsersServiceAccount ?? true}
                >
                </ak-switch-input>

--- a/web/src/admin/providers/ssf/SSFProviderFormPage.ts
+++ b/web/src/admin/providers/ssf/SSFProviderFormPage.ts
@ -5,7 +5,6 @@ import {
    oauth2ProvidersSelector,
 } from "@goauthentik/admin/providers/oauth2/OAuth2ProvidersProvider";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider.js";
@ -81,7 +80,7 @@ export class SSFProviderFormPage extends BaseProviderForm<SSFProvider> {
                    >
                        <input
                            type="text"
-                            value="${first(provider?.eventRetention, "days=30")}"
+                            value="${provider?.eventRetention ?? "days=30"}"
                            class="pf-c-form-control"
                            required
                        />
--- a/web/src/admin/rbac/RoleObjectPermissionForm.ts
+++ b/web/src/admin/rbac/RoleObjectPermissionForm.ts
@ -89,19 +89,24 @@ export class RoleObjectPermissionForm extends ModelForm<RoleAssignData, number>
                >
                </ak-search-select>
            </ak-form-element-horizontal>
-            ${this.modelPermissions?.results.map((perm) => {
-                return html` <ak-form-element-horizontal name="permissions.${perm.codename}">
-                    <label class="pf-c-switch">
-                        <input class="pf-c-switch__input" type="checkbox" />
-                        <span class="pf-c-switch__toggle">
-                            <span class="pf-c-switch__toggle-icon">
-                                <i class="fas fa-check" aria-hidden="true"></i>
+            ${this.modelPermissions?.results
+                .filter((perm) => {
+                    const [_app, model] = this.model?.split(".") || "";
+                    return perm.codename !== `add_${model}`;
+                })
+                .map((perm) => {
+                    return html` <ak-form-element-horizontal name="permissions.${perm.codename}">
+                        <label class="pf-c-switch">
+                            <input class="pf-c-switch__input" type="checkbox" />
+                            <span class="pf-c-switch__toggle">
+                                <span class="pf-c-switch__toggle-icon">
+                                    <i class="fas fa-check" aria-hidden="true"></i>
+                                </span>
                            </span>
-                        </span>
-                        <span class="pf-c-switch__label">${perm.name}</span>
-                    </label>
-                </ak-form-element-horizontal>`;
-            })}
+                            <span class="pf-c-switch__label">${perm.name}</span>
+                        </label>
+                    </ak-form-element-horizontal>`;
+                })}
        </form>`;
    }
 }
--- a/web/src/admin/rbac/RoleObjectPermissionTable.ts
+++ b/web/src/admin/rbac/RoleObjectPermissionTable.ts
@ -45,7 +45,7 @@ export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectP
            ordering: "codename",
        });
        modelPermissions.results = modelPermissions.results.filter((value) => {
-            return !value.codename.startsWith("add_");
+            return value.codename !== `add_${this.model?.split(".")[1]}`;
        });
        this.modelPermissions = modelPermissions;
        return perms;
--- a/web/src/admin/sources/kerberos/KerberosSourceForm.ts
+++ b/web/src/admin/sources/kerberos/KerberosSourceForm.ts
@ -6,7 +6,6 @@ import {
    UserMatchingModeToLabel,
 } from "@goauthentik/admin/sources/oauth/utils";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/components/ak-textarea-input";
@ -97,12 +96,12 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
            ></ak-text-input>
            <ak-switch-input
                name="enabled"
-                ?checked=${first(this.instance?.enabled, true)}
+                ?checked=${this.instance?.enabled ?? true}
                label=${msg("Enabled")}
            ></ak-switch-input>
            <ak-switch-input
                name="passwordLoginUpdateInternalPassword"
-                ?checked=${first(this.instance?.passwordLoginUpdateInternalPassword, false)}
+                ?checked=${this.instance?.passwordLoginUpdateInternalPassword ?? false}
                label=${msg("Update internal password on login")}
                help=${msg(
                    "When the user logs in to authentik using this source password backend, update their credentials in authentik.",
@ -110,12 +109,12 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
            ></ak-switch-input>
            <ak-switch-input
                name="syncUsers"
-                ?checked=${first(this.instance?.syncUsers, true)}
+                ?checked=${this.instance?.syncUsers ?? true}
                label=${msg("Sync users")}
            ></ak-switch-input>
            <ak-switch-input
                name="syncUsersPassword"
-                ?checked=${first(this.instance?.syncUsersPassword, true)}
+                ?checked=${this.instance?.syncUsersPassword ?? true}
                label=${msg("User password writeback")}
                help=${msg(
                    "Enable this option to write password changes made in authentik back to Kerberos. Ignored if sync is disabled.",
@ -395,10 +394,8 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                    <ak-text-input
                        name="userPathTemplate"
                        label=${msg("User path")}
-                        value=${first(
-                            this.instance?.userPathTemplate,
-                            "goauthentik.io/sources/%(slug)s",
-                        )}
+                        value=${this.instance?.userPathTemplate ??
+                        "goauthentik.io/sources/%(slug)s"}
                        help=${placeholderHelperText}
                    ></ak-text-input>
                </div>
@ -443,7 +440,7 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                    : html`<ak-form-element-horizontal label=${msg("Icon")} name="icon">
                          <input
                              type="text"
-                              value="${first(this.instance?.icon, "")}"
+                              value="${this.instance?.icon ?? ""}"
                              class="pf-c-form-control"
                          />
                          <p class="pf-c-form__helper-text">${iconHelperText}</p>
--- a/web/src/admin/sources/ldap/LDAPSourceForm.ts
+++ b/web/src/admin/sources/ldap/LDAPSourceForm.ts
@ -2,7 +2,6 @@ import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import { placeholderHelperText } from "@goauthentik/admin/helperText";
 import { BaseSourceForm } from "@goauthentik/admin/sources/BaseSourceForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -67,7 +66,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.enabled, true)}
+                        ?checked=${this.instance?.enabled ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -82,7 +81,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.passwordLoginUpdateInternalPassword, false)}
+                        ?checked=${this.instance?.passwordLoginUpdateInternalPassword ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -104,7 +103,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.syncUsers, true)}
+                        ?checked=${this.instance?.syncUsers ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -119,7 +118,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.syncUsersPassword, true)}
+                        ?checked=${this.instance?.syncUsersPassword ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -139,7 +138,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.syncGroups, true)}
+                        ?checked=${this.instance?.syncGroups ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -173,7 +172,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.startTls, true)}
+                                ?checked=${this.instance?.startTls ?? true}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -191,7 +190,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.sni, false)}
+                                ?checked=${this.instance?.sni ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -335,10 +334,8 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                    <ak-form-element-horizontal label=${msg("User path")} name="userPathTemplate">
                        <input
                            type="text"
-                            value="${first(
-                                this.instance?.userPathTemplate,
-                                "goauthentik.io/sources/%(slug)s",
-                            )}"
+                            value="${this.instance?.userPathTemplate ??
+                            "goauthentik.io/sources/%(slug)s"}"
                            class="pf-c-form-control"
                        />
                        <p class="pf-c-form__helper-text">${placeholderHelperText}</p>
@ -421,7 +418,7 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.lookupGroupsFromUser, false)}
+                                ?checked=${this.instance?.lookupGroupsFromUser ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/sources/oauth/OAuthSourceForm.ts
+++ b/web/src/admin/sources/oauth/OAuthSourceForm.ts
@ -6,7 +6,6 @@ import {
    UserMatchingModeToLabel,
 } from "@goauthentik/admin/sources/oauth/utils";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
@ -136,11 +135,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                >
                    <input
                        type="text"
-                        value="${first(
-                            this.instance?.authorizationUrl,
-                            this.providerType.authorizationUrl,
-                            "",
-                        )}"
+                        value="${this.instance?.authorizationUrl ??
+                        this.providerType.authorizationUrl ??
+                        ""}"
                        class="pf-c-form-control pf-m-monospace"
                        autocomplete="off"
                        spellcheck="false"
@ -152,11 +149,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                <ak-form-element-horizontal label=${msg("Access token URL")} name="accessTokenUrl">
                    <input
                        type="url"
-                        value="${first(
-                            this.instance?.accessTokenUrl,
-                            this.providerType.accessTokenUrl,
-                            "",
-                        )}"
+                        value="${this.instance?.accessTokenUrl ??
+                        this.providerType.accessTokenUrl ??
+                        ""}"
                        class="pf-c-form-control pf-m-monospace"
                        autocomplete="off"
                        spellcheck="false"
@ -168,11 +163,7 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                <ak-form-element-horizontal label=${msg("Profile URL")} name="profileUrl">
                    <input
                        type="url"
-                        value="${first(
-                            this.instance?.profileUrl,
-                            this.providerType.profileUrl,
-                            "",
-                        )}"
+                        value="${this.instance?.profileUrl ?? this.providerType.profileUrl ?? ""}"
                        class="pf-c-form-control pf-m-monospace"
                        autocomplete="off"
                        spellcheck="false"
@ -188,7 +179,7 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                      >
                          <input
                              type="url"
-                              value="${first(this.instance?.requestTokenUrl, "")}"
+                              value="${this.instance?.requestTokenUrl ?? ""}"
                              class="pf-c-form-control pf-m-monospace"
                              autocomplete="off"
                          />
@ -207,11 +198,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                      >
                          <input
                              type="url"
-                              value="${first(
-                                  this.instance?.oidcWellKnownUrl,
-                                  this.providerType.oidcWellKnownUrl,
-                                  "",
-                              )}"
+                              value="${this.instance?.oidcWellKnownUrl ??
+                              this.providerType.oidcWellKnownUrl ??
+                              ""}"
                              class="pf-c-form-control pf-m-monospace"
                              autocomplete="off"
                              spellcheck="false"
@ -231,11 +220,9 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                          >
                              <input
                                  type="url"
-                                  value="${first(
-                                      this.instance?.oidcJwksUrl,
-                                      this.providerType.oidcJwksUrl,
-                                      "",
-                                  )}"
+                                  value="${this.instance?.oidcJwksUrl ??
+                                  this.providerType.oidcJwksUrl ??
+                                  ""}"
                                  class="pf-c-form-control pf-m-monospace"
                                  autocomplete="off"
                                  spellcheck="false"
@ -249,7 +236,7 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                          <ak-form-element-horizontal label=${msg("OIDC JWKS")} name="oidcJwks">
                              <ak-codemirror
                                  mode=${CodeMirrorMode.JavaScript}
-                                  value="${JSON.stringify(first(this.instance?.oidcJwks, {}))}"
+                                  value="${JSON.stringify(this.instance?.oidcJwks ?? {})}"
                              >
                              </ak-codemirror>
                              <p class="pf-c-form__helper-text">${msg("Raw JWKS data.")}</p>
@ -296,7 +283,7 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.enabled, true)}
+                        ?checked=${this.instance?.enabled ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -381,10 +368,7 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
            <ak-form-element-horizontal label=${msg("User path")} name="userPathTemplate">
                <input
                    type="text"
-                    value="${first(
-                        this.instance?.userPathTemplate,
-                        "goauthentik.io/sources/%(slug)s",
-                    )}"
+                    value="${this.instance?.userPathTemplate ?? "goauthentik.io/sources/%(slug)s"}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -432,7 +416,7 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                : html`<ak-form-element-horizontal label=${msg("Icon")} name="icon">
                      <input
                          type="text"
-                          value="${first(this.instance?.icon, "")}"
+                          value="${this.instance?.icon ?? ""}"
                          class="pf-c-form-control pf-m-monospace"
                          autocomplete="off"
                          spellcheck="false"
@ -474,7 +458,7 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                    <ak-form-element-horizontal label=${msg("Scopes")} name="additionalScopes">
                        <input
                            type="text"
-                            value="${first(this.instance?.additionalScopes, "")}"
+                            value="${this.instance?.additionalScopes ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
--- a/web/src/admin/sources/plex/PlexSourceForm.ts
+++ b/web/src/admin/sources/plex/PlexSourceForm.ts
@ -7,7 +7,7 @@ import {
 } from "@goauthentik/admin/sources/oauth/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex";
-import { ascii_letters, digits, first, randomString } from "@goauthentik/common/utils";
+import { ascii_letters, digits, randomString } from "@goauthentik/common/utils";
 import {
    CapabilitiesEnum,
    WithCapabilitiesConfig,
@ -137,7 +137,7 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.allowFriends, true)}
+                        ?checked=${this.instance?.allowFriends ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -198,7 +198,7 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.enabled, true)}
+                        ?checked=${this.instance?.enabled ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -283,10 +283,7 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
            <ak-form-element-horizontal label=${msg("User path")} name="userPathTemplate">
                <input
                    type="text"
-                    value="${first(
-                        this.instance?.userPathTemplate,
-                        "goauthentik.io/sources/%(slug)s",
-                    )}"
+                    value="${this.instance?.userPathTemplate ?? "goauthentik.io/sources/%(slug)s"}"
                    class="pf-c-form-control"
                />
                <p class="pf-c-form__helper-text">${placeholderHelperText}</p>
@ -332,7 +329,7 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                : html`<ak-form-element-horizontal label=${msg("Icon")} name="icon">
                      <input
                          type="text"
-                          value="${first(this.instance?.icon, "")}"
+                          value="${this.instance?.icon ?? ""}"
                          class="pf-c-form-control"
                      />
                      <p class="pf-c-form__helper-text">${iconHelperText}</p>
@ -347,7 +344,7 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.clientId, "")}"
+                            value="${this.instance?.clientId ?? ""}"
                            class="pf-c-form-control"
                            required
                        />
--- a/web/src/admin/sources/saml/SAMLSourceForm.ts
+++ b/web/src/admin/sources/saml/SAMLSourceForm.ts
@ -7,7 +7,6 @@ import {
    UserMatchingModeToLabel,
 } from "@goauthentik/admin/sources/oauth/utils";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import {
    CapabilitiesEnum,
    WithCapabilitiesConfig,
@ -105,7 +104,7 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.enabled, true)}
+                        ?checked=${this.instance?.enabled ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -228,7 +227,7 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                : html`<ak-form-element-horizontal label=${msg("Icon")} name="icon">
                      <input
                          type="text"
-                          value="${first(this.instance?.icon, "")}"
+                          value="${this.instance?.icon ?? ""}"
                          class="pf-c-form-control"
                      />
                      <p class="pf-c-form__helper-text">${iconHelperText}</p>
@ -334,7 +333,7 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.allowIdpInitiated, false)}
+                                ?checked=${this.instance?.allowIdpInitiated ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -397,10 +396,8 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                    <ak-form-element-horizontal label=${msg("User path")} name="userPathTemplate">
                        <input
                            type="text"
-                            value="${first(
-                                this.instance?.userPathTemplate,
-                                "goauthentik.io/sources/%(slug)s",
-                            )}"
+                            value="${this.instance?.userPathTemplate ??
+                            "goauthentik.io/sources/%(slug)s"}"
                            class="pf-c-form-control"
                        />
                        <p class="pf-c-form__helper-text">${placeholderHelperText}</p>
--- a/web/src/admin/sources/scim/SCIMSourceForm.ts
+++ b/web/src/admin/sources/scim/SCIMSourceForm.ts
@ -1,7 +1,6 @@
 import { placeholderHelperText } from "@goauthentik/admin/helperText";
 import { BaseSourceForm } from "@goauthentik/admin/sources/BaseSourceForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -63,7 +62,7 @@ export class SCIMSourceForm extends BaseSourceForm<SCIMSource> {
                    <input
                        type="checkbox"
                        class="pf-c-check__input"
-                        ?checked=${first(this.instance?.enabled, true)}
+                        ?checked=${this.instance?.enabled ?? true}
                    />
                    <label class="pf-c-check__label"> ${msg("Enabled")} </label>
                </div>
@ -111,10 +110,8 @@ export class SCIMSourceForm extends BaseSourceForm<SCIMSource> {
                    <ak-form-element-horizontal label=${msg("User path")} name="userPathTemplate">
                        <input
                            type="text"
-                            value="${first(
-                                this.instance?.userPathTemplate,
-                                "goauthentik.io/sources/%(slug)s",
-                            )}"
+                            value="${this.instance?.userPathTemplate ??
+                            "goauthentik.io/sources/%(slug)s"}"
                            class="pf-c-form-control"
                        />
                        <p class="pf-c-form__helper-text">${placeholderHelperText}</p>
--- a/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
+++ b/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
@ -1,7 +1,6 @@
 import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@ -50,7 +49,7 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -62,7 +61,7 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.friendlyName, "")}"
+                    value="${this.instance?.friendlyName ?? ""}"
                    class="pf-c-form-control"
                />
                <p class="pf-c-form__helper-text">
@ -78,7 +77,7 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.apiHostname, "")}"
+                    value="${this.instance?.apiHostname ?? ""}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -95,7 +94,7 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.clientId, "")}"
+                            value="${this.instance?.clientId ?? ""}"
                            class="pf-c-form-control"
                            required
                        />
@ -132,7 +131,7 @@ export class AuthenticatorDuoStageForm extends BaseStageForm<AuthenticatorDuoSta
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.adminIntegrationKey, "")}"
+                            value="${this.instance?.adminIntegrationKey ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
--- a/web/src/admin/stages/authenticator_email/AuthenticatorEmailStageForm.ts
+++ b/web/src/admin/stages/authenticator_email/AuthenticatorEmailStageForm.ts
@ -1,7 +1,6 @@
 import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/Radio";
@ -65,7 +64,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                <ak-form-element-horizontal label=${msg("SMTP Port")} ?required=${true} name="port">
                    <input
                        type="number"
-                        value="${first(this.instance?.port, 25)}"
+                        value="${this.instance?.port ?? 25}"
                        class="pf-c-form-control"
                        required
                    />
@ -89,7 +88,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                        <input
                            class="pf-c-switch__input"
                            type="checkbox"
-                            ?checked=${first(this.instance?.useTls, true)}
+                            ?checked=${this.instance?.useTls ?? true}
                        />
                        <span class="pf-c-switch__toggle">
                            <span class="pf-c-switch__toggle-icon">
@ -104,7 +103,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                        <input
                            class="pf-c-switch__input"
                            type="checkbox"
-                            ?checked=${first(this.instance?.useSsl, false)}
+                            ?checked=${this.instance?.useSsl ?? false}
                        />
                        <span class="pf-c-switch__toggle">
                            <span class="pf-c-switch__toggle-icon">
@ -121,7 +120,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                >
                    <input
                        type="number"
-                        value="${first(this.instance?.timeout, 30)}"
+                        value="${this.instance?.timeout ?? 30}"
                        class="pf-c-form-control"
                        required
                    />
@ -150,7 +149,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -162,7 +161,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
            >
                <input
                    type="text"
-                    value="${first(this.instance?.friendlyName, "")}"
+                    value="${this.instance?.friendlyName ?? ""}"
                    class="pf-c-form-control"
                />
                <p class="pf-c-form__helper-text">
@ -176,7 +175,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.useGlobalSettings, true)}
+                        ?checked=${this.instance?.useGlobalSettings ?? true}
                        @change=${(ev: Event) => {
                            const target = ev.target as HTMLInputElement;
                            this.showConnectionSettings = !target.checked;
@ -206,7 +205,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.subject, "authentik Sign-in code")}"
+                            value="${this.instance?.subject ?? "authentik Sign-in code"}"
                            class="pf-c-form-control"
                            required
                        />
@ -221,7 +220,7 @@ export class AuthenticatorEmailStageForm extends BaseStageForm<AuthenticatorEmai
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.tokenExpiry, "minutes=15")}"
+                            value="${this.instance?.tokenExpiry ?? "minutes=15"}"
                            class="pf-c-form-control"
                            required
                        />
--- a/web/src/admin/stages/authenticator_endpoint_gdtc/AuthenticatorEndpointGDTCStageForm.ts
+++ b/web/src/admin/stages/authenticator_endpoint_gdtc/AuthenticatorEndpointGDTCStageForm.ts
@ -1,6 +1,5 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/FormGroup";
@ -52,7 +51,7 @@ export class AuthenticatorEndpointGDTCStageForm extends BaseStageForm<Authentica
            <ak-form-element-horizontal label=${msg("Name")} required name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -67,7 +66,7 @@ export class AuthenticatorEndpointGDTCStageForm extends BaseStageForm<Authentica
                    >
                        <ak-codemirror
                            mode=${CodeMirrorMode.JavaScript}
-                            .value="${first(this.instance?.credentials, {})}"
+                            .value="${this.instance?.credentials ?? {}}"
                        ></ak-codemirror>
                        <p class="pf-c-form__helper-text">
                            ${msg("Google Cloud credentials file.")}
--- a/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
+++ b/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
@ -1,7 +1,6 @@
 import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/Radio";
@ -66,7 +65,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.accountSid, "")}"
+                    value="${this.instance?.accountSid ?? ""}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -83,7 +82,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.auth, "")}"
+                    value="${this.instance?.auth ?? ""}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -129,7 +128,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.accountSid, "")}"
+                    value="${this.instance?.accountSid ?? ""}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -146,7 +145,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.auth, "")}"
+                    value="${this.instance?.auth ?? ""}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -164,7 +163,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.authPassword, "")}"
+                    value="${this.instance?.authPassword ?? ""}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -215,7 +214,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -227,7 +226,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.friendlyName, "")}"
+                    value="${this.instance?.friendlyName ?? ""}"
                    class="pf-c-form-control"
                />
                <p class="pf-c-form__helper-text">
@ -272,7 +271,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.fromNumber, "")}"
+                            value="${this.instance?.fromNumber ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
@ -290,7 +289,7 @@ export class AuthenticatorSMSStageForm extends BaseStageForm<AuthenticatorSMSSta
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.verifyOnly, false)}
+                                ?checked=${this.instance?.verifyOnly ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
+++ b/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
@ -1,7 +1,6 @@
 import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";

@ -48,7 +47,7 @@ export class AuthenticatorStaticStageForm extends BaseStageForm<AuthenticatorSta
            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -60,7 +59,7 @@ export class AuthenticatorStaticStageForm extends BaseStageForm<AuthenticatorSta
            >
                <input
                    type="text"
-                    value="${first(this.instance?.friendlyName, "")}"
+                    value="${this.instance?.friendlyName ?? ""}"
                    class="pf-c-form-control"
                />
                <p class="pf-c-form__helper-text">
@ -79,7 +78,7 @@ export class AuthenticatorStaticStageForm extends BaseStageForm<AuthenticatorSta
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.tokenCount, 6)}"
+                            value="${this.instance?.tokenCount ?? 6}"
                            class="pf-c-form-control"
                            required
                        />
@ -96,7 +95,7 @@ export class AuthenticatorStaticStageForm extends BaseStageForm<AuthenticatorSta
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.tokenLength, 12)}"
+                            value="${this.instance?.tokenLength ?? 12}"
                            class="pf-c-form-control"
                            required
                        />
--- a/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
+++ b/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
@ -1,7 +1,6 @@
 import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@ -50,7 +49,7 @@ export class AuthenticatorTOTPStageForm extends BaseStageForm<AuthenticatorTOTPS
            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -62,7 +61,7 @@ export class AuthenticatorTOTPStageForm extends BaseStageForm<AuthenticatorTOTPS
            >
                <input
                    type="text"
-                    value="${first(this.instance?.friendlyName, "")}"
+                    value="${this.instance?.friendlyName ?? ""}"
                    class="pf-c-form-control"
                />
                <p class="pf-c-form__helper-text">
--- a/web/src/admin/stages/authenticator_webauthn/AuthenticatorWebAuthnStageForm.ts
+++ b/web/src/admin/stages/authenticator_webauthn/AuthenticatorWebAuthnStageForm.ts
@ -2,7 +2,6 @@ import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { deviceTypeRestrictionPair } from "@goauthentik/admin/stages/authenticator_webauthn/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider";
 import { DataProvision } from "@goauthentik/elements/ak-dual-select/types";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -58,7 +57,7 @@ export class AuthenticatorWebAuthnStageForm extends BaseStageForm<AuthenticatorW
            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -70,7 +69,7 @@ export class AuthenticatorWebAuthnStageForm extends BaseStageForm<AuthenticatorW
            >
                <input
                    type="text"
-                    value="${first(this.instance?.friendlyName, "")}"
+                    value="${this.instance?.friendlyName ?? ""}"
                    class="pf-c-form-control"
                />
                <p class="pf-c-form__helper-text">
--- a/web/src/admin/stages/captcha/CaptchaStageForm.ts
+++ b/web/src/admin/stages/captcha/CaptchaStageForm.ts
@ -1,6 +1,5 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-number-input";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/elements/forms/FormGroup";
@ -118,7 +117,7 @@ export class CaptchaStageForm extends BaseStageForm<CaptchaStage> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.errorOnInvalidScore, true)}
+                                ?checked=${this.instance?.errorOnInvalidScore ?? true}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/stages/dummy/DummyStageForm.ts
+++ b/web/src/admin/stages/dummy/DummyStageForm.ts
@ -1,6 +1,5 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/HorizontalFormElement";

 import { msg } from "@lit/localize";
@ -50,7 +49,7 @@ export class DummyStageForm extends BaseStageForm<DummyStage> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.throwError, false)}
+                        ?checked=${this.instance?.throwError ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/stages/email/EmailStageForm.ts
+++ b/web/src/admin/stages/email/EmailStageForm.ts
@ -1,6 +1,5 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
@ -62,7 +61,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                <ak-form-element-horizontal label=${msg("SMTP Port")} ?required=${true} name="port">
                    <input
                        type="number"
-                        value="${first(this.instance?.port, 25)}"
+                        value="${this.instance?.port ?? 25}"
                        class="pf-c-form-control"
                        required
                    />
@ -86,7 +85,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                        <input
                            class="pf-c-switch__input"
                            type="checkbox"
-                            ?checked=${first(this.instance?.useTls, true)}
+                            ?checked=${this.instance?.useTls ?? true}
                        />
                        <span class="pf-c-switch__toggle">
                            <span class="pf-c-switch__toggle-icon">
@ -101,7 +100,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                        <input
                            class="pf-c-switch__input"
                            type="checkbox"
-                            ?checked=${first(this.instance?.useSsl, false)}
+                            ?checked=${this.instance?.useSsl ?? false}
                        />
                        <span class="pf-c-switch__toggle">
                            <span class="pf-c-switch__toggle-icon">
@ -118,7 +117,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                >
                    <input
                        type="number"
-                        value="${first(this.instance?.timeout, 30)}"
+                        value="${this.instance?.timeout ?? 30}"
                        class="pf-c-form-control"
                        required
                    />
@ -161,7 +160,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.activateUserOnSuccess, true)}
+                                ?checked=${this.instance?.activateUserOnSuccess ?? true}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -183,7 +182,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.useGlobalSettings, true)}
+                                ?checked=${this.instance?.useGlobalSettings ?? true}
                                @change=${(ev: Event) => {
                                    const target = ev.target as HTMLInputElement;
                                    this.showConnectionSettings = !target.checked;
@ -209,7 +208,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.tokenExpiry, "minutes=30")}"
+                            value="${this.instance?.tokenExpiry ?? "minutes=30"}"
                            class="pf-c-form-control"
                            required
                        />
@ -225,7 +224,7 @@ export class EmailStageForm extends BaseStageForm<EmailStage> {
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.subject, "authentik")}"
+                            value="${this.instance?.subject ?? "authentik"}"
                            class="pf-c-form-control"
                            required
                        />
--- a/web/src/admin/stages/identification/IdentificationStageForm.ts
+++ b/web/src/admin/stages/identification/IdentificationStageForm.ts
@ -1,7 +1,7 @@
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first, groupBy } from "@goauthentik/common/utils";
+import { groupBy } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-switch-input.js";
 import "@goauthentik/elements/ak-checkbox-group/ak-checkbox-group.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
@ -162,7 +162,7 @@ export class IdentificationStageForm extends BaseStageForm<IdentificationStage>
                    <ak-switch-input
                        name="caseInsensitiveMatching"
                        label=${msg("Case insensitive matching")}
-                        ?checked=${first(this.instance?.caseInsensitiveMatching, true)}
+                        ?checked=${this.instance?.caseInsensitiveMatching ?? true}
                        help=${msg(
                            "When enabled, user fields are matched regardless of their casing.",
                        )}
@ -170,7 +170,7 @@ export class IdentificationStageForm extends BaseStageForm<IdentificationStage>
                    <ak-switch-input
                        name="pretendUserExists"
                        label=${msg("Pretend user exists")}
-                        ?checked=${first(this.instance?.pretendUserExists, true)}
+                        ?checked=${this.instance?.pretendUserExists ?? true}
                        help=${msg(
                            "When enabled, the stage will always accept the given user identifier and continue.",
                        )}
@ -178,7 +178,7 @@ export class IdentificationStageForm extends BaseStageForm<IdentificationStage>
                    <ak-switch-input
                        name="showMatchedUser"
                        label=${msg("Show matched user")}
-                        ?checked=${first(this.instance?.showMatchedUser, true)}
+                        ?checked=${this.instance?.showMatchedUser ?? true}
                        help=${msg(
                            "When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.",
                        )}
@ -218,7 +218,7 @@ export class IdentificationStageForm extends BaseStageForm<IdentificationStage>
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.showSourceLabels, false)}
+                                ?checked=${this.instance?.showSourceLabels ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/stages/invitation/InvitationForm.ts
+++ b/web/src/admin/stages/invitation/InvitationForm.ts
@ -1,7 +1,6 @@
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { dateTimeLocal } from "@goauthentik/common/temporal";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -63,7 +62,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
                    data-type="datetime-local"
                    class="pf-c-form-control"
                    required
-                    value="${dateTimeLocal(first(this.instance?.expires, new Date()))}"
+                    value="${dateTimeLocal(this.instance?.expires ?? new Date())}"
                />
            </ak-form-element-horizontal>
            <ak-form-element-horizontal label=${msg("Flow")} name="flow">
@ -80,7 +79,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
            <ak-form-element-horizontal label=${msg("Custom attributes")} name="fixedData">
                <ak-codemirror
                    mode=${CodeMirrorMode.YAML}
-                    value="${YAML.stringify(first(this.instance?.fixedData, {}))}"
+                    value="${YAML.stringify(this.instance?.fixedData ?? {})}"
                >
                </ak-codemirror>
                <p class="pf-c-form__helper-text">
@ -94,7 +93,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.singleUse, true)}
+                        ?checked=${this.instance?.singleUse ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/stages/invitation/InvitationStageForm.ts
+++ b/web/src/admin/stages/invitation/InvitationStageForm.ts
@ -1,6 +1,5 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";

@ -51,10 +50,7 @@ export class InvitationStageForm extends BaseStageForm<InvitationStage> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(
-                                    this.instance?.continueFlowWithoutInvitation,
-                                    false,
-                                )}
+                                ?checked=${this.instance?.continueFlowWithoutInvitation ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/stages/prompt/PromptForm.ts
+++ b/web/src/admin/stages/prompt/PromptForm.ts
@ -1,6 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { parseAPIResponseError, pluckErrorDetail } from "@goauthentik/common/errors/network";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -269,7 +268,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.required, false)}
+                        ?checked=${this.instance?.required ?? false}
                        @change=${() => {
                            this._shouldRefresh = true;
                        }}
@ -287,7 +286,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.placeholderExpression, false)}
+                        ?checked=${this.instance?.placeholderExpression ?? false}
                        @change=${() => {
                            this._shouldRefresh = true;
                        }}
@ -330,7 +329,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.initialValueExpression, false)}
+                        ?checked=${this.instance?.initialValueExpression ?? false}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -376,7 +375,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
            <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
                <input
                    type="number"
-                    value="${first(this.instance?.order, 0)}"
+                    value="${this.instance?.order ?? 0}"
                    class="pf-c-form-control"
                    required
                />
--- a/web/src/admin/stages/user_login/UserLoginStageForm.ts
+++ b/web/src/admin/stages/user_login/UserLoginStageForm.ts
@ -1,6 +1,5 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/Alert";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -38,7 +37,7 @@ export class UserLoginStageForm extends BaseStageForm<UserLoginStage> {
            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                <input
                    type="text"
-                    value="${first(this.instance?.name, "")}"
+                    value="${this.instance?.name ?? ""}"
                    class="pf-c-form-control"
                    required
                />
@ -53,7 +52,7 @@ export class UserLoginStageForm extends BaseStageForm<UserLoginStage> {
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.sessionDuration, "seconds=0")}"
+                            value="${this.instance?.sessionDuration ?? "seconds=0"}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
@ -84,7 +83,7 @@ export class UserLoginStageForm extends BaseStageForm<UserLoginStage> {
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.rememberMeOffset, "seconds=0")}"
+                            value="${this.instance?.rememberMeOffset ?? "seconds=0"}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
@ -170,7 +169,7 @@ export class UserLoginStageForm extends BaseStageForm<UserLoginStage> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.terminateOtherSessions, false)}
+                                ?checked=${this.instance?.terminateOtherSessions ?? false}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
--- a/web/src/admin/stages/user_write/UserWriteStageForm.ts
+++ b/web/src/admin/stages/user_write/UserWriteStageForm.ts
@ -1,7 +1,6 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import { UserCreationModeEnum } from "@goauthentik/api/dist/models/UserCreationModeEnum";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/Radio";
@ -95,7 +94,7 @@ export class UserWriteStageForm extends BaseStageForm<UserWriteStage> {
                            <input
                                class="pf-c-switch__input"
                                type="checkbox"
-                                ?checked=${first(this.instance?.createUsersAsInactive, true)}
+                                ?checked=${this.instance?.createUsersAsInactive ?? true}
                            />
                            <span class="pf-c-switch__toggle">
                                <span class="pf-c-switch__toggle-icon">
@ -149,7 +148,7 @@ export class UserWriteStageForm extends BaseStageForm<UserWriteStage> {
                    >
                        <input
                            type="text"
-                            value="${first(this.instance?.userPathTemplate, "")}"
+                            value="${this.instance?.userPathTemplate ?? ""}"
                            class="pf-c-form-control pf-m-monospace"
                            autocomplete="off"
                            spellcheck="false"
--- a/web/src/admin/tokens/TokenForm.ts
+++ b/web/src/admin/tokens/TokenForm.ts
@ -1,6 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { dateTimeLocal } from "@goauthentik/common/temporal";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -50,7 +49,7 @@ export class TokenForm extends ModelForm<Token, string> {
            <input
                type="datetime-local"
                data-type="datetime-local"
-                value="${dateTimeLocal(first(this.instance?.expires, new Date()))}"
+                value="${dateTimeLocal(this.instance?.expires ?? new Date())}"
                class="pf-c-form-control"
            />
        </ak-form-element-horizontal>`;
@ -64,7 +63,7 @@ export class TokenForm extends ModelForm<Token, string> {
            >
                <input
                    type="text"
-                    value="${first(this.instance?.identifier, "")}"
+                    value="${this.instance?.identifier ?? ""}"
                    class="pf-c-form-control pf-m-monospace"
                    autocomplete="off"
                    spellcheck="false"
@ -123,7 +122,7 @@ export class TokenForm extends ModelForm<Token, string> {
            <ak-form-element-horizontal label=${msg("Description")} name="description">
                <input
                    type="text"
-                    value="${first(this.instance?.description, "")}"
+                    value="${this.instance?.description ?? ""}"
                    class="pf-c-form-control"
                />
            </ak-form-element-horizontal>
@ -132,7 +131,7 @@ export class TokenForm extends ModelForm<Token, string> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.expiring, true)}
+                        ?checked=${this.instance?.expiring ?? true}
                        @change=${(ev: Event) => {
                            const el = ev.target as HTMLInputElement;
                            this.showExpiry = el.checked;
--- a/web/src/admin/users/UserForm.ts
+++ b/web/src/admin/users/UserForm.ts
@ -1,6 +1,5 @@
 import "@goauthentik/admin/users/GroupSelectModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@ -159,7 +158,7 @@ export class UserForm extends ModelForm<User, number> {
                    <input
                        class="pf-c-switch__input"
                        type="checkbox"
-                        ?checked=${first(this.instance?.isActive, true)}
+                        ?checked=${this.instance?.isActive ?? true}
                    />
                    <span class="pf-c-switch__toggle">
                        <span class="pf-c-switch__toggle-icon">
@ -177,7 +176,7 @@ export class UserForm extends ModelForm<User, number> {
            <ak-form-element-horizontal label=${msg("Path")} ?required=${true} name="path">
                <input
                    type="text"
-                    value="${first(this.instance?.path, this.defaultPath)}"
+                    value="${this.instance?.path ?? this.defaultPath}"
                    class="pf-c-form-control"
                    required
                />
@ -190,7 +189,7 @@ export class UserForm extends ModelForm<User, number> {
                <ak-codemirror
                    mode=${CodeMirrorMode.YAML}
                    value="${YAML.stringify(
-                        first(this.instance?.attributes, UserForm.defaultUserAttributes),
+                        this.instance?.attributes ?? UserForm.defaultUserAttributes,
                    )}"
                >
                </ak-codemirror>
--- a/web/src/admin/users/UserListPage.ts
+++ b/web/src/admin/users/UserListPage.ts
@ -1,4 +1,4 @@
-import { AdminInterface } from "@goauthentik/admin/AdminInterface";
+import type { AdminInterface } from "@goauthentik/admin/AdminInterface/index.entrypoint.js";
 import "@goauthentik/admin/users/ServiceAccountForm";
 import "@goauthentik/admin/users/UserActiveForm";
 import "@goauthentik/admin/users/UserForm";
--- a/web/src/common/purify.ts
+++ b/web/src/common/purify.ts
@ -1,26 +1,110 @@
 import type { Config as DOMPurifyConfig } from "dompurify";
 import DOMPurify from "dompurify";
+import { trustedTypes } from "trusted-types";

-import { render } from "@lit-labs/ssr";
-import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
-import { TemplateResult, html } from "lit";
+import { render } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { until } from "lit/directives/until.js";

+/**
+ * Trusted types policy that escapes HTML content in place.
+ *
+ * @see {@linkcode SanitizedTrustPolicy} to strip HTML content.
+ *
+ * @returns {TrustedHTML} All HTML content, escaped.
+ */
+export const EscapeTrustPolicy = trustedTypes.createPolicy("authentik-escape", {
+    createHTML: (untrustedHTML: string) => {
+        return DOMPurify.sanitize(untrustedHTML, {
+            RETURN_TRUSTED_TYPE: false,
+        });
+    },
+});
+
+/**
+ * Trusted types policy, stripping all HTML content.
+ *
+ * @returns {TrustedHTML} Text content only, all HTML tags stripped.
+ */
+export const SanitizedTrustPolicy = trustedTypes.createPolicy("authentik-sanitize", {
+    createHTML: (untrustedHTML: string) => {
+        return DOMPurify.sanitize(untrustedHTML, {
+            RETURN_TRUSTED_TYPE: false,
+            ALLOWED_TAGS: ["#text"],
+        });
+    },
+});
+
+/**
+ * Trusted types policy, allowing a minimal set of _safe_ HTML tags supplied by
+ * a trusted source, such as the brand API.
+ */
+export const BrandedHTMLPolicy = trustedTypes.createPolicy("authentik-restrict", {
+    createHTML: (untrustedHTML: string) => {
+        return DOMPurify.sanitize(untrustedHTML, {
+            RETURN_TRUSTED_TYPE: false,
+            FORBID_TAGS: [
+                "script",
+                "style",
+                "iframe",
+                "link",
+                "object",
+                "embed",
+                "applet",
+                "meta",
+                "base",
+                "form",
+                "input",
+                "textarea",
+                "select",
+                "button",
+            ],
+            FORBID_ATTR: [
+                "onerror",
+                "onclick",
+                "onload",
+                "onmouseover",
+                "onmouseout",
+                "onmouseup",
+                "onmousedown",
+                "onfocus",
+                "onblur",
+                "onsubmit",
+            ],
+        });
+    },
+});
+
+export type AuthentikTrustPolicy =
+    | typeof EscapeTrustPolicy
+    | typeof SanitizedTrustPolicy
+    | typeof BrandedHTMLPolicy;
+
+/**
+ * Sanitize an untrusted HTML string using a trusted types policy.
+ */
+export function sanitizeHTML(trustPolicy: AuthentikTrustPolicy, untrustedHTML: string) {
+    return unsafeHTML(trustPolicy.createHTML(untrustedHTML).toString());
+}
+
+/**
+ * DOMPurify configuration for strict sanitization.
+ *
+ * This configuration only allows text nodes and disallows all HTML tags.
+ */
 export const DOM_PURIFY_STRICT = {
    ALLOWED_TAGS: ["#text"],
 } as const satisfies DOMPurifyConfig;

-export async function renderStatic(input: TemplateResult): Promise<string> {
-    return await collectResult(render(input));
-}
+/**
+ * Render untrusted HTML to a string without escaping it.
+ *
+ * @returns {string} The rendered HTML string.
+ */
+export function renderStaticHTMLUnsafe(untrustedHTML: unknown): string {
+    const container = document.createElement("html");
+    render(untrustedHTML, container);

-export function purify(input: TemplateResult): TemplateResult {
-    return html`${until(
-        (async () => {
-            const rendered = await renderStatic(input);
-            const purified = DOMPurify.sanitize(rendered);
-            return html`${unsafeHTML(purified)}`;
-        })(),
-    )}`;
+    const result = container.innerHTML;
+
+    return result;
 }
--- a/web/src/common/sentry.ts
+++ b/web/src/common/sentry.ts
@ -1,6 +1,7 @@
 import { config } from "@goauthentik/common/api/config";
 import { VERSION } from "@goauthentik/common/constants";
 import { me } from "@goauthentik/common/users";
+import { readInterfaceRouteParam } from "@goauthentik/elements/router/utils";
 import {
    ErrorEvent,
    EventHint,
@ -68,7 +69,7 @@ export async function configureSentry(canDoPpi = false): Promise<Config> {
        });
        setTag(TAG_SENTRY_CAPABILITIES, cfg.capabilities.join(","));
        if (window.location.pathname.includes("if/")) {
-            setTag(TAG_SENTRY_COMPONENT, `web/${currentInterface()}`);
+            setTag(TAG_SENTRY_COMPONENT, `web/${readInterfaceRouteParam()}`);
        }
        if (cfg.capabilities.includes(CapabilitiesEnum.CanDebug)) {
            const Spotlight = await import("@spotlightjs/spotlight");
@ -86,13 +87,3 @@ export async function configureSentry(canDoPpi = false): Promise<Config> {
    }
    return cfg;
 }
-
-// Get the interface name from URL
-export function currentInterface(): string {
-    const pathMatches = window.location.pathname.match(/.+if\/(\w+)\//);
-    let currentInterface = "unknown";
-    if (pathMatches && pathMatches.length >= 2) {
-        currentInterface = pathMatches[1];
-    }
-    return currentInterface.toLowerCase();
-}
--- a/web/src/common/styles/authentik.css
+++ b/web/src/common/styles/authentik.css
@ -17,6 +17,13 @@

    /* Minimum width after which the sidebar becomes automatic */
    --ak-sidebar--minimum-auto-width: 80rem;
+
+    /**
+     * The height of the navbar and branded sidebar.
+     * @todo This shouldn't be necessary. The sidebar can instead use a grid layout
+     * ensuring they share the same height.
+     */
+    --ak-navbar--height: 7rem;
 }

@supports selector(::-webkit-scrollbar) {
--- a/web/src/common/stylesheets.ts
+++ b/web/src/common/stylesheets.ts
@ -0,0 +1,223 @@
+/**
+ * @file Stylesheet utilities.
+ */
+import { CSSResult, CSSResultOrNative, ReactiveElement, css } from "lit";
+
+/**
+ * Elements containing adoptable stylesheets.
+ */
+export type StyleSheetParent = Pick<DocumentOrShadowRoot, "adoptedStyleSheets">;
+
+/**
+ * Type-predicate to determine if a given object has adoptable stylesheets.
+ */
+export function isAdoptableStyleSheetParent(input: unknown): input is StyleSheetParent {
+    // Sanity check - Does the input have the right shape?
+
+    if (!input || typeof input !== "object") return false;
+
+    if (!("adoptedStyleSheets" in input) || !input.adoptedStyleSheets) return false;
+
+    if (typeof input.adoptedStyleSheets !== "object") return false;
+
+    // We avoid `Array.isArray` because the adopted stylesheets property
+    // is defined as a proxied array.
+    // All we care about is that it's shaped like an array.
+    if (!("length" in input.adoptedStyleSheets)) return false;
+
+    if (typeof input.adoptedStyleSheets.length !== "number") return false;
+
+    // Finally is the array mutable?
+    return "push" in input.adoptedStyleSheets;
+}
+
+/**
+ * Assert that the given input can adopt stylesheets.
+ */
+export function assertAdoptableStyleSheetParent<T>(
+    input: T,
+): asserts input is T & StyleSheetParent {
+    if (isAdoptableStyleSheetParent(input)) return;
+
+    console.debug("Given input missing `adoptedStyleSheets`", input);
+
+    throw new TypeError("Assertion failed: `adoptedStyleSheets` missing in given input");
+}
+
+export function resolveStyleSheetParent<T extends HTMLElement | DocumentFragment | Document>(
+    renderRoot: T,
+) {
+    const styleRoot = "ShadyDOM" in window ? document : renderRoot;
+
+    assertAdoptableStyleSheetParent(styleRoot);
+
+    return styleRoot;
+}
+
+export type StyleSheetInit = string | CSSResult | CSSStyleSheet;
+
+/**
+ * Given a source of CSS, create a `CSSStyleSheet`.
+ *
+ * @throw {@linkcode TypeError} if the input cannot be converted to a `CSSStyleSheet`
+ *
+ * @remarks
+ *
+ * Storybook's `build` does not currently have a coherent way of importing
+ * CSS-as-text into CSSStyleSheet.
+ *
+ * It works well when Storybook is running in `dev`, but in `build` it fails.
+ * Storied components will have to map their textual CSS imports.
+ */
+export function createStyleSheet(input: string): CSSResult {
+    const inputTemplate = [input] as unknown as TemplateStringsArray;
+
+    const result = css(inputTemplate, []);
+
+    return result;
+}
+
+/**
+ * Given a source of CSS, create a `CSSStyleSheet`.
+ *
+ * @see {@linkcode createStyleSheet}
+ */
+export function normalizeCSSSource(css: string): CSSStyleSheet;
+export function normalizeCSSSource(styleSheet: CSSStyleSheet): CSSStyleSheet;
+export function normalizeCSSSource(cssResult: CSSResult): CSSResult;
+export function normalizeCSSSource(input: StyleSheetInit): CSSResultOrNative;
+export function normalizeCSSSource(input: StyleSheetInit): CSSResultOrNative {
+    if (typeof input === "string") return createStyleSheet(input);
+
+    return input;
+}
+
+/**
+ * Create a `CSSStyleSheet` from the given input.
+ */
+export function createStyleSheetUnsafe(input: StyleSheetInit): CSSStyleSheet {
+    const result = normalizeCSSSource(input);
+    if (result instanceof CSSStyleSheet) return result;
+
+    if (!result.styleSheet) {
+        console.debug(
+            "authentik/common/stylesheets: CSSResult missing styleSheet, returning empty",
+            { result, input },
+        );
+
+        throw new TypeError("Expected a CSSStyleSheet");
+    }
+
+    return result.styleSheet;
+}
+
+/**
+ * Append stylesheet(s) to the given roots.
+ *
+ * @see {@linkcode removeStyleSheet} to remove a stylesheet from a given roots.
+ */
+export function appendStyleSheet(
+    styleParent: StyleSheetParent,
+    ...insertions: CSSStyleSheet[]
+): void {
+    insertions = Array.isArray(insertions) ? insertions : [insertions];
+
+    for (const styleSheetInsertion of insertions) {
+        if (styleParent.adoptedStyleSheets.includes(styleSheetInsertion)) return;
+
+        styleParent.adoptedStyleSheets = [...styleParent.adoptedStyleSheets, styleSheetInsertion];
+    }
+}
+
+/**
+ * Remove a stylesheet from the given roots, matching by referential equality.
+ *
+ * @see {@linkcode appendStyleSheet} to append a stylesheet to a given roots.
+ */
+export function removeStyleSheet(
+    styleParent: StyleSheetParent,
+    ...removals: CSSStyleSheet[]
+): void {
+    const nextAdoptedStyleSheets = styleParent.adoptedStyleSheets.filter(
+        (styleSheet) => !removals.includes(styleSheet),
+    );
+
+    if (nextAdoptedStyleSheets.length === styleParent.adoptedStyleSheets.length) return;
+
+    styleParent.adoptedStyleSheets = nextAdoptedStyleSheets;
+}
+
+/**
+ * Serialize a stylesheet to a string.
+ *
+ * This is useful for debugging or inspecting the contents of a stylesheet.
+ */
+export function serializeStyleSheet(stylesheet: CSSStyleSheet): string {
+    return Array.from(stylesheet.cssRules || [], (rule) => rule.cssText || "").join("\n");
+}
+
+/**
+ * Inspect the adopted stylesheets of a given style parent, serializing them to strings.
+ */
+export function inspectStyleSheets(styleParent: StyleSheetParent): string[] {
+    return styleParent.adoptedStyleSheets.map((styleSheet) => serializeStyleSheet(styleSheet));
+}
+
+interface InspectedStyleSheetEntry {
+    tagName: string;
+    element: ReactiveElement;
+    styles: string[];
+    children?: InspectedStyleSheetEntry[];
+}
+
+/**
+ * Recursively inspect the adopted stylesheets of a given style parent, serializing them to strings.
+ */
+export function inspectStyleSheetTree(element: ReactiveElement): InspectedStyleSheetEntry {
+    const styleParent = resolveStyleSheetParent(element.renderRoot);
+    const styles = inspectStyleSheets(styleParent);
+    const tagName = element.tagName.toLowerCase();
+
+    const treewalker = document.createTreeWalker(element.renderRoot, NodeFilter.SHOW_ELEMENT, {
+        acceptNode(node) {
+            if (node instanceof ReactiveElement) {
+                return NodeFilter.FILTER_ACCEPT;
+            }
+            return NodeFilter.FILTER_SKIP;
+        },
+    });
+    const children: InspectedStyleSheetEntry[] = [];
+    let currentNode: Node | null = treewalker.nextNode();
+    while (currentNode) {
+        const childElement = currentNode as ReactiveElement;
+
+        if (!isAdoptableStyleSheetParent(childElement.renderRoot)) {
+            currentNode = treewalker.nextNode();
+            continue;
+        }
+
+        const childStyles = inspectStyleSheets(childElement.renderRoot);
+
+        children.push({
+            tagName: childElement.tagName.toLowerCase(),
+            element: childElement,
+            styles: childStyles,
+        });
+        currentNode = treewalker.nextNode();
+    }
+
+    return {
+        tagName,
+        element,
+        styles,
+        children,
+    };
+}
+
+if (process.env.NODE_ENV === "development") {
+    Object.assign(window, {
+        inspectStyleSheetTree,
+        serializeStyleSheet,
+        inspectStyleSheets,
+    });
+}
--- a/web/src/common/theme.ts
+++ b/web/src/common/theme.ts
@ -0,0 +1,200 @@
+/**
+ * @file Theme utilities.
+ */
+import { UIConfig } from "@goauthentik/common/ui/config";
+
+import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";
+
+//#region Scheme Types
+
+/**
+ * Valid CSS color scheme values.
+ *
+ * @link {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme | MDN}
+ *
+ * @category CSS
+ */
+export type CSSColorSchemeValue = "dark" | "light" | "auto";
+
+/**
+ * A CSS color scheme value that can be preferred by the user, i.e. not `"auto"`.
+ *
+ * @category CSS
+ */
+export type ResolvedCSSColorSchemeValue = Exclude<CSSColorSchemeValue, "auto">;
+
+//#endregion
+
+//#region UI Theme Types
+
+/**
+ * A UI color scheme value that can be preferred by the user.
+ *
+ * i.e. not an lack of preference or unknown value.
+ *
+ * @category CSS
+ */
+export type ResolvedUITheme = typeof UiThemeEnum.Light | typeof UiThemeEnum.Dark;
+
+/**
+ * A mapping of theme values to their respective inversion.
+ *
+ * @category CSS
+ */
+export const UIThemeInversion = {
+    dark: "light",
+    light: "dark",
+} as const satisfies Record<ResolvedUITheme, ResolvedUITheme>;
+
+/**
+ * Either a valid CSS color scheme value, or a theme preference.
+ */
+export type UIThemeHint = CSSColorSchemeValue | UiThemeEnum;
+
+//#endregion
+
+//#region Scheme Functions
+
+/**
+ * Creates an event target for the given color scheme.
+ *
+ * @param colorScheme The color scheme to target.
+ * @returns A {@linkcode MediaQueryList} that can be used to listen for changes to the color scheme.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MDN}
+ *
+ * @category CSS
+ */
+export function createColorSchemeTarget(colorScheme: ResolvedCSSColorSchemeValue): MediaQueryList {
+    return window.matchMedia(`(prefers-color-scheme: ${colorScheme})`);
+}
+
+/**
+ * Formats the given input into a valid CSS color scheme value.
+ *
+ * If the input is not provided, it defaults to "auto".
+ *
+ * @category CSS
+ */
+export function formatColorScheme(theme: ResolvedUITheme): ResolvedCSSColorSchemeValue;
+export function formatColorScheme(
+    colorScheme: ResolvedCSSColorSchemeValue,
+): ResolvedCSSColorSchemeValue;
+export function formatColorScheme(hint?: UIThemeHint): CSSColorSchemeValue;
+export function formatColorScheme(hint?: UIThemeHint): CSSColorSchemeValue {
+    if (!hint) return "auto";
+
+    switch (hint) {
+        case "dark":
+        case UiThemeEnum.Dark:
+            return "dark";
+        case "light":
+        case UiThemeEnum.Light:
+            return "light";
+        case "auto":
+        case UiThemeEnum.Automatic:
+            return "auto";
+        default:
+            console.warn(`Unknown color scheme hint: ${hint}. Defaulting to "auto".`);
+            return "auto";
+    }
+}
+
+//#endregion
+
+//#region Theme Functions
+
+/**
+ * Resolve the current UI theme based on the user's preference or the provided color scheme.
+ *
+ * @param hint The color scheme hint to use.
+ *
+ * @category CSS
+ */
+export function resolveUITheme(
+    hint?: UIThemeHint,
+    defaultUITheme: ResolvedUITheme = UiThemeEnum.Light,
+): ResolvedUITheme {
+    const colorScheme = formatColorScheme(hint);
+
+    if (colorScheme !== "auto") return colorScheme;
+
+    // Given that we don't know the user's preference,
+    // we can determine the theme based on whether the default theme is
+    // currently being overridden.
+
+    const colorSchemeInversion = formatColorScheme(UIThemeInversion[defaultUITheme]);
+
+    const mediaQueryList = createColorSchemeTarget(colorSchemeInversion);
+
+    return mediaQueryList.matches ? colorSchemeInversion : defaultUITheme;
+}
+
+/**
+ * Effect listener invoked when the color scheme changes.
+ */
+export type UIThemeListener = (currentUITheme: ResolvedUITheme) => void;
+/**
+ * Create an effect that runs
+ *
+ * @returns A cleanup function that removes the effect.
+ */
+export function createUIThemeEffect(
+    effect: UIThemeListener,
+    listenerOptions?: AddEventListenerOptions,
+): () => void {
+    const colorSchemeTarget = resolveUITheme();
+    const invertedColorSchemeTarget = UIThemeInversion[colorSchemeTarget];
+
+    let previousUITheme: ResolvedUITheme | undefined;
+
+    // First, wrap the effect to ensure we can abort it.
+    const changeListener = (event: MediaQueryListEvent) => {
+        if (listenerOptions?.signal?.aborted) return;
+
+        const currentUITheme = event.matches ? colorSchemeTarget : invertedColorSchemeTarget;
+
+        if (previousUITheme === currentUITheme) return;
+
+        previousUITheme = currentUITheme;
+
+        effect(currentUITheme);
+    };
+
+    const mediaQueryList = createColorSchemeTarget(colorSchemeTarget);
+
+    // Trigger the effect immediately.
+    effect(colorSchemeTarget);
+
+    // Listen for changes to the color scheme...
+    mediaQueryList.addEventListener("change", changeListener, listenerOptions);
+
+    // Finally, allow the caller to remove the effect.
+    const cleanup = () => {
+        mediaQueryList.removeEventListener("change", changeListener);
+    };
+
+    return cleanup;
+}
+
+//#endregion
+
+//#region Theme Element
+
+/**
+ * An element that can be themed.
+ */
+export interface ThemedElement extends HTMLElement {
+    brand?: CurrentBrand;
+    uiConfig?: UIConfig;
+    config?: Config;
+    activeTheme: ResolvedUITheme;
+}
+
+export function rootInterface<T extends ThemedElement = ThemedElement>(): T | null {
+    const element = document.body.querySelector<T>("[data-ak-interface-root]");
+
+    return element;
+}
+
+//#endregion
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Teffen Ellis	971b9e6bca	docusaurus-config: v1.0.6	2025-05-03 02:38:03 +02:00
Teffen Ellis	f70635c295	web: Clean up browser-only module imports that crash WebDriverIO. (#14330 ) * web: Clean up browser-only module imports that crash WebDriverIO. * web: Clarify slug format output.	2025-05-02 20:04:05 -04:00
Teffen Ellis	70d60c7ab2	web: Use monorepo package utilities to build packages (#14159 ) * web: Format live reload package. * web: Format package.json. * web: Revise globals. * web: Build entrypoints with a single ESBuild context. Clean up entrypoints. * web: WIP Prepare monorepo package for use. * web: Update build paths. Fix types. * web: WIP Add monorepo dependency. * web: Use monorepo utilities when building. * web: Fix issue where linters collide. Update ignore file. - Remove unused sort override for polyfills. * core: Prepare repo for NPM workspaces.	2025-05-02 19:48:19 -04:00
Teffen Ellis	61a26c02b7	Revert-revert: Safari fixes (#14331 ) * Reapply "web: Safari fixes merge branch (#14181)" This reverts commit `a41d45834c`. * web: Fix brand preference order. Adjust header height.	2025-05-02 21:26:40 +02:00
Tana M Berry	a06645d558	website/docs: remove support badge (#14343 ) removed support badge1 Co-authored-by: Tana M Berry <tana@goauthentik.io>	2025-05-02 18:15:20 +00:00
Jens L.	7730ecbd37	ci: use dependabot for compose correctly? (#14340 ) Signed-off-by: Jens Langhammer <jens@goauthentik.io>	2025-05-02 19:21:55 +02:00
Jens L.	80e1be8db7	website/docs: use Universal Device Trust for GDTC instead of Okta (#14335 ) Signed-off-by: Jens Langhammer <jens@goauthentik.io>	2025-05-02 19:11:14 +02:00
Jens L.	c528c74e48	ci: use dependabot for docker-compose files (#14336 ) Signed-off-by: Jens Langhammer <jens@goauthentik.io>	2025-05-02 19:05:36 +02:00
Jens L.	6d7bf36afe	website/docs: fix dry-run release highlight (#14337 ) Signed-off-by: Jens Langhammer <jens@goauthentik.io>	2025-05-02 19:05:25 +02:00
Simonyi Gergő	44fb59eb18	rbac: fix RoleObjectPermissionTable not showing `add_user_to_group` (#14312 ) fix RoleObjectPermissionTable not showing `add_user_to_group`	2025-05-02 17:42:19 +02:00
authentik-automation[bot]	8f8d924935	core, web: update translations (#14326 ) Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: rissson <18313093+rissson@users.noreply.github.com>	2025-05-02 17:41:47 +02:00
dependabot[bot]	602adaa5c5	core: bump github.com/sethvargo/go-envconfig from 1.2.0 to 1.3.0 (#14327 ) Bumps [github.com/sethvargo/go-envconfig](https://github.com/sethvargo/go-envconfig) from 1.2.0 to 1.3.0. - [Release notes](https://github.com/sethvargo/go-envconfig/releases) - [Commits](https://github.com/sethvargo/go-envconfig/compare/v1.2.0...v1.3.0) --- updated-dependencies: - dependency-name: github.com/sethvargo/go-envconfig dependency-version: 1.3.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-05-02 17:30:24 +02:00