nuxt-feathers-zod 6.4.13 → 6.4.40

package/CHANGELOG.md

@@ -1,3 +1,58 @@
+# Changelog
+
+## 6.4.37
+
+- remote + Keycloak: SSO authentication now hydrates the local Feathers client auth store immediately
+- remote handshake can use the configured strategy (for example `sso`) while preserving a coherent local fallback state
+- `useAuth()` exposes separate SSO and Feathers state to avoid mixed `user/token` semantics
+- docs updated for the remote Keycloak contract and backend requirement
+
+## 6.4.34
+
+- Remote mode: hardened Feathers-Pinia bootstrap by waiting for `nuxtApp.$pinia` before creating the client, avoiding false fallback to raw `$api` during early client initialization.
+- Remote mode: delayed remote auth bootstrap until after Pinia readiness so auth store hydration and Feathers-Pinia stay coherent.
+- DevTools: restored NFZ plume branding from `public/plume-light.png` / `public/plume-dark.png` instead of the embedded fallback icon.
+- DevTools: icon route now varies on `Sec-CH-Prefers-Color-Scheme` and iframe theme sync with parent remains enabled by default.
+
+## 6.4.33
+- remote + Keycloak auth sync hardening: the Keycloak plugin no longer marks Pinia auth as authenticated when Feathers `authenticate()` actually failed.
+- remote client bootstrap now mirrors successful `authenticate()` / `reAuthenticate()` results into the Pinia auth store so Feathers session state is visible immediately in remote mode.
+- auth token extraction now accepts `accessToken`, `access_token`, and `token` (including nested `authentication.*` variants) for better IdP/backend interoperability.
+
+## 6.4.31
+- Fixed NFZ DevTools icon routing by registering `/__nfz-devtools-icon.png` before the iframe route `/__nfz-devtools` to avoid route capture in consumer apps.
+- Kept parent theme auto-sync logic for the NFZ DevTools iframe.
+
+## 6.4.31
+
+- DevTools tab icon now uses theme-aware NFZ plume assets via `public/plume-light.png` and `public/plume-dark.png`.
+- NFZ DevTools iframe now applies the parent DevTools theme before first paint to match the active DevTools theme by default.
+- Added a dedicated DevTools icon route `'/__nfz-devtools-icon.svg'` and switched the custom tab icon from Carbon to the NFZ plume.
+
+## 6.4.31
+
+- Fixed Windows CLI build wrapper by invoking Bun through cmd.exe /d /s /c on Windows and sh -lc elsewhere.
+- Removed fragile direct spawn of bun.cmd that was failing with spawnSync EINVAL on Node 22 / Windows.
+- Kept dist/cli/package.json generation after successful bundle.
+
+
+## v6.4.17
+- Fixed template-string escaping regressions in `src/cli/core.ts` and `src/runtime/templates/client/plugin.ts`.
+- Restored build/typecheck compatibility for generated Keycloak route middleware and Pinia warning fallback message.
+- Updated `package.json` version to `6.4.17`.
+
+- v6.4.16: docs add clear explanation/examples for plugin, server-module, module, client-module, hook, policy CLI targets.
+
+## v6.4.15
+- client remote/runtime: when `feathers.client.pinia` is enabled but `nuxtApp.$pinia` is missing, log a clear warning and fall back to the raw Feathers client for `$api` instead of crashing in `createPiniaClient`.
+
+## v6.4.31
+
+- docs(cli): resynchronized README, FR/EN CLI guides, and CLI reference pages around the public v6.4.31 command surface
+- docs(schema): documented `--validate`, `--repair-auth`, and `--diff` as first-class schema maintenance flags
+- docs(help): clarified `add middleware` target guidance (`nitro` and `route` as public targets, others as advanced)
+- cli(help): refreshed built-in help text and command descriptions for middleware and schema maintenance
+
 ## v6.4.12
 
 - fix(keycloak-sso): clean OIDC callback hashes like `#state=...&session_state=...&code=...` after Keycloak `check-sso` / callback to avoid Vue Router selector warnings in Nuxt 4 consumer apps
@@ -153,3 +208,35 @@
 - Fixed Bun/VitePress docs build flow.
 - Synced NFZ DevTools tab theme with the parent Nuxt DevTools theme by default.
 - Hardened CLI tests, doctor diagnostics, and Mongo management configuration handling.
