@abgov/nx-adsp 13.18.0-beta.1 → 13.18.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.18.0-beta.1",
+  "version": "13.18.0-beta.2",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-app/files/AGENTS.md__tmpl__

@@ -30,8 +30,9 @@ executors read options from `project.json` and do not prompt.
 
 | File | Purpose |
 |------|---------|
-| `src/main.ts` | Entry — registers Pinia, Router, and Keycloak plugin |
-| `src/App.vue` | Shell — `AppHeader` with sign-in/out in its `utilities` slot, hero banner, `<RouterView>` wrapped in `AppLayout`, `AppFooter` |
+| `src/main.ts` | Entry — registers Pinia, Router, and Keycloak plugin (incl. `onAuthRefreshError`, which flags the session store as expired) |
+| `src/App.vue` | Shell — `AppHeader` with sign-in/out in its `utilities` slot, `SessionExpiredBanner`, hero banner, `<RouterView>` wrapped in `AppLayout`, `AppFooter` |
+| `src/stores/session.ts` | Pinia store — `expired` flag behind `SessionExpiredBanner`, set from `main.ts`'s `onAuthRefreshError` hook |
 | `src/router/index.ts` | Routes — `/protected` guarded with `requiresAuth` meta |
 | `src/views/HomeView.vue` | Public page — calls public and private APIs |
 | `src/views/ProtectedView.vue` | Authenticated page — shows user info from token |
@@ -168,7 +169,7 @@ across every Vue app in this workspace — fix or extend a wrapper once in
 | `AppHeader` | `goa-microsite-header` + `goa-app-header`. Takes a `heading` prop; put account/sign-in actions in its `utilities` slot (a bare child with no slot is silently dropped by `goa-app-header`) |
 | `AppLayout` | The content gutter every view renders inside (see the key files table). Also renders the skip-to-main-content link |
 | `AppFooter` | `goa-app-footer` with the standard GoA nav/meta links (Services/Contact/Terms of Use, Privacy/Disclaimer/Accessibility) |
-| `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits — available in the shared library, not yet wired into this app's `App.vue`. Wiring it to a real Keycloak session-expiry signal needs an `onAuthLogout` callback added to `main.ts`'s Keycloak plugin config; do that before using it |
+| `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits. Bound to the `useSessionStore()` Pinia store (`src/stores/session.ts`), which `main.ts`'s `onAuthRefreshError` hook flips when the refresh token itself has expired |
 
 These are shared across every Vue app in this workspace — fix or extend one once
 in `libs/vue-components/src/lib/patterns/`, the same way as the `Goab*` wrappers.

package/src/generators/vue-app/files/src/App.spec.ts__tmpl__

@@ -16,8 +16,10 @@ vi.mock('@dsb-norge/vue-keycloak-js', async () => {
 });
 
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
+import { createPinia } from 'pinia';
 import { createMemoryHistory, createRouter } from 'vue-router';
 import App from './App.vue';
+import { useSessionStore } from './stores/session';
 
 // App.vue reads useRoute() for the layout-width feature (route.meta.layout,
 // default 'page') — that needs a real router installed via `global.plugins`,
