@merkaly/nuxt 0.13.5 → 0.14.1

package/README.md

@@ -169,6 +169,17 @@ To open the Auth0 signup screen instead of the login one, use `useAuth().signup(
 
 The SPA keeps the session with **refresh tokens**: the client uses `useRefreshTokens` with `localStorage` cache and logs in with `audience` and `scope: openid profile email offline_access`. Before each API call the module asks Auth0 for the current access token, which is cached and renewed with the refresh token once it expires (2 hours for `https://api.merkaly.io`). When the refresh token is gone or expired, protected surfaces (`requiresAuth: true`) go back to login instead of calling the API without a token. Account linking (`linkWithConnection(connection)`) uses a separate Auth0 client, the `auth.merkaly.io` SPA client in Auth0, with an in-memory cache, created only on the first call (no extra `checkSession` on page load). It opens a login popup for that connection and sends the popup's raw ID token to `POST /auth/identities` as `{ idToken }`; the api verifies the token (signature, issuer, audience = the account linking client, expiry) and links the identity from its `sub` into the logged-in user. Requires an api with that contract (older clients that sent `{ provider, userId }` get `400`).
 
+### Expired session (`MKAuthExpired`)
+
+When the session ends while the app is open (refresh token revoked, rotated or expired), the module does not log the user out and does not call the API with a dead token:
+
+- `getTokenSilently` failing with a "no session" error (`login_required`, `invalid_grant`, `missing_refresh_token`, `consent_required`, `interaction_required`) after the user had a token calls `useAuth().expire()`: it clears `token` and sets `isExpired`.
+- An API `401` for a signed-in user renews the token once (`getTokenSilently({ cacheMode: 'off' })`) and repeats the request; the hooks of the first attempt do not run. If the repeated request gets `401` again (after boot), it calls `expire()` too. Boot failures still go to the `error` slot.
+- `MKApp` mounts `MKAuthExpired` once: a modal that cannot be dismissed, with a single button that calls `useAuth().relogin()` (`loginWithRedirect` with `appState.target` = current path and query), so the user lands back on the same page. Texts in `en`, `es` and `pt` (local i18n block).
+- One state (`auth:expired`), so many failing calls show a single modal. Anonymous visitors (store, www) never had a token, so they never see it.
+
+Apps need nothing beyond rendering `MKApp`.
+
 ### Calling app header
 
 Every API request carries the app's Auth0 client id (`merkaly.auth0.client`) in the `x-merkaly-client` header: the `$api` plugin adds it to server-side calls and the `/api` proxy sets it on every forwarded request (overwriting whatever the browser sent). The api checks it against its list of Auth0 applications and, on authenticated requests, against the token `azp` (api doc: [`docs/conventions/surface-clients.md`](https://github.com/merkaly-io/api.merkaly.io/blob/master/docs/conventions/surface-clients.md)). An app without `merkaly.auth0.client` sends no header.