+
+## v6.4.14
+
+- CLI: updated `renderAuthKeycloakRouteMiddleware()` so generated Nuxt route middleware now cleans OIDC Keycloak callback hash fragments (`#state=...&session_state=...&code=...`) via `history.replaceState(...)` before auth init.
+- Prevents Vue Router warnings caused by invalid CSS selector hashes after `check-sso` redirects.
+
+## v6.4.31
+- Fix CLI build regression in renderAuthKeycloakRouteMiddleware by replacing an invalid nested template literal with string concatenation (`window.location.pathname + window.location.search`).
+- Keep package.json version in sync.
+
+## 6.4.31
+- DevTools registration switched from untyped `nuxt.hook('devtools:customTabs', ...)` to `addCustomTab(...)`.
+- NFZ tab icon is now served by the module on `/__nfz-devtools-icon.png` for consumer-app reliability.
+- Keeps parent-theme sync logic for the NFZ DevTools iframe.
+
+## 6.4.31
+- DevTools: local icon route now serves an embedded 64x64 plume PNG buffer instead of reading public/plume-light.png at runtime.
+- DevTools: parent theme auto-sync now retries after load and observes both html/body with data-theme and data-color-mode support.
+
+
+## 6.4.32
+- Remote mode + payloadMode=keycloak: Keycloak authenticated state now synchronizes the Feathers client auth session automatically.
+- The auth store is marked authenticated with a token fallback to keycloak.token, and protected services using authentication('jwt') are authorized on boot and token refresh.
+- feathers-auth bootstrap skips reAuthenticate() in remote Keycloak payload mode; keycloak-sso becomes the source of truth for auth session bootstrap.
+
+
+## 6.4.35
+- devtools asset loading made lazy and fault-tolerant to avoid module prepare failure masked as src/module.ts load error
+- public release metadata resynchronized to 6.4.35
+- devtools plume icon/theme-parent behavior preserved
+
+- 6.4.37: remote Keycloak Option B contract (`strategy: 'sso'`, `user: loginuser`, `authenticated: true`) is now first-class in the runtime and docs; generated route middleware no longer re-runs `auth.init()` or reuses callback hashes in redirect URIs.

package/README.md

@@ -1,12 +1,12 @@
-[v6.4.3] CLI typecheck/test cleanup applied.
-
 # nuxt-feathers-zod
 