@@ -35,7 +37,9 @@ const router = createRouter({
 
 describe('App shell header', () => {
   it('shows Sign in when unauthenticated', () => {
-    const wrapper = mount(App, { global: { plugins: [router], stubs: { RouterView: true } } });
+    const wrapper = mount(App, {
+      global: { plugins: [router, createPinia()], stubs: { RouterView: true } },
+    });
     const group = wrapper.find('goa-button-group');
     expect(group.exists()).toBe(true);
     expect(group.html()).toContain('Sign in');
@@ -45,9 +49,47 @@ describe('App shell header', () => {
     // The bug: destructuring useKeycloak() froze `keycloak` at undefined, so
     // login() was a permanent no-op. Reactive access must reach the instance.
     const kc = useKeycloak();
-    const wrapper = mount(App, { global: { plugins: [router], stubs: { RouterView: true } } });
+    const wrapper = mount(App, {
+      global: { plugins: [router, createPinia()], stubs: { RouterView: true } },
+    });
     const btn = wrapper.findAll('goa-button').find((b) => b.text().includes('Sign in'));
     await btn?.trigger('_click');
     expect(kc.keycloak?.login).toHaveBeenCalled();
   });
 });
+
+describe('App shell session-expired banner', () => {
+  it('is hidden until the session store flags an expired session', async () => {
+    const pinia = createPinia();
+    const wrapper = mount(App, {
+      global: { plugins: [router, pinia], stubs: { RouterView: true } },
+    });
+    expect(wrapper.find('.session-expired-banner').exists()).toBe(false);
+
+    useSessionStore(pinia).markExpired();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.session-expired-banner').exists()).toBe(true);
+  });
+
+  it('Sign in on the banner dismisses it and calls keycloak.login', async () => {
+    const kc = useKeycloak();
+    const pinia = createPinia();
+    const wrapper = mount(App, {
+      global: { plugins: [router, pinia], stubs: { RouterView: true } },
+    });
+    useSessionStore(pinia).markExpired();
+    await wrapper.vm.$nextTick();
+
+    // SessionExpiredBanner's "Sign in" is the GoabButton wrapper, which re-exposes
+    // goa-button's `_click` as a plain `click` on itself -- but the underlying DOM
+    // node vue-test-utils sees is still the raw <goa-button>, so trigger `_click`
+    // (same as AppHeader's raw Sign in button above), not `click`.
+    const btn = wrapper
+      .findAll('goa-button')
+      .find((b) => b.text().includes('Sign in') && b.attributes('type') === 'primary');
+    await btn?.trigger('_click');
+
+    expect(kc.keycloak?.login).toHaveBeenCalled();
+    expect(useSessionStore(pinia).expired).toBe(false);
+  });
+});

package/src/generators/vue-app/files/src/App.vue__tmpl__

@@ -2,13 +2,15 @@
 import { computed } from 'vue';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
 import { RouterView, useRoute } from 'vue-router';
-import { AppHeader, AppLayout, AppFooter } from '<%= goaImportPath %>';
+import { AppHeader, AppLayout, AppFooter, SessionExpiredBanner } from '<%= goaImportPath %>';
+import { useSessionStore } from './stores/session';
 
 // Keep the reactive instance — do NOT destructure. useKeycloak() returns a
 // readonly(reactive()); destructuring snapshots each field at setup time, so
 // `keycloak` would be frozen at its initial `undefined` (login() a no-op) and
 // `authenticated` would never flip. Access fields on `kc` to stay reactive.
 const kc = useKeycloak();
+const session = useSessionStore();
 
 // Content width per view, from route meta (default 'page'). Views opt into a
 // different width with `meta: { layout: 'wide' | 'form' }` in the router.
@@ -19,6 +21,11 @@ const layout = computed(
 
 function login() { kc.keycloak?.login(); }
 function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin }); }
+
+function signInAgain() {
+  session.dismiss();
+  kc.keycloak?.login();
+}
 </script>
 
 <template>
@@ -38,6 +45,11 @@ function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin })
       </goa-button-group>
     </template>
   </AppHeader>
+  <SessionExpiredBanner
+    v-model:show="session.expired"
+    @sign-in="signInAgain"
+    @dismiss="session.dismiss"
+  />
   <goa-hero-banner heading="<%= projectName %>" backgroundurl="/assets/banner.jpg" />
   <AppLayout :variant="layout">
     <RouterView />

package/src/generators/vue-app/files/src/main.ts__tmpl__

@@ -12,10 +12,12 @@ import keycloakPlugin from '@dsb-norge/vue-keycloak-js';
 import App from './App.vue';
 import router from './router';
 import { environment } from './environments/environment';
+import { useSessionStore } from './stores/session';
 
 const app = createApp(App);
+const pinia = createPinia();
 
-app.use(createPinia());
+app.use(pinia);
 app.use(router);
 app.use(keycloakPlugin, {
   config: {
@@ -41,6 +43,13 @@ app.use(keycloakPlugin, {
     pkceMethod: 'S256',
     checkLoginIframe: false,
   },
+  // Not onAuthLogout: keycloak-js only invokes that via the session-status
+  // iframe (disabled above by checkLoginIframe: false) or in Cordova mode --
+  // it would never fire here. The wrapper's own background auto-refresh
+  // (autoRefreshToken, on by default) periodically calls updateToken();
+  // onAuthRefreshError fires when that fails because the refresh token itself
+  // has expired, which is the real, always-on "session expired" signal.
+  onAuthRefreshError: () => useSessionStore(pinia).markExpired(),
 });
 
 app.mount('#app');

package/src/generators/vue-app/files/src/stores/session.ts__tmpl__

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia';
+
+// Tracks whether the user's session has expired, surfaced via
+// SessionExpiredBanner in App.vue. Set from main.ts's onAuthRefreshError hook
+// -- see that file for why that hook, not onAuthLogout, is the real signal.
+export const useSessionStore = defineStore('session', {
+  state: () => ({ expired: false }),
+  actions: {
+    markExpired() {
+      this.expired = true;
+    },
+    dismiss() {
+      this.expired = false;
+    },
+  },
+});

package/src/generators/vue-app/vue-app.spec.ts

@@ -178,11 +178,41 @@ describe('Vue App Generator', () => {
     }
 
     const app = host.read('apps/test/src/App.vue').toString();
-    expect(app).toContain("import { AppHeader, AppLayout, AppFooter } from '@proj/vue-components';");
+    expect(app).toContain(
+      "import { AppHeader, AppLayout, AppFooter, SessionExpiredBanner } from '@proj/vue-components';",
+    );
     expect(app).toContain('<AppHeader heading="test">');
     expect(app).toContain('<AppFooter />');
   }, 30000);
 
+  it('wires SessionExpiredBanner to a session store fed by onAuthRefreshError (not onAuthLogout)', async () => {
+    await generator(host, options);
+
+    expect(host.exists('apps/test/src/stores/session.ts')).toBeTruthy();
+    const store = host.read('apps/test/src/stores/session.ts').toString();
+    expect(store).toContain("defineStore('session'");
+    expect(store).toContain('markExpired');
+
+    // Strip // comments — main.ts legitimately explains, in prose, why
+    // onAuthLogout is the wrong hook; assert against the actual init code.
+    const mainTsCode = host
+      .read('apps/test/src/main.ts')
+      .toString()
+      .split('\n')
+      .filter((l) => !l.trim().startsWith('//'))
+      .join('\n');
+    expect(mainTsCode).toContain('onAuthRefreshError');
+    // Regression guard: onAuthLogout only fires via the session-status iframe
+    // (disabled here) or Cordova mode — it would never fire in this app.
+    expect(mainTsCode).not.toContain('onAuthLogout');
+    expect(mainTsCode).toContain('useSessionStore(pinia).markExpired()');
+
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).toContain('v-model:show="session.expired"');
+    expect(app).toContain('@sign-in="signInAgain"');
+    expect(app).toContain('@dismiss="session.dismiss"');
+  }, 30000);
+
   it('inits Keycloak with no hidden iframes so init never hangs', async () => {
     await generator(host, options);
     // Strip // comments — they legitimately reference the disabled iframe options

package/src/generators/vue-components/files/src/lib/patterns/SessionExpiredBanner.vue__tmpl__

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-// Presentational only — not yet wired to a real Keycloak session-expiry signal
-// by any generator. @dsb-norge/vue-keycloak-js has no reactive "expired" field
-// on the useKeycloak() instance; the closest real hook is the `onAuthLogout`
-// callback configured at plugin-install time in main.ts. Wiring that up is a
-// separate change (new shared reactive state + main.ts plumbing); this
-// component just renders the banner once some caller flips `show`.
+// Presentational only — flipping `show` is the consuming app's job, not this
+// component's. vue-app wires it to its session store's `expired` flag, itself
+// set from main.ts's Keycloak plugin `onAuthRefreshError` hook — NOT
+// `onAuthLogout`, which keycloak-js only fires via the session-status iframe
+// (typically disabled, e.g. via checkLoginIframe: false) or Cordova mode, so
+// it would never fire in a normal web deployment. onAuthRefreshError fires
+// from the wrapper's own background auto-refresh failing because the refresh
+// token itself expired — the real, always-on signal.
 import GoabButton from '../primitives/GoabButton.vue';
 
 const show = defineModel<boolean>('show', { default: false });