@jskit-ai/auth-web 0.1.38 → 0.1.39

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   "packageVersion": 1,
   "packageId": "@jskit-ai/auth-web",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "kind": "runtime",
   "description": "Auth web module: Fastify auth routes plus web login/sign-out scaffolds.",
   "dependsOn": [
@@ -220,10 +220,10 @@ export default Object.freeze({
         "@tanstack/vue-query": "5.92.12",
         "@mdi/js": "^7.4.47",
         "@fastify/type-provider-typebox": "^6.1.0",
-        "@jskit-ai/auth-core": "0.1.36",
-        "@jskit-ai/http-runtime": "0.1.36",
-        "@jskit-ai/kernel": "0.1.37",
-        "@jskit-ai/shell-web": "0.1.36",
+        "@jskit-ai/auth-core": "0.1.37",
+        "@jskit-ai/http-runtime": "0.1.37",
+        "@jskit-ai/kernel": "0.1.38",
+        "@jskit-ai/shell-web": "0.1.37",
         "vuetify": "^4.0.0"
       },
       "dev": {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/auth-web",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -18,12 +18,13 @@
   },
   "dependencies": {
     "@tanstack/vue-query": "^5.90.5",
-    "@jskit-ai/auth-core": "0.1.36",
+    "@jskit-ai/auth-core": "0.1.37",
     "@mdi/js": "^7.4.47",
     "@fastify/type-provider-typebox": "^6.1.0",
-    "@jskit-ai/kernel": "0.1.37",
-    "@jskit-ai/shell-web": "0.1.36",
+    "@jskit-ai/kernel": "0.1.38",
+    "@jskit-ai/shell-web": "0.1.37",
+    "pinia": "^3.0.4",
     "vuetify": "^4.0.0",
-    "@jskit-ai/http-runtime": "0.1.36"
+    "@jskit-ai/http-runtime": "0.1.37"
   }
 }

package/src/client/composables/loginView/constants.js

@@ -5,7 +5,7 @@ const OTP_MODE = "otp";
 const EMAIL_CONFIRMATION_MODE = "confirm-email";
 
 const AUTH_TITLE_BY_MODE = Object.freeze({
-  [LOGIN_MODE]: "Welcome back",
+  [LOGIN_MODE]: "Welcome",
   [REGISTER_MODE]: "Create your account",
   [FORGOT_MODE]: "Reset your password",
   [OTP_MODE]: "Use one-time code",

package/src/client/index.js

@@ -7,6 +7,8 @@ export { default as DefaultLoginView } from "./views/DefaultLoginView.vue";
 export { default as DefaultSignOutView } from "./views/DefaultSignOutView.vue";
 export { default as AuthProfileWidget } from "./views/AuthProfileWidget.vue";
 export { default as AuthProfileMenuLinkItem } from "./views/AuthProfileMenuLinkItem.vue";
+export { useAuthStore } from "./stores/useAuthStore.js";
+export { useAuthGuardRuntime } from "./runtime/inject.js";
 
 const routeComponents = Object.freeze({
   "auth-login": DefaultLoginView,

package/src/client/providers/AuthWebClientProvider.js

@@ -3,6 +3,7 @@ import AuthProfileWidget from "../views/AuthProfileWidget.vue";
 import AuthProfileMenuLinkItem from "../views/AuthProfileMenuLinkItem.vue";
 import { createAuthGuardRuntime } from "../runtime/authGuardRuntime.js";
 import { useLoginView } from "../runtime/useLoginView.js";
+import { bootAuthClientProvider } from "./bootAuthClientProvider.js";
 import { resolveSurfaceNavigationTargetFromPlacementContext } from "@jskit-ai/shell-web/client/placement";
 
 class AuthWebClientProvider {
@@ -37,23 +38,7 @@ class AuthWebClientProvider {
   }
 
   async boot(app) {
-    if (!app || typeof app.make !== "function") {
-      throw new Error("AuthWebClientProvider requires application make().");
-    }
-
-    const authGuardRuntime = app.make("runtime.auth-guard.client");
-    await authGuardRuntime.initialize();
-
-    if (!app.has("jskit.client.vue.app")) {
-      return;
-    }
-
-    const vueApp = app.make("jskit.client.vue.app");
-    if (!vueApp || typeof vueApp.provide !== "function") {
-      return;
-    }
-
-    vueApp.provide("jskit.auth-web.runtime.auth-guard.client", authGuardRuntime);
+    await bootAuthClientProvider(app);
   }
 }
 

package/src/client/providers/bootAuthClientProvider.js

@@ -0,0 +1,30 @@
+import { AUTH_GUARD_RUNTIME_INJECTION_KEY } from "../runtime/inject.js";
+import { useAuthStore } from "../stores/useAuthStore.js";
+
+async function bootAuthClientProvider(app) {
+  if (!app || typeof app.make !== "function") {
+    throw new Error("AuthWebClientProvider requires application make().");
+  }
+
+  const authGuardRuntime = app.make("runtime.auth-guard.client");
+  const pinia = app.make("jskit.client.pinia");
+  if (!pinia) {
+    throw new Error("AuthWebClientProvider requires Pinia installed in the client app.");
+  }
+  const authStore = useAuthStore(pinia);
+  authStore.attachRuntime(authGuardRuntime);
+  await authStore.initialize();
+
+  if (!app.has("jskit.client.vue.app")) {
+    return;
+  }
+
+  const vueApp = app.make("jskit.client.vue.app");
+  if (!vueApp || typeof vueApp.provide !== "function") {
+    return;
+  }
+
+  vueApp.provide(AUTH_GUARD_RUNTIME_INJECTION_KEY, authGuardRuntime);
+}
+
+export { bootAuthClientProvider };

package/src/client/runtime/inject.js

@@ -1,6 +1,8 @@
 import { inject } from "vue";
 import { isAuthGuardRuntime } from "./authGuardRuntime.js";
 
+const AUTH_GUARD_RUNTIME_INJECTION_KEY = "jskit.auth-web.runtime.auth-guard.client";
+
 const EMPTY_AUTH_GUARD_STATE = Object.freeze({
   authenticated: false,
   username: "",
@@ -24,7 +26,7 @@ const EMPTY_AUTH_GUARD_RUNTIME = Object.freeze({
 });
 
 function useAuthGuardRuntime({ required = false } = {}) {
-  const runtime = inject("jskit.auth-web.runtime.auth-guard.client", null);
+  const runtime = inject(AUTH_GUARD_RUNTIME_INJECTION_KEY, null);
   if (isAuthGuardRuntime(runtime)) {
     return runtime;
   }
@@ -37,6 +39,8 @@ function useAuthGuardRuntime({ required = false } = {}) {
 }
 
 export {
+  AUTH_GUARD_RUNTIME_INJECTION_KEY,
+  EMPTY_AUTH_GUARD_STATE,
   EMPTY_AUTH_GUARD_RUNTIME,
   useAuthGuardRuntime
 };

package/src/client/stores/useAuthStore.js

@@ -0,0 +1,85 @@
+import { computed, markRaw, shallowRef } from "vue";
+import { defineStore } from "pinia";
+import { isAuthGuardRuntime } from "../runtime/authGuardRuntime.js";
+import { EMPTY_AUTH_GUARD_RUNTIME, EMPTY_AUTH_GUARD_STATE } from "../runtime/inject.js";
+
+function normalizeAuthStateValue(nextState) {
+  if (!nextState || typeof nextState !== "object") {
+    return EMPTY_AUTH_GUARD_STATE;
+  }
+
+  return nextState;
+}
+
+export const useAuthStore = defineStore("jskit.auth-web.auth", () => {
+  const runtime = shallowRef(markRaw(EMPTY_AUTH_GUARD_RUNTIME));
+  const authState = shallowRef(EMPTY_AUTH_GUARD_STATE);
+  let unsubscribe = null;
+
+  function setAuthState(nextState) {
+    authState.value = normalizeAuthStateValue(nextState);
+    return authState.value;
+  }
+
+  function detachRuntimeSubscription() {
+    if (typeof unsubscribe === "function") {
+      unsubscribe();
+      unsubscribe = null;
+    }
+  }
+
+  function attachRuntime(nextRuntime = EMPTY_AUTH_GUARD_RUNTIME) {
+    if (!isAuthGuardRuntime(nextRuntime) || typeof nextRuntime.subscribe !== "function") {
+      throw new TypeError("useAuthStore.attachRuntime requires an auth guard runtime with subscribe().");
+    }
+
+    if (runtime.value === nextRuntime) {
+      setAuthState(nextRuntime.getState());
+      return runtime.value;
+    }
+
+    detachRuntimeSubscription();
+    runtime.value = markRaw(nextRuntime);
+    setAuthState(nextRuntime.getState());
+    unsubscribe = nextRuntime.subscribe((nextState) => {
+      setAuthState(nextState);
+    });
+
+    return runtime.value;
+  }
+
+  async function initialize(options = {}) {
+    return setAuthState(await runtime.value.initialize(options));
+  }
+
+  async function refresh(options = {}) {
+    return setAuthState(await runtime.value.refresh(options));
+  }
+
+  function getState() {
+    return authState.value;
+  }
+
+  function subscribe(listener) {
+    return runtime.value.subscribe(listener);
+  }
+
+  const authenticated = computed(() => authState.value.authenticated === true);
+  const username = computed(() => String(authState.value.username || ""));
+  const oauthProviders = computed(() => authState.value.oauthProviders || EMPTY_AUTH_GUARD_STATE.oauthProviders);
+  const oauthDefaultProvider = computed(() => String(authState.value.oauthDefaultProvider || ""));
+
+  return {
+    runtime,
+    authState,
+    authenticated,
+    username,
+    oauthProviders,
+    oauthDefaultProvider,
+    attachRuntime,
+    initialize,
+    refresh,
+    getState,
+    subscribe
+  };
+});

package/src/client/views/AuthProfileWidget.vue

@@ -1,15 +1,11 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { computed } from "vue";
 import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
 import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
-import { useAuthGuardRuntime } from "../runtime/inject.js";
+import { useAuthStore } from "../stores/useAuthStore.js";
 
-const authGuardRuntime = useAuthGuardRuntime({
-  required: true
-});
-const authState = ref(authGuardRuntime.getState());
+const auth = useAuthStore();
 const { context: shellPlacementContext } = useWebPlacementContext();
-let unsubscribe = null;
 
 const shellUser = computed(() => {
   const user = shellPlacementContext.value?.user;
@@ -25,7 +21,7 @@ const displayName = computed(() => {
     return fromContext;
   }
 
-  const username = String(authState.value?.username || "").trim();
+  const username = String(auth.username || "").trim();
   if (username) {
     return username;
   }
@@ -58,23 +54,10 @@ const initials = computed(() => {
 
 const placementContext = computed(() => {
   return {
-    auth: authState.value,
+    auth: auth.authState,
     user: shellUser.value
   };
 });
-
-onMounted(() => {
-  unsubscribe = authGuardRuntime.subscribe((nextState) => {
-    authState.value = nextState;
-  });
-});
-
-onBeforeUnmount(() => {
-  if (typeof unsubscribe === "function") {
-    unsubscribe();
-    unsubscribe = null;
-  }
-});
 </script>
 
 <template>

package/test/clientBoot.test.js

@@ -6,6 +6,9 @@ import test from "node:test";
 test("auth-web client index defines provider-based client routes surface", () => {
   const source = readFileSync(fileURLToPath(new URL("../src/client/index.js", import.meta.url)), "utf8");
 
+  assert.equal(source.includes('export { useAuthStore } from "./stores/useAuthStore.js";'), true);
+  assert.equal(source.includes('export { useAuthGuardRuntime } from "./runtime/inject.js";'), true);
+  assert.equal(source.includes('export { useAuth } from "./composables/useAuth.js";'), false);
   assert.equal(source.includes("const routeComponents = Object.freeze({"), true);
   assert.equal(source.includes('"auth-login": DefaultLoginView'), true);
   assert.equal(source.includes('"auth-signout": DefaultSignOutView'), true);

package/test/provider.test.js

@@ -0,0 +1,165 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createPinia } from "pinia";
+import { AUTH_GUARD_RUNTIME_INJECTION_KEY } from "../src/client/runtime/inject.js";
+import { bootAuthClientProvider } from "../src/client/providers/bootAuthClientProvider.js";
+import { useAuthStore } from "../src/client/stores/useAuthStore.js";
+
+function createAuthRuntimeStub(initialState = {}) {
+  let state = Object.freeze({
+    authenticated: Boolean(initialState.authenticated),
+    username: String(initialState.username || ""),
+    oauthDefaultProvider: String(initialState.oauthDefaultProvider || ""),
+    oauthProviders: Array.isArray(initialState.oauthProviders)
+      ? Object.freeze([...initialState.oauthProviders])
+      : Object.freeze([])
+  });
+  let initializeCalls = 0;
+  const listeners = new Set();
+
+  return {
+    async initialize() {
+      initializeCalls += 1;
+      return state;
+    },
+    async refresh() {
+      return state;
+    },
+    getState() {
+      return state;
+    },
+    subscribe(listener) {
+      if (typeof listener === "function") {
+        listeners.add(listener);
+      }
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    push(nextState = {}) {
+      state = Object.freeze({
+        authenticated: Boolean(nextState.authenticated),
+        username: String(nextState.username || ""),
+        oauthDefaultProvider: String(nextState.oauthDefaultProvider || ""),
+        oauthProviders: Array.isArray(nextState.oauthProviders)
+          ? Object.freeze([...nextState.oauthProviders])
+          : Object.freeze([])
+      });
+
+      for (const listener of listeners) {
+        listener(state);
+      }
+    },
+    get initializeCalls() {
+      return initializeCalls;
+    }
+  };
+}
+
+function createAppDouble({ authGuardRuntime } = {}) {
+  const singletons = new Map();
+  const singletonInstances = new Map();
+  const provided = [];
+  const pinia = createPinia();
+  const vueApp = {
+    provide(key, value) {
+      provided.push({ key, value });
+    }
+  };
+
+  return {
+    singletons,
+    provided,
+    pinia,
+    vueApp,
+    singleton(token, factory) {
+      singletons.set(token, factory);
+    },
+    has(token) {
+      if (token === "jskit.client.vue.app") {
+        return true;
+      }
+      if (token === "jskit.client.pinia") {
+        return true;
+      }
+      if (token === "runtime.web-placement.client") {
+        return true;
+      }
+      if (token === "runtime.auth-guard.client") {
+        return true;
+      }
+      return singletons.has(token) || singletonInstances.has(token);
+    },
+    make(token) {
+      if (token === "jskit.client.vue.app") {
+        return vueApp;
+      }
+      if (token === "jskit.client.pinia") {
+        return pinia;
+      }
+      if (token === "runtime.web-placement.client") {
+        return {
+          getContext() {
+            return Object.freeze({
+              surfaceConfig: Object.freeze({
+                enabledSurfaceIds: Object.freeze(["home"]),
+                defaultSurfaceId: "home",
+                surfaces: Object.freeze({
+                  home: Object.freeze({
+                    id: "home",
+                    origin: "",
+                    pagesRoot: "home"
+                  }),
+                  auth: Object.freeze({
+                    id: "auth",
+                    origin: "",
+                    pagesRoot: "auth"
+                  })
+                })
+              })
+            });
+          }
+        };
+      }
+      if (token === "runtime.auth-guard.client") {
+        return authGuardRuntime;
+      }
+      if (singletonInstances.has(token)) {
+        return singletonInstances.get(token);
+      }
+      const factory = singletons.get(token);
+      if (!factory) {
+        throw new Error(`Unknown token ${String(token)}`);
+      }
+      const instance = factory(this);
+      singletonInstances.set(token, instance);
+      return instance;
+    }
+  };
+}
+
+test("auth web client boot binds explicit Pinia store state and raw runtime injection together", async () => {
+  const authGuardRuntime = createAuthRuntimeStub({
+    authenticated: true,
+    username: "ada"
+  });
+  const app = createAppDouble({ authGuardRuntime });
+
+  await bootAuthClientProvider(app);
+
+  const authStore = useAuthStore(app.pinia);
+  assert.equal(authStore.runtime, authGuardRuntime);
+  assert.equal(authStore.authenticated, true);
+  assert.equal(authStore.username, "ada");
+  assert.equal(authGuardRuntime.initializeCalls, 1);
+
+  authGuardRuntime.push({
+    authenticated: true,
+    username: "grace"
+  });
+
+  assert.equal(authStore.username, "grace");
+
+  const providedByKey = new Map(app.provided.map((entry) => [entry.key, entry.value]));
+  assert.equal(providedByKey.get(AUTH_GUARD_RUNTIME_INJECTION_KEY), authGuardRuntime);
+});

package/test/useAuth.test.js

@@ -0,0 +1,95 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createPinia } from "pinia";
+import { useAuthStore } from "../src/client/stores/useAuthStore.js";
+
+function createAuthRuntimeStub(initialState = {}) {
+  let state = Object.freeze({
+    authenticated: Boolean(initialState.authenticated),
+    username: String(initialState.username || ""),
+    oauthDefaultProvider: String(initialState.oauthDefaultProvider || ""),
+    oauthProviders: Array.isArray(initialState.oauthProviders)
+      ? Object.freeze([...initialState.oauthProviders])
+      : Object.freeze([])
+  });
+  const listeners = new Set();
+
+  return {
+    async initialize() {
+      return state;
+    },
+    async refresh() {
+      return state;
+    },
+    getState() {
+      return state;
+    },
+    subscribe(listener) {
+      if (typeof listener === "function") {
+        listeners.add(listener);
+      }
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    push(nextState = {}) {
+      state = Object.freeze({
+        authenticated: Boolean(nextState.authenticated),
+        username: String(nextState.username || ""),
+        oauthDefaultProvider: String(nextState.oauthDefaultProvider || ""),
+        oauthProviders: Array.isArray(nextState.oauthProviders)
+          ? Object.freeze([...nextState.oauthProviders])
+          : Object.freeze([])
+      });
+
+      for (const listener of listeners) {
+        listener(state);
+      }
+    }
+  };
+}
+
+test("auth store exposes reactive state and direct runtime methods", async () => {
+  const pinia = createPinia();
+  const runtime = createAuthRuntimeStub({
+    authenticated: false,
+    username: ""
+  });
+  const auth = useAuthStore(pinia);
+
+  auth.attachRuntime(runtime);
+
+  assert.equal(auth.runtime, runtime);
+  assert.equal(auth.authenticated, false);
+  assert.equal(auth.username, "");
+  assert.deepEqual(auth.oauthProviders, []);
+  assert.equal(auth.oauthDefaultProvider, "");
+  assert.equal(auth.getState().authenticated, false);
+  assert.equal(await auth.refresh(), runtime.getState());
+
+  runtime.push({
+    authenticated: true,
+    username: "ada",
+    oauthProviders: [{ id: "google", label: "Google" }],
+    oauthDefaultProvider: "google"
+  });
+
+  assert.equal(auth.authenticated, true);
+  assert.equal(auth.username, "ada");
+  assert.deepEqual(auth.oauthProviders, [{ id: "google", label: "Google" }]);
+  assert.equal(auth.oauthDefaultProvider, "google");
+  assert.equal(auth.getState().authenticated, true);
+
+  let observedState = null;
+  const unsubscribe = auth.subscribe((nextState) => {
+    observedState = nextState;
+  });
+
+  runtime.push({
+    authenticated: true,
+    username: "grace"
+  });
+
+  assert.equal(observedState?.username, "grace");
+  unsubscribe();
+});