+> OSS reference snapshot: **v6.4.40** — optional Mongo management options aligned and release metadata synchronized.
+
 [Documentation](https://vevedh.github.io/nuxt-feathers-zod/)
 
 `nuxt-feathers-zod` is the official **Nuxt 4** module that embeds or connects to **FeathersJS v5 (Dove)** with a **CLI-first** workflow and optional **Zod-first** service generation.
 
-Current OSS release target: **6.3.9**.
+Current OSS release target: **6.4.40**.
 
 It supports two main usage patterns:
 
@@ -120,7 +120,7 @@ bunx nuxt-feathers-zod add mongodb-compose
 bunx nuxt-feathers-zod mongo management --url mongodb://root:change-me@127.0.0.1:27017/app?authSource=admin --auth false
 ```
 
-### Open OSS asset commands
+### Secondary OSS helper commands
 
 ```bash
 bunx nuxt-feathers-zod templates list
@@ -132,17 +132,74 @@ bunx nuxt-feathers-zod middlewares list --target nitro
 bunx nuxt-feathers-zod middlewares add request-id --target nitro
 ```
 
-## CLI command surface in 6.3.9
+## CLI command surface in 6.4.40
 
 | Area | Commands |
 |---|---|
 | Init | `init templates`, `init embedded`, `init remote` |
 | Remote auth | `remote auth keycloak` |
 | Services | `add service`, `add remote-service`, `auth service`, `schema` |
-| Runtime scaffolding | `add middleware`, `add server-module`, `add mongodb-compose`, `mongo management` |
-| OSS assets | `templates list`, `plugins list/add`, `modules list/add`, `middlewares list/add` |
+| Runtime scaffolding | `add middleware`, `schema`, `add server-module`, `add mongodb-compose`, `mongo management` |
+| Secondary OSS helpers | `templates list`, `plugins list/add`, `modules list/add`, `middlewares list/add` |
 | Diagnostics | `doctor` |
 
+
+## Public CLI focus
+
+The public OSS docs now foreground these commands as the **stable core**:
+
+- `init embedded`
+- `init remote`
+- `remote auth keycloak`
+- `add service <name>`
+- `add remote-service <name>`
+- `add middleware <name>`
+- `schema <service>`
+- `auth service <name>`
+- `mongo management`
+- `doctor`
+
+The following commands remain supported, but are now treated as **secondary helpers or compatibility aliases** in the docs:
+
+- `add custom-service <name>`
+- `templates list` / `init templates`
+- `plugins list|add`
+- `modules list|add`
+- `middlewares list|add`
+- `add server-module <name>`
+- `add mongodb-compose`
+
+## Schema maintenance quick reference
+
+```bash
+bunx nuxt-feathers-zod schema users --show
+bunx nuxt-feathers-zod schema users --validate
+bunx nuxt-feathers-zod schema users --diff
+bunx nuxt-feathers-zod schema users --repair-auth
+```
+
+Key `schema` flags:
+
+- `--show` / `--json` / `--export`
+- `--set-mode none|zod|json`
+- `--add-field`, `--set-field`, `--remove-field`, `--rename-field`
+- `--validate`
+- `--repair-auth` for auth-enabled `users` baselines
+- `--dry` / `--force`
+
+## `add middleware` target matrix
+
+| Target | Purpose | Status in docs |
+|---|---|---|
+| `nitro` | Nitro/H3 middleware | public |
+| `route` | Nuxt route middleware in `app/middleware` | public |
+| `feathers` | Feathers server plugin/middleware artifact | advanced |
+| `server-module` | embedded Feathers server module | advanced |
+| `module` | generic module artifact | advanced |
+| `client-module` | client-side module artifact | advanced |
+| `hook` | Feathers hook scaffold | advanced |
+| `policy` | policy/guard scaffold | advanced |
+
 ## Auth-aware generation for `users`
 
 For the `users` service, `--auth` and `--authAware` are distinct concerns:
@@ -220,6 +277,99 @@ bunx nuxt-feathers-zod add mongodb-compose
 bunx nuxt-feathers-zod add mongodb-compose --out docker-compose-db.yaml --database app --rootPassword secret --force
 ```
 
+## Remote + Keycloak runtime contract
+
+In **remote mode** with **Keycloak SSO**, NFZ applies a two-step client contract.
+
+### Step 1 — immediate local Feathers session hydration
+
+As soon as Keycloak is authenticated in the browser, the client auth store is hydrated immediately:
+
+```ts
+authStore.authenticated = true
+authStore.accessToken = keycloak.token
+authStore.user = ssoUser
+```
+
+This guarantees that:
+- Nuxt route middleware can consider the user authenticated
+- client service calls receive `Authorization: Bearer <keycloak token>`
+- the local runtime stays coherent even before the remote Feathers API confirms the token
+
+### Step 2 — remote authentication handshake
+
+NFZ then attempts a remote Feathers authentication call using the configured remote strategy:
+
+```ts
+await api.authenticate({
+  strategy: 'sso', // or another configured remote.auth.strategy
+  accessToken: keycloak.token,
+  access_token: keycloak.token,
+  token: keycloak.token,
+  user: ssoUser,
+  authenticated: true,
+})
+```
+
+The actual strategy name comes from `feathers.client.remote.auth.strategy`.
+
+Example:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-feathers-zod'],
+  feathers: {
+    client: {
+      mode: 'remote',
+      remote: {
+        url: 'https://api.example.com',
+        auth: {
+          enabled: true,
+          payloadMode: 'keycloak',
+          strategy: 'sso',
+          tokenField: 'access_token',
+          servicePath: 'authentication',
+        },
+      },
+    },
+    keycloak: {
+      serverUrl: 'https://sso.example.com',
+      realm: 'myrealm',
+      clientId: 'myapp',
+    },
+  },
+})
+```
+
+### Resulting semantics in `useAuth()`
+
+In provider `keycloak`, `useAuth()` now exposes distinct states:
+
+- `isSsoAuthenticated`
+- `isFeathersAuthenticated`
+- `isAuthenticated`
+- `ssoUser`
+- `feathersUser`
+- `user`
+- `ssoToken`
+- `feathersToken`
+- `token`
+
+Resolution rules:
+
+- `user = feathersUser ?? ssoUser`
+- `token = feathersToken ?? ssoToken`
+
+### Backend requirement
+
+For protected remote services to be truly accepted by Feathers hooks such as `authenticate('jwt')`, the remote backend must accept the token and strategy you configure.
+
+Typical options:
+- validate the Keycloak token directly through the Feathers authentication strategy
+- expose a dedicated remote strategy such as `strategy: 'sso'`
+
+If the backend refuses the handshake, NFZ keeps the local client state coherent and preserves the error in the auth store for diagnostics.
+
 ## Notes
 
 - Recommended convention: `servicesDirs: ['services']`
@@ -249,3 +399,7 @@ This release hardens the CLI patcher for remote mode so chained commands keep `n
 
 
 - 6.4.1: Added automatic Keycloak `js-sha256` default-export shim alias for consumer Nuxt 4 apps to avoid browser crash from `keycloak-js` importing `js-sha256` as a default export.
