@merkaly/nuxt 0.7.11 → 0.8.1

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.14.0"
   },
-  "version": "0.7.11",
+  "version": "0.8.1",
   "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/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;

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.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,38 @@ 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 = async () => {
+    if (user.value && !token.value && tokenError && !NO_SESSION_ERRORS.includes(tokenError.error)) {
+      return fail({ message: tokenError.error_description || tokenError.message, stage: "token" });
+    }
+    if (user.value && !token.value && tokenError) {
+      user.value = void 0;
+      await self0.logout({ openUrl: false });
+    }
+    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 +82,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/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.11",
+  "version": "0.8.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -33,7 +33,7 @@
     "@nuxt/devtools": "^3.4.0",
     "@nuxt/eslint": "1.17.0",
     "@nuxt/eslint-config": "^1.17.0",
-    "@nuxt/fonts": "1.1.0",
+    "@nuxt/fonts": "1.2.0",
     "@nuxt/image": "^2.2.0",
     "@nuxt/kit": "^4.6.0",
     "@nuxtjs/i18n": "^10.6.0",