@merkaly/nuxt 0.7.10 → 0.8.0

package/dist/module.json

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

package/dist/runtime/components/app.d.vue.ts

@@ -1,8 +1,15 @@
-declare var __VLS_29: {}, __VLS_31: {};
+declare var __VLS_29: {}, __VLS_31: {
+    clear: () => undefined;
+    error: import("#imports").AuthError;
+    logout: () => any;
+    retry: () => Promise<void>;
+}, __VLS_40: {};
 type __VLS_Slots = {} & {
     loading?: (props: typeof __VLS_29) => any;
 } & {
-    default?: (props: typeof __VLS_31) => any;
+    error?: (props: typeof __VLS_31) => any;
+} & {
+    default?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/app.vue

@@ -3,10 +3,11 @@ import { useRoute } from "#app";
 import { useAuth, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
 import AuthMiddleware from "../middleware/auth";
 import { useNavigation } from "../composables/useNavigation";
+import AuthError from "./auth/AuthError.vue";
 import { useColorMode } from "@vueuse/core";
 import { Notivue, NotificationProgress, Notification, pastelTheme } from "notivue";
 const $route = useRoute();
-const { isLoading } = useAuth();
+const { clear, error, isLoading, logout, retry } = useAuth();
 const { hook } = useNuxtApp();
 useColorMode({ attribute: "data-bs-theme" });
 watchOnce(isLoading, () => AuthMiddleware($route, $route));
@@ -28,6 +29,10 @@ hook("page:finish", () => regenerate());
     <BApp>
       <slot v-if="isLoading" name="loading" />
 
+      <slot v-else-if="error" :clear="clear" :error="error" :logout="logout" :retry="retry" name="error">
+        <AuthError :error="error" @logout="logout" @retry="retry" />
+      </slot>
+
       <slot v-else>
         <NuxtPage />
       </slot>

package/dist/runtime/components/app.vue.d.ts

@@ -1,8 +1,15 @@
-declare var __VLS_29: {}, __VLS_31: {};
+declare var __VLS_29: {}, __VLS_31: {
+    clear: () => undefined;
+    error: import("#imports").AuthError;
+    logout: () => any;
+    retry: () => Promise<void>;
+}, __VLS_40: {};
 type __VLS_Slots = {} & {
     loading?: (props: typeof __VLS_29) => any;
 } & {
-    default?: (props: typeof __VLS_31) => any;
+    error?: (props: typeof __VLS_31) => any;
+} & {
+    default?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,21 @@
+import type { PropType } from 'vue';
+import type { AuthError } from '../../composables/useAuth.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: PropType<AuthError>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: () => any;
+    logout: () => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: PropType<AuthError>;
+        required: true;
+    };
+}>> & Readonly<{
+    onRetry?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  error: { type: Object, required: true }
+});
+const emit = defineEmits(["logout", "retry"]);
+const isDenied = computed(() => [401, 403].includes(props.error.status));
+const title = computed(() => isDenied.value ? "Access denied" : "We could not start your session");
+const description = computed(() => isDenied.value ? "You signed in successfully, but this account is not allowed to access this application." : "You signed in successfully, but something failed while preparing your session.");
+const details = computed(() => [props.error.stage, props.error.status, props.error.url].filter(Boolean).join(" \xB7 "));
+</script>
+
+<template>
+  <div class="d-flex flex-column justify-content-center align-items-center text-center gap-3 min-vh-100 p-5">
+    <h1 class="h3 mb-0" v-text="title" />
+
+    <p class="text-muted mb-0" v-text="description" />
+
+    <code class="small" v-text="details" />
+
+    <p class="small text-danger mb-0" v-text="props.error.message" />
+
+    <div class="d-flex gap-3">
+      <BButton v-if="props.error.stage !== 'callback'" variant="primary" @click="emit('retry')">
+        <span v-text="'Retry'" />
+      </BButton>
+
+      <BButton variant="light" @click="emit('logout')">
+        <span v-text="'Sign in with another account'" />
+      </BButton>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+import type { PropType } from 'vue';
+import type { AuthError } from '../../composables/useAuth.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: PropType<AuthError>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: () => any;
+    logout: () => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: PropType<AuthError>;
+        required: true;
+    };
+}>> & Readonly<{
+    onRetry?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,7 +1,25 @@
 import type { User } from '@auth0/auth0-spa-js';
+export type AuthErrorStage = 'callback' | 'token' | 'session' | 'tenant';
+export interface AuthError {
+    message: string;
+    stage: AuthErrorStage;
+    status?: number;
+    url?: string;
+}
+export interface AuthErrorContext {
+    clear: () => void;
+    error: AuthError;
+    logout: () => Promise<void>;
+    retry: () => Promise<void>;
+}
 export declare const useAuth: () => {
+    clear: () => undefined;
+    error: import("vue").Ref<AuthError | undefined, AuthError | undefined>;
+    fail: (reason: AuthError) => Promise<void>;
     isAuthenticated: import("vue").ComputedRef<boolean>;
     isLoading: import("vue").Ref<boolean, boolean>;
+    logout: () => any;
+    retry: () => Promise<void>;
     token: import("vue").Ref<string | null, string | null>;
     user: import("vue").Ref<User | undefined, User | undefined>;
 };

package/dist/runtime/composables/useAuth.js

@@ -1,13 +1,31 @@
 import { computed } from "vue";
-import { useState } from "#imports";
+import { useNuxtApp, useState } from "#imports";
 export const useAuth = () => {
+  const nuxtApp = useNuxtApp();
   const user = useState("auth:user", () => void 0);
   const token = useState("auth:token", () => null);
   const isLoading = useState("auth:loading", () => true);
+  const error = useState("auth:error", () => void 0);
   const isAuthenticated = computed(() => Boolean(user.value?.sub));
+  const clear = () => error.value = void 0;
+  const logout = () => nuxtApp.$auth0.logout();
+  const retry = async () => {
+    clear();
+    await nuxtApp.callHook("merkaly:auth:retry");
+  };
+  const fail = async (reason) => {
+    error.value = reason;
+    console.error(`[Auth] ${reason.stage} failed`, reason);
+    await nuxtApp.callHook("merkaly:auth:error", { clear, error: reason, logout, retry });
+  };
   return {
+    clear,
+    error,
+    fail,
     isAuthenticated,
     isLoading,
+    logout,
+    retry,
     token,
     user
   };

package/dist/runtime/middleware/auth.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").RouteMiddleware;
+declare const _default: import("#app").RouteMiddleware;
 export default _default;

package/dist/runtime/plugins/api.global.d.ts

@@ -28,7 +28,7 @@ export interface RefOptions {
 export interface HooksOptions<TData = unknown, TMeta = Record<string, unknown>, TParams = object> {
     onBeforeSend?(args: OnBeforeSendArgs): Promise<unknown> | unknown;
     onComplete?(args: OnCompleteArgs): Promise<unknown> | unknown;
-    onError?(reason: Error): Promise<unknown> | unknown;
+    onError?(reason: Error, args: OnResponseArgs): Promise<unknown> | unknown;
     onFatal?(reason: Error): Promise<unknown> | unknown;
     onResponse?(args: OnResponseArgs): Promise<unknown> | unknown;
     onSuccess?(args: OnSuccessArgs<TData, TMeta, TParams>): Promise<unknown> | unknown;
@@ -47,5 +47,5 @@ export interface ParamsOptions {
 export type ApiOptions<TData = unknown, TMeta = Record<string, unknown>, TParams = object> = ParamsOptions & HooksOptions<TData, TMeta, TParams> & RefOptions & {
     params?: TParams;
 };
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

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

@@ -54,7 +54,7 @@ This surface has requiresTenant: true. Possible causes:
     },
     onResponseError: async ({ response, request }) => {
       const { _data } = response;
-      await options.onError?.(_data);
+      await options.onError?.(_data, { response, request });
       if (options.error) options.error.value = _data;
       await options?.onComplete?.({ response, request });
       if (options.loading) options.loading.value = false;

package/dist/runtime/plugins/auth0.client.d.ts

@@ -1,6 +1,6 @@
-declare const _default: import("nuxt/app").Plugin<{
+declare const _default: import("#app").Plugin<{
     auth0: import("@auth0/auth0-spa-js").Auth0Client;
-}> & import("nuxt/app").ObjectPlugin<{
+}> & import("#app").ObjectPlugin<{
     auth0: import("@auth0/auth0-spa-js").Auth0Client;
 }>;
 export default _default;

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

@@ -3,6 +3,7 @@ import { defineNuxtPlugin, useRuntimeConfig, useNuxtApp } from "#imports";
 import { navigateTo } from "#app";
 import { defu } from "defu";
 import { useAuth } from "../composables/useAuth.js";
+const NO_SESSION_ERRORS = ["consent_required", "interaction_required", "invalid_grant", "login_required", "missing_refresh_token"];
 export default defineNuxtPlugin(async ({ callHook, hook }) => {
   const { public: $config } = useRuntimeConfig();
   const callbackPath = URL.canParse($config.merkaly.auth0.callbackUrl) ? new URL($config.merkaly.auth0.callbackUrl).pathname : $config.merkaly.auth0.callbackUrl;
@@ -12,18 +13,34 @@ export default defineNuxtPlugin(async ({ callHook, hook }) => {
     domain: $config.merkaly.auth0.domain,
     useRefreshTokens: true
   });
-  const { isLoading, user, token } = useAuth();
+  const { isLoading, user, token, fail } = useAuth();
   const self0 = Object.assign(Object.create(Object.getPrototypeOf(auth0)), auth0);
+  let tokenError;
   auth0.getUser = () => self0.getUser().then((result) => user.value = result).catch((reason) => console.error("[Auth0] getUser failed", reason));
-  auth0.getTokenSilently = (options = {}) => self0.getTokenSilently(defu({ authorizationParams: { audience: $config.merkaly.auth0.audience } }, options)).then((result) => token.value = result).catch((err) => console.warn("[Auth0] getTokenSilently failed \u2013 fallback, user logged in?", err));
+  auth0.getTokenSilently = (options = {}) => self0.getTokenSilently(defu({ authorizationParams: { audience: $config.merkaly.auth0.audience } }, options)).then((result) => {
+    tokenError = void 0;
+    return token.value = result;
+  }).catch((err) => {
+    tokenError = err;
+    console.warn("[Auth0] getTokenSilently failed \u2013 fallback, user logged in?", err);
+  });
+  const resolveIdentity = () => Promise.allSettled([auth0.getUser(), auth0.getTokenSilently()]);
   const initTenantContext = async () => {
     await callHook("merkaly:tenant", user.value);
     await callHook("merkaly:auth", user.value);
   };
-  auth0.handleRedirectCallback = () => self0.handleRedirectCallback().then(({ appState }) => Promise.allSettled([auth0.getUser(), auth0.getTokenSilently()]).then(async () => {
-    await initTenantContext();
+  const startSession = () => {
+    if (user.value && !token.value && tokenError && !NO_SESSION_ERRORS.includes(tokenError.error)) {
+      return fail({ message: tokenError.error_description || tokenError.message, stage: "token" });
+    }
+    return initTenantContext();
+  };
+  hook("merkaly:auth:retry", () => resolveIdentity().then(startSession));
+  auth0.handleRedirectCallback = () => self0.handleRedirectCallback().then(async ({ appState }) => {
+    await resolveIdentity();
+    await startSession();
     void navigateTo(appState?.target || "/");
-  })).catch(() => navigateTo("/"));
+  }, (reason) => fail({ message: reason.error_description || reason.message, stage: "callback" }));
   auth0.loginWithRedirect = (options = {}) => self0.loginWithRedirect(defu(options, {
     authorizationParams: {
       audience: $config.merkaly.auth0.audience,
@@ -61,7 +78,8 @@ export default defineNuxtPlugin(async ({ callHook, hook }) => {
   };
   const isAuthCallback = window.location.pathname === callbackPath;
   if (!isAuthCallback) {
-    await Promise.allSettled([auth0.getUser(), auth0.getTokenSilently()]).then(() => hook("app:created", initTenantContext)).catch(() => void 0);
+    await resolveIdentity();
+    hook("app:created", startSession);
   }
   isLoading.value = false;
   return { provide: { auth0 } };

package/dist/runtime/plugins/sentry.global.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

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

@@ -5,6 +5,7 @@ const TENANT_HOST_HEADER = "x-merkaly-host";
 const API_PREFIX_PATTERN = /^\/api\/?/;
 const API_ROUTE_PATTERN = /^\/api(?:\/|$)/;
 const EDGE_SLASH_PATTERN = /^\/|\/$/g;
+const EDGE_HEADER_PATTERN = /^(cf-|cdn-loop$|true-client-ip$)/;
 function normalizeSegment(value) {
   return value.replace(EDGE_SLASH_PATTERN, "");
 }
@@ -12,6 +13,9 @@ function resolveProxyPath(prefix, pathname, search) {
   const normalizedPathname = pathname.replace(API_PREFIX_PATTERN, "");
   return `/${[prefix, normalizedPathname].map(normalizeSegment).filter(Boolean).join("/")}${search}`;
 }
+function stripEdgeHeaders(headers) {
+  Object.keys(headers).filter((name) => EDGE_HEADER_PATTERN.test(name)).forEach((name) => Reflect.deleteProperty(headers, name));
+}
 function isGlobalRequest(value) {
   if (Array.isArray(value)) {
     return value.includes("true");
@@ -29,6 +33,7 @@ export default defineEventHandler((event) => {
   const path = resolveProxyPath(prefix, url.pathname, url.search);
   event.node.req.headers["x-forwarded-host"] = url.host;
   event.node.req.headers[TENANT_HOST_HEADER] = url.host;
+  stripEdgeHeaders(event.node.req.headers);
   if (import.meta.dev && targetOrigin.hostname.endsWith(".test")) {
     process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
   }

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

@@ -1,6 +1,7 @@
 import type { HookResult } from '@nuxt/schema';
 import type { Auth0Client, User } from '@auth0/auth0-spa-js';
 import type { ApiOptions } from '../plugins/api.global';
+import type { AuthErrorContext } from '../composables/useAuth';
 
 declare module '#app' {
   interface NuxtApp {
@@ -11,6 +12,8 @@ declare module '#app' {
 
   interface RuntimeNuxtHooks {
     'merkaly:auth': (user?: User) => HookResult;
+    'merkaly:auth:error': (context: AuthErrorContext) => HookResult;
+    'merkaly:auth:retry': () => HookResult;
     'merkaly:tenant': (user?: User) => HookResult;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.7.10",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -28,49 +28,47 @@
     "dist"
   ],
   "dependencies": {
-    "@auth0/auth0-spa-js": "^2.21.1",
-    "@bootstrap-vue-next/nuxt": "^0.45.5",
-    "@nuxt/devtools": "^3.2.4",
-    "@nuxt/eslint": "1.16.0",
-    "@nuxt/eslint-config": "^1.16.0",
-    "@nuxt/fonts": "0.14.0",
-    "@nuxt/image": "^2.0.0",
-    "@nuxt/kit": "^4.4.8",
-    "@nuxtjs/i18n": "^10.4.0",
-    "@nuxtjs/plausible": "^3.0.2",
-    "@sentry/nuxt": "^10.59.0",
+    "@auth0/auth0-spa-js": "^2.29.0",
+    "@bootstrap-vue-next/nuxt": "^1.0.0",
+    "@nuxt/devtools": "^3.4.0",
+    "@nuxt/eslint": "1.17.0",
+    "@nuxt/eslint-config": "^1.17.0",
+    "@nuxt/fonts": "1.1.0",
+    "@nuxt/image": "^2.2.0",
+    "@nuxt/kit": "^4.6.0",
+    "@nuxtjs/i18n": "^10.6.0",
+    "@nuxtjs/plausible": "^4.0.0",
+    "@sentry/nuxt": "^11.9.0",
     "@types/node": "latest",
     "@types/vue-select": "^3.16.8",
-    "@vueuse/components": "^14.3.0",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/integrations": "^14.3.0",
-    "@vueuse/nuxt": "^14.3.0",
+    "@vueuse/components": "^15.0.0",
+    "@vueuse/core": "^15.0.0",
+    "@vueuse/integrations": "^15.0.0",
+    "@vueuse/nuxt": "^15.0.0",
     "bootstrap": "^5.3.8",
-    "bootstrap-vue-next": "^0.45.5",
+    "bootstrap-vue-next": "^1.2.0",
     "change-case": "^5.4.4",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.15.1",
-    "eslint": "^10.5.0",
+    "eslint": "^10.13.0",
     "filesize": "^11.0.17",
     "gsap": "^3.15.0",
     "notivue": "^2.4.5",
-    "nuxt": "^4.4.8",
+    "nuxt": "^4.6.2",
     "reflect-metadata": "^0.2.2",
-    "sass": "^1.101.0",
+    "sass": "^1.106.1",
     "typescript": "~5.9.3",
     "v-money3": "^3.26.1",
     "vite-svg-loader": "^5.1.1",
-    "vue": "^3.5.38",
-    "vue-router": "^5.1.0",
+    "vue": "^3.5.43",
+    "vue-router": "^5.4.0",
     "vue-select": "4.0.0-beta.6"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.4.8",
-    "@nuxt/test-utils": "^4.0.3",
+    "@nuxt/schema": "^4.6.0",
     "changelogen": "^0.6.2",
-    "eslint-plugin-storybook": "^10.4.3",
-    "vitest": "^4.1.8",
+    "eslint-plugin-storybook": "^10.6.0",
     "vue-tsc": "^3.3.4"
   },
   "optionalDependencies": {
@@ -83,8 +81,6 @@
     "build": "nuxt-module-build build",
     "build:stub": "nuxt-module-build build --stub",
     "lint": "eslint .",
-    "test": "vitest run",
-    "test:types": "vue-tsc --noEmit",
-    "test:watch": "vitest watch"
+    "test:types": "vue-tsc --noEmit"
   }
 }