+
+### Remote Keycloak `strategy: 'sso'` with option B
+
+When the remote backend expects `api.authenticate({ strategy: 'sso', user: loginuser, authenticated: true })`, NFZ now keeps the local SSO object in the auth store (`authStore.user = ssoUser`) but sends only the derived login string as `user` in the remote authenticate payload.

package/dist/cli/index.mjs

@@ -2620,7 +2620,7 @@ Commands:
   remote auth keycloak          Configure remote auth payload mode for Keycloak
   add service <name>            Generate an embedded service (or a service with custom methods via --custom)
   add remote-service <name>     Register a remote service (client-only)
-  add middleware <name>         Generate middleware (target nitro|route|feathers)
+  add middleware <name>         Generate middleware or middleware-like artifacts
   add mongodb-compose           Generate docker-compose-db.yaml for MongoDB
   mongo management             Enable/update embedded MongoDB management routes
   schema <service>              Inspect schema state or switch schema mode
@@ -2777,6 +2777,8 @@ Flags overview:
     --remove-field <name>       remove field from manifest/schema
     --set-field <spec>          create or replace field definition
     --rename-field <from:to>    rename field preserving definition
+    --validate                  validate manifest/schema coherence
+    --repair-auth               repair auth-compatible users schema baseline
     --servicesDir <dir>         (default: services)
     --force
     --dry
@@ -5498,12 +5500,31 @@ export default defineNuxtRouteMiddleware(async (to) => {
   if (import.meta.server)
     return
 
+  const hash = window.location.hash || ''
+
+  // After Keycloak redirects, the hash can contain state/session_state/code which
+  // is not a valid CSS selector. Clean it eagerly so Vue Router does not try to
+  // interpret it as an anchor selector during navigation.
+  if (hash && /(state=|session_state=|code=)/.test(hash)) {
+    const cleanUrl = window.location.pathname + window.location.search
+    window.history.replaceState(window.history.state, '', cleanUrl)
+  }
+
   const auth = useAuth()
   await auth.init()
 
-  if (auth.provider.value === 'keycloak' && !auth.isAuthenticated.value) {
-    await auth.login({ redirectUri: window.location.origin + to.fullPath })
+  if (auth.provider.value === 'keycloak' && !auth.isSsoAuthenticated.value) {
+    await auth.login({ redirectUri: window.location.origin + window.location.pathname + window.location.search })
+    return
   }
+
+  // Remote + Keycloak contract:
+  // - isSsoAuthenticated means the local Feathers client store is hydrated immediately
+  //   with { authenticated:true, accessToken:keycloak.token, user:ssoUser }
+  // - NFZ then attempts api.authenticate(...) using the configured remote strategy
+  //   (for example strategy:'sso') and sends { user: loginuser, authenticated: true }
+  // - If the backend does not accept that strategy/token, the client store still remains
+  //   coherent for UI/middleware purposes and the error is preserved in the auth store.
 })
 `;
 }
@@ -6660,7 +6681,7 @@ function createCliCommand() {
   const addMiddlewareCommand = defineCommand({
     meta: {
       name: "middleware",
-      description: "Generate middleware"
+      description: "Generate middleware or middleware-like artifacts"
     },
     args: {
       name: { type: "positional", required: true, description: "Middleware name" },
@@ -6675,7 +6696,7 @@ function createCliCommand() {
   const addServerModuleCommand = defineCommand({
     meta: {
       name: "server-module",
-      description: "Generate a reusable server module"
+      description: "Generate an embedded server module (advanced)"
     },
     args: {
       name: { type: "positional", required: true, description: "Module name" },

package/dist/cli/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "6.4.13",
+  "version": "6.4.40",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { createRequire } from 'node:module';
 import { addDevServerHandler, defineNuxtModule, createResolver, addImportsDir, addTemplate, addServerPlugin, addServerHandler, addImports, addPlugin, hasNuxtModule } from '@nuxt/kit';
 import { consola } from 'consola';
 import defu from 'defu';
-import { readFileSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { addCustomTab } from '@nuxt/devtools-kit';
 import { eventHandler, setHeader } from 'h3';
@@ -17,10 +17,35 @@ import { getServerTemplates } from '../dist/runtime/templates/server/index.js';
 const DEVTOOLS_ROUTE = "/__nfz-devtools";
 const DEVTOOLS_ROUTE_JSON = "/__nfz-devtools.json";
 const DEVTOOLS_ROUTE_CSS = "/__nfz-devtools.css";
-const VENDORED_STYLES = readFileSync(
-  fileURLToPath(new URL("./runtime/devtools-ui-kit/assets/styles.css", import.meta.url)),
-  "utf8"
-);
+const DEVTOOLS_ROUTE_ICON = "/__nfz-devtools-icon.png";
+function tryReadTextAsset(relativePath, fallback = "") {
+  try {
+    const filePath = fileURLToPath(new URL(relativePath, import.meta.url));
+    if (!existsSync(filePath))
+      return fallback;
+    return readFileSync(filePath, "utf8");
+  } catch {
+    return fallback;
+  }
+}
+function tryReadBinaryAsset(relativePath, fallback = new Uint8Array()) {
+  try {
+    const filePath = fileURLToPath(new URL(relativePath, import.meta.url));
+    if (!existsSync(filePath))
+      return fallback;
+    return readFileSync(filePath);
+  } catch {
+    return fallback;
+  }
+}
+function getVendoredStyles() {
+  return tryReadTextAsset("./runtime/devtools-ui-kit/assets/styles.css");
+}
+function getDevtoolsIconBuffers() {
+  const light = tryReadBinaryAsset("./public/plume-light.png");
+  const dark = tryReadBinaryAsset("./public/plume-dark.png", light);
+  return { light, dark };
+}
 function safeJson(value) {
   return JSON.stringify(value, null, 2).replace(/</g, "<").replace(/>/g, ">");
 }
@@ -84,6 +109,52 @@ function renderHtml(payload) {
       html.dark { --nfz-bg: #0b1020; --nfz-bg-elevated: rgba(10,15,29,.9); --nfz-card: rgba(17,24,39,.72); --nfz-border: rgba(127,127,127,.22); --nfz-text: #e5e7eb; --nfz-muted: #a1a1aa; }
       html.parent-theme-synced .nfz-sub::after { content: ' \xB7 synced with parent theme'; }
     </style>
+
+    <script>
+      (() => {
+        const docEl = document.documentElement
+        function applyTheme(theme) {
+          docEl.classList.remove('dark', 'light')
+          docEl.classList.add(theme)
+        }
+        function readThemeFromElement(el) {
+          if (!el)
+            return null
+          const className = String(el.className || '')
+          const dataTheme = String(el.getAttribute('data-theme') || '')
+          const dataColorMode = String(el.getAttribute('data-color-mode') || '')
+          const computed = window.parent.getComputedStyle(el)
+          const colorScheme = String(computed.colorScheme || '')
+          const isDark = /(^|s)dark(s|$)/.test(className)
+            || dataTheme === 'dark'
+            || dataColorMode === 'dark'
+            || colorScheme.includes('dark')
+          const isLight = /(^|s)light(s|$)/.test(className)
+            || dataTheme === 'light'
+            || dataColorMode === 'light'
+            || colorScheme.includes('light')
+          if (!isDark && !isLight)
+            return null
+          return { isDark }
+        }
+        function getParentThemeState() {
+          try {
+            if (window.parent === window)
+              return null
+            const parentDoc = window.parent?.document
+            return readThemeFromElement(parentDoc?.documentElement) || readThemeFromElement(parentDoc?.body)
+          }
+          catch {
+            return null
+          }
+        }
+        const parentTheme = getParentThemeState()
+        if (parentTheme)
+          applyTheme(parentTheme.isDark ? 'dark' : 'light')
+        else
+          applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      })()
+    <\/script>
   </head>
   <body>
     <div class="nfz-shell">
@@ -195,21 +266,35 @@ function renderHtml(payload) {
       })
 
       const docEl = document.documentElement
-      const rootThemeAttrs = ['class', 'data-theme', 'style']
+      const rootThemeAttrs = ['class', 'data-theme', 'data-color-mode', 'style']
+
+      function readThemeFromElement(el) {
+        if (!el)
+          return null
+        const className = String(el.className || '')
+        const dataTheme = String(el.getAttribute('data-theme') || '')
+        const dataColorMode = String(el.getAttribute('data-color-mode') || '')
+        const computed = window.parent.getComputedStyle(el)
+        const colorScheme = String(computed.colorScheme || '')
+        const isDark = /(^|s)dark(s|$)/.test(className)
+          || dataTheme === 'dark'
+          || dataColorMode === 'dark'
+          || colorScheme.includes('dark')
+        const isLight = /(^|s)light(s|$)/.test(className)
+          || dataTheme === 'light'
+          || dataColorMode === 'light'
+          || colorScheme.includes('light')
+        if (!isDark && !isLight)
+          return null
+        return { isDark }
+      }
 
       function getParentThemeState() {
         try {
-          const parentEl = window.parent?.document?.documentElement
-          if (!parentEl)
+          if (window.parent === window)
             return null
-          const className = String(parentEl.className || '')
-          const dataTheme = String(parentEl.getAttribute('data-theme') || '')
-          const computed = window.parent.getComputedStyle(parentEl)
-          const colorScheme = String(computed.colorScheme || '')
-          const isDark = /(^|s)dark(s|$)/.test(className)
-            || dataTheme === 'dark'
-            || colorScheme.includes('dark')
-          return { isDark, className, dataTheme }
+          const parentDoc = window.parent?.document
+          return readThemeFromElement(parentDoc?.documentElement) || readThemeFromElement(parentDoc?.body)
         }
         catch {
           return null
@@ -234,24 +319,43 @@ function renderHtml(payload) {
         return false
       }
 
-      syncThemeFromParent()
-
-      let parentObserver = null
-      try {
-        const parentEl = window.parent?.document?.documentElement
-        if (parentEl && window.parent !== window) {
-          parentObserver = new window.MutationObserver(() => syncThemeFromParent())
-          parentObserver.observe(parentEl, { attributes: true, attributeFilter: rootThemeAttrs })
+      let parentObservers = []
+      function attachParentObservers() {
+        try {
+          if (window.parent === window || parentObservers.length)
+            return
+          const parentDoc = window.parent?.document
+          const targets = [parentDoc?.documentElement, parentDoc?.body].filter(Boolean)
+          parentObservers = targets.map((target) => {
+            const observer = new window.MutationObserver(() => syncThemeFromParent())
+            observer.observe(target, { attributes: true, attributeFilter: rootThemeAttrs })
+            return observer
+          })
         }
+        catch {}
       }
-      catch {}
+
+      syncThemeFromParent()
+      attachParentObservers()
+      ;[32, 120, 260, 600, 1200].forEach((delay) => {
+        window.setTimeout(() => {
+          syncThemeFromParent()
+          attachParentObservers()
+        }, delay)
+      })
 
       window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
         syncThemeFromParent()
       })
 
+      window.addEventListener('load', () => {
+        syncThemeFromParent()
+        attachParentObservers()
+      })
+
       themeBtn.addEventListener('click', () => {
         syncThemeFromParent()
+        attachParentObservers()
       })
     <\/script>
   </body>
@@ -323,7 +427,7 @@ function setupNfzDevtools(nuxt, options, extras) {
     route: DEVTOOLS_ROUTE_CSS,
     handler: eventHandler((event) => {
       setHeader(event, "content-type", "text/css; charset=utf-8");
-      return VENDORED_STYLES;
+      return getVendoredStyles();
     })
   });
   addDevServerHandler({
@@ -333,6 +437,17 @@ function setupNfzDevtools(nuxt, options, extras) {
       return payload;
     })
   });
+  addDevServerHandler({
+    route: DEVTOOLS_ROUTE_ICON,
+    handler: eventHandler((event) => {
+      const prefersDark = String(event.node.req.headers["sec-ch-prefers-color-scheme"] || "").toLowerCase().includes("dark");
+      setHeader(event, "content-type", "image/png");
+      setHeader(event, "cache-control", "public, max-age=3600");
+      setHeader(event, "vary", "Sec-CH-Prefers-Color-Scheme");
+      const icons = getDevtoolsIconBuffers();
+      return prefersDark ? icons.dark : icons.light;
+    })
+  });
   addDevServerHandler({
     route: DEVTOOLS_ROUTE,
     handler: eventHandler((event) => {
@@ -343,12 +458,12 @@ function setupNfzDevtools(nuxt, options, extras) {
   addCustomTab({
     name: "nfz-oss",
     title: "NFZ",
-    icon: "carbon:data-base",
+    icon: DEVTOOLS_ROUTE_ICON,
     view: {
       type: "iframe",
       src: DEVTOOLS_ROUTE
     }
-  }, nuxt);
+  });
 }
 
 function dedupeStrings(values) {
@@ -414,7 +529,10 @@ function setTsIncludes(options, nuxt) {
   nuxt.hook("nitro:config", (nitroConfig) => {
     nitroConfig.typescript = nitroConfig.typescript || {};
     nitroConfig.typescript.tsConfig = nitroConfig.typescript.tsConfig || {};
-    nitroConfig.typescript.tsConfig.include = dedupeStrings([...nitroConfig.typescript.tsConfig.include || [], ...includeGlobs]);
+    nitroConfig.typescript.tsConfig.include = dedupeStrings([
+      ...nitroConfig.typescript.tsConfig.include || [],
+      ...includeGlobs
+    ]);
   });
 }
 async function ensurePinia(client, nuxt) {
@@ -540,10 +658,10 @@ const module$1 = defineNuxtModule({
         );
         if (enableAuthBootstrap) {
           addImports({ from: resolver.resolve("./runtime/stores/auth"), name: "useAuthStore" });
-          addPlugin({ order: 1, src: resolver.resolve("./runtime/plugins/feathers-auth") });
+          addPlugin({ order: 21, src: resolver.resolve("./runtime/plugins/feathers-auth") });
         }
         if (resolvedOptions.keycloak) {
-          addPlugin({ order: 1, src: resolver.resolve("./runtime/plugins/keycloak-sso"), mode: "client" });
+          addPlugin({ order: 22, src: resolver.resolve("./runtime/plugins/keycloak-sso"), mode: "client" });
         }
       }
       let clientPluginDst;
@@ -554,7 +672,7 @@ const module$1 = defineNuxtModule({
           clientPluginDst = tpl.dst;
       }
       addPlugin({
-        order: 0,
+        order: 20,
         src: clientPluginDst ?? resolver.resolve(resolvedOptions.templateDir, "client/plugin.ts"),
         ...mode === "remote" ? { mode: "client" } : {}
       });

package/dist/runtime/composables/useAuth.d.ts

@@ -3,9 +3,15 @@ export declare function useAuth(): {
     provider: import("vue").ComputedRef<AuthProvider>;
     ready: import("vue").Ref<boolean, boolean>;
     isAuthenticated: import("vue").ComputedRef<boolean>;
+    isSsoAuthenticated: import("vue").ComputedRef<boolean>;
+    isFeathersAuthenticated: import("vue").ComputedRef<boolean>;
     user: import("vue").ComputedRef<any>;
+    ssoUser: import("vue").ComputedRef<any>;
+    feathersUser: import("vue").ComputedRef<any>;
     permissions: import("vue").ComputedRef<any>;
     token: import("vue").ComputedRef<string | null>;
+    ssoToken: import("vue").ComputedRef<string | null>;
+    feathersToken: import("vue").ComputedRef<string | null>;
     init: () => Promise<void>;
     login: (options?: any) => Promise<any>;
     logout: (options?: any) => Promise<any>;