@@ -343,3 +354,28 @@ setMoneyDefaults({
 - `MKInputMoney`: `v-model` in cents; props `currency`, `locale`. `prefix`, `decimal`,
   `thousands` and `placeholder` default to the resolved currency/locale and can still
   be passed explicitly.
+
+## Datagrid (`useDatagrid`, `MKTableDatagrid`)
+
+`useDatagrid(options)` builds the reactive state that `MKTableDatagrid` renders.
+`options` is a `MaybeRefOrGetter`: a plain object, a ref or a getter returning it.
+
+With a getter (or ref) the `columns` are recomputed reactively, so titles from i18n
+follow a locale change. The rest of the options (`items`, `limit`, `total`, `search`,
+`row`, ...) are read once as initial values; the state (`items`, `page`, `loading`,
+...) is never reset by a recompute.
+
+```ts
+const { t: $t } = useI18n();
+
+const $datagrid = useDatagrid<OrderEntity>(() => ({
+  columns: {
+    number: { title: $t('order.number') }, // follows the locale
+    total: { title: $t('order.total'), class: 'text-end' },
+  },
+  limit: 20, // initial value only
+}));
+```
+
+A plain object still works and keeps the previous behavior (static columns). Without
+`title` the header falls back to the column key in sentence case.

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.14.0"
   },
-  "version": "0.13.5",
+  "version": "0.14.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/app.vue

@@ -5,6 +5,7 @@ import { useAuth, useOrganization, watchOnce, addRouteMiddleware, useNuxtApp, us
 import AuthMiddleware from "../middleware/auth";
 import { useNavigation } from "../composables/useNavigation";
 import AuthError from "./auth/AuthError.vue";
+import AuthExpired from "./auth/AuthExpired.vue";
 import { useColorMode } from "@vueuse/core";
 import { Notivue, NotificationProgress, Notification, pastelTheme } from "notivue";
 const $route = useRoute();
@@ -41,6 +42,8 @@ hook("page:finish", () => regenerate());
       <slot v-else>
         <NuxtPage />
       </slot>
+
+      <AuthExpired />
     </BApp>
   </main>
 </template>

package/dist/runtime/components/auth/AuthExpired.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/auth/AuthExpired.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref, useAuth } from "#imports";
+import { useI18n } from "vue-i18n";
+const { isExpired, relogin } = useAuth();
+const { t } = useI18n({ useScope: "local" });
+const isRedirecting = ref(false);
+function signIn() {
+  isRedirecting.value = true;
+  relogin().catch(() => isRedirecting.value = false);
+}
+</script>
+
+<template>
+  <BModal :model-value="isExpired" :title="t('title')" centered no-close-on-backdrop no-close-on-esc no-header-close>
+    <p class="mb-0" v-text="t('message')" />
+
+    <template #footer>
+      <BButton :loading="isRedirecting" variant="primary" @click="signIn">
+        <span v-text="t('signIn')" />
+      </BButton>
+    </template>
+  </BModal>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "message": "For your security, sign in again to continue where you left off.",
+    "signIn": "Sign in again",
+    "title": "Your session expired"
+  },
+  "es": {
+    "message": "Por tu seguridad, vuelve a entrar para continuar donde estabas.",
+    "signIn": "Entrar de nuevo",
+    "title": "Tu sesión expiró"
+  },
+  "pt": {
+    "message": "Por segurança, entre novamente para continuar de onde parou.",
+    "signIn": "Entrar novamente",
+    "title": "Sua sessão expirou"
+  }
+}
+</i18n>

package/dist/runtime/components/auth/AuthExpired.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -16,10 +16,13 @@ export declare const useAuth: () => {
     claims: import("vue").Ref<User | undefined, User | undefined>;
     clear: () => undefined;
     error: import("vue").Ref<AuthError | undefined, AuthError | undefined>;
+    expire: () => void;
     fail: (reason: AuthError) => Promise<void>;
     isAuthenticated: import("vue").ComputedRef<boolean>;
+    isExpired: import("vue").Ref<boolean, boolean>;
     isLoading: import("vue").Ref<boolean, boolean>;
     logout: () => any;
+    relogin: () => any;
     retry: () => Promise<void>;
     signup: ({ redirectTo }?: {
         redirectTo?: string;

package/dist/runtime/composables/useAuth.js

@@ -7,10 +7,16 @@ export const useAuth = () => {
   const token = useState("auth:token", () => null);
   const isLoading = useState("auth:loading", () => true);
   const error = useState("auth:error", () => void 0);
+  const isExpired = useState("auth:expired", () => false);
   const isAuthenticated = computed(() => Boolean(claims.value?.sub));
   const user = useBootstrapStage(nuxtApp, "user");
   const clear = () => error.value = void 0;
   const logout = () => nuxtApp.$auth0.logout();
+  const expire = () => {
+    token.value = null;
+    isExpired.value = true;
+  };
+  const relogin = () => nuxtApp.$auth0.loginWithRedirect({ appState: { target: location.pathname + location.search } });
   const signup = ({ redirectTo = "/" } = {}) => nuxtApp.$auth0.loginWithRedirect({
     appState: { target: redirectTo },
     authorizationParams: { screen_hint: "signup" }
@@ -33,10 +39,13 @@ export const useAuth = () => {
     claims,
     clear,
     error,
+    expire,
     fail,
     isAuthenticated,
+    isExpired,
     isLoading,
     logout,
+    relogin,
     retry,
     signup,
     token,

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

@@ -1,3 +1,4 @@
+import type { MaybeRefOrGetter } from 'vue';
 export interface ColumnDefinition<C = unknown> {
     class?: string;
     getter?: (row: C) => unknown;
@@ -44,5 +45,5 @@ interface OptionArgs<D> {
     search?: string;
     total?: number;
 }
-export declare function useDatagrid<D = unknown>(params: OptionArgs<D>): DataGrid<D>;
+export declare function useDatagrid<D = unknown>(options: MaybeRefOrGetter<OptionArgs<D>>): DataGrid<D>;
 export {};

package/dist/runtime/composables/useDatagrid.js

@@ -1,11 +1,14 @@
-import { reactive } from "vue";
-export function useDatagrid(params) {
+import { computed, isRef, reactive, toValue } from "vue";
+export function useDatagrid(options) {
+  const params = toValue(options);
+  const isDynamic = typeof options === "function" || isRef(options);
+  const columns = isDynamic ? computed(() => toValue(options).columns) : params.columns;
   const state = reactive({
-    columns: params.columns,
+    columns,
     error: params.error ?? null,
     fn: {
-      addItem(item, options = {}) {
-        const mode = options.mode ?? "append";
+      addItem(item, options2 = {}) {
+        const mode = options2.mode ?? "append";
         if (mode === "prepend") {
           state.items.unshift(item);
         } else if (mode === "append") {

package/dist/runtime/composables/useNotify.js

@@ -1,5 +1,5 @@
 import { push } from "notivue";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useModal } from "bootstrap-vue-next";
 export function useNotify() {
   const $modal = useModal();
@@ -26,14 +26,13 @@ export function useNotify() {
     instance.show();
   }
   function confirm(options) {
-    const busy = ref(false);
-    const instance = $modal.create(computed(() => ({
+    const setBusy = (busy) => props.value = { ...props.value, busy, noCloseOnEsc: busy };
+    const props = ref({
       body: options.message,
-      busy: busy.value,
-      // disables both buttons
+      busy: false,
       cancelTitle: options.cancelText || "Cancel",
       cancelVariant: "secondary",
-      noCloseOnEsc: busy.value,
+      noCloseOnEsc: false,
       okTitle: options.confirmText || "OK",
       okVariant: options.variant || "primary",
       onHidden: () => void instance.destroy(),
@@ -42,11 +41,12 @@ export function useNotify() {
         const result = options.onConfirm?.();
         if (!(result instanceof Promise)) return;
         event.preventDefault();
-        busy.value = true;
-        result.then((value) => value !== false && instance.hide("ok")).finally(() => void (busy.value = false));
+        setBusy(true);
+        result.then((value) => value !== false && instance.hide("ok")).finally(() => setBusy(false));
       },
       title: options.title || "Confirm"
-    })));
+    });
+    const instance = $modal.create(props);
     instance.show();
   }
   return { toast, alert, confirm };

package/dist/runtime/plugins/api.global.js

@@ -7,13 +7,16 @@ function serverBaseURL(api, global) {
   return prefix ? `${api.url.replace(/\/+$/, "")}/${prefix}` : api.url;
 }
 export default defineNuxtPlugin(({ provide }) => {
-  const requestHost = import.meta.server ? useRequestURL().host : void 0;
+  const requestHost = import.meta.server ? useRequestURL({ xForwardedHost: true }).host : void 0;
   if (import.meta.server && import.meta.dev && new URL(useRuntimeConfig().public.merkaly.api.url).hostname.endsWith(".test")) {
     process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
   }
   const nuxtApp = useNuxtApp();
-  provide("api", async (url, options = {}) => {
-    const { token } = useAuth();
+  const renewed = /* @__PURE__ */ new WeakSet();
+  const api = async (url, options = {}) => {
+    const { claims, expire, isExpired, isLoading, token } = useAuth();
+    const canRenew = import.meta.client && Boolean(claims.value) && !isExpired.value && !renewed.has(options);
+    let unauthorized = false;
     if (import.meta.client && token.value) await nuxtApp.$auth0?.getTokenSilently();
     const { id: tenant } = useOrganization();
     const { public: { merkaly } } = useRuntimeConfig();
@@ -27,6 +30,7 @@ This surface has requiresTenant: true. Possible causes:
   3. The adapter should use { global: true } to bypass tenant enforcement.`
       );
     }
+    let result;
     await $fetch(url, {
       baseURL: import.meta.server ? serverBaseURL(merkaly.api, options.global) : "/api",
       body: options?.body,
@@ -45,8 +49,8 @@ This surface has requiresTenant: true. Possible causes:
         if (options.meta) options.meta.value = {};
         if (options.error) options.error.value = void 0;
         if (options.loading) options.loading.value = true;
-        const result = await Promise.resolve(options?.onBeforeSend?.({ body: options.body, headers: options.headers, query: options.query })).then((res) => res).catch(() => false);
-        if (result === false) {
+        const result2 = await Promise.resolve(options?.onBeforeSend?.({ body: options.body, headers: options.headers, query: options.query })).then((res) => res).catch(() => false);
+        if (result2 === false) {
           options.controller?.abort?.("Request aborted by onBeforeSend");
         }
       },
@@ -59,8 +63,11 @@ This surface has requiresTenant: true. Possible causes:
       onResponse: async ({ response, request }) => {
         const { status, _data, headers } = response;
         const { data, meta } = _data || {};
+        unauthorized = status === 401 && canRenew;
+        if (unauthorized) return;
         await options?.onResponse?.({ response, request });
         if (status >= 400) return;
+        result = data;
         await options?.onSuccess?.({ data, meta, headers, params: options.params });
         if (options.data) options.data.value = data;
         if (options.meta) options.meta.value = meta;
@@ -68,7 +75,9 @@ This surface has requiresTenant: true. Possible causes:
         if (options.loading) options.loading.value = false;
       },
       onResponseError: async ({ response, request }) => {
-        const { _data } = response;
+        const { _data, status } = response;
+        if (unauthorized) return;
+        if (status === 401 && renewed.has(options) && !isLoading.value) expire();
         await options.onError?.(_data, { response, request });
         if (options.error) options.error.value = _data;
         await options?.onComplete?.({ response, request });
@@ -77,6 +86,11 @@ This surface has requiresTenant: true. Possible causes:
       query: options?.query,
       retry: false,
       signal: options.controller?.signal
-    }).catch((reason) => reason);
-  });
+    }).catch(() => void 0);
+    if (!unauthorized) return result;
+    const retry = { ...options };
+    renewed.add(retry);
+    return nuxtApp.$auth0.getTokenSilently({ cacheMode: "off" }).then(() => api(url, retry));
+  };
+  provide("api", api);
 });

package/dist/runtime/plugins/auth0.client.js

@@ -15,7 +15,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     domain: $config.merkaly.auth0.domain,
     useRefreshTokens: true
   });
-  const { claims, error, isLoading, token, fail } = useAuth();
+  const { claims, error, expire, isLoading, token, fail } = useAuth();
   const isStarting = useState("auth:starting", () => false);
   const self0 = Object.assign(Object.create(Object.getPrototypeOf(auth0)), auth0);
   let tokenError;
@@ -25,6 +25,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     return token.value = result;
   }).catch((err) => {
     tokenError = err;
+    if (token.value && NO_SESSION_ERRORS.includes(err.error)) return expire();
     console.warn("[Auth0] getTokenSilently failed \u2013 fallback, user logged in?", err);
   });
   const resolveIdentity = () => Promise.allSettled([auth0.getUser(), auth0.getTokenSilently()]);
@@ -94,12 +95,19 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       throw new Error("Failed to get ID token for linking");
     }
     const { $api } = useNuxtApp();
-    return await $api("/auth/identities", {
+    let failure;
+    const linked = await $api("/auth/identities", {
       // the api verifies it and derives the identity
       body: { idToken: idClaims.__raw },
       global: true,
-      method: "POST"
+      method: "POST",
+      onError: (reason) => void (failure = reason ?? {}),
+      // api error body
+      onFatal: (reason) => void (failure = reason ?? {})
+      // network or aborted
     });
+    if (failure) throw new Error(String(failure.message || "Failed to link the account"));
+    return linked;
   };
   const isAuthCallback = window.location.pathname === callbackPath;
   if (isAuthCallback) {

package/dist/runtime/server/middleware/proxy.js

@@ -29,7 +29,7 @@ export default defineEventHandler((event) => {
   }
   const { public: $config } = useRuntimeConfig();
   const targetOrigin = new URL($config.merkaly.api.url);
-  const url = getRequestURL(event);
+  const url = getRequestURL(event, { xForwardedHost: true });
   const prefix = isGlobalRequest(event.node.req.headers[GLOBAL_API_HEADER]) ? "" : $config.merkaly.api.prefix;
   const path = resolveProxyPath(prefix, url.pathname, url.search);
   event.node.req.headers["x-forwarded-host"] = url.host;

package/dist/runtime/types/nuxt.d.ts

@@ -10,7 +10,7 @@ type MerkalyAuth0Client = Auth0Client & {
 declare module '#app' {
   interface NuxtApp {
     $auth0: MerkalyAuth0Client;
-    $api: <T = unknown>(url: string, options?: ApiOptions) => Promise<T>;
+    $api: <T = unknown>(url: string, options?: ApiOptions) => Promise<T | undefined>; // undefined when the request fails
     $gmap: never;
   }
 
@@ -25,7 +25,7 @@ declare module '#app' {
 declare module 'vue' {
   interface ComponentCustomProperties {
     $auth0: MerkalyAuth0Client;
-    $api: <T = unknown>(url: string, options?: ApiOptions) => Promise<T>;
+    $api: <T = unknown>(url: string, options?: ApiOptions) => Promise<T | undefined>; // undefined when the request fails
     $gmap: never;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.13.5",
+  "version": "0.14.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -52,9 +52,11 @@
     "change-case": "^5.4.4",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.15.1",
+    "defu": "^6.1.7",
     "eslint": "^10.14.0",
     "filesize": "^11.0.17",
     "gsap": "^3.15.0",
+    "jiti": "^2.7.0",
     "notivue": "^2.4.5",
     "nuxt": "^4.6.3",
     "posthog-js": "^1.447.1",
@@ -63,19 +65,16 @@
     "typescript": "~5.9.3",
     "v-money3": "^3.26.1",
     "vite-svg-loader": "^5.1.1",
-    "vue": "^3.5.43",
+    "vue": "^3.5.45",
     "vue-router": "^5.4.0",
     "vue-select": "4.0.0-beta.6"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.6.0",
+    "@nuxt/schema": "^4.6.4",
     "changelogen": "^0.6.2",
     "vue-tsc": "^3.3.4"
   },
-  "optionalDependencies": {
-    "defu": "^6.1.7"
-  },
   "engines": {
     "node": ">=24"
   },