create-nuxt-base 1.1.2 → 2.0.0

package/nuxt-base-template/package.json

@@ -41,6 +41,7 @@
     "@better-auth/passkey": "1.4.10",
     "@hey-api/client-fetch": "0.13.1",
     "@lenne.tech/bug.lt": "latest",
+    "@lenne.tech/nuxt-extensions": "1.0.1",
     "@nuxt/image": "2.0.0",
     "@nuxt/ui": "4.3.0",
     "@pinia/nuxt": "0.11.3",

package/nuxt-base-template/server/api/iam/[...path].ts

@@ -28,8 +28,9 @@ export default defineEventHandler(async (event) => {
     body = await readBody(event);
   }
 
-  // Forward cookies from the incoming request
+  // Forward cookies and authorization from the incoming request
   const cookieHeader = getHeader(event, 'cookie');
+  const authHeader = getHeader(event, 'authorization');
   // Use the actual origin from the request, fallback to localhost
   const originHeader = getHeader(event, 'origin') || getHeader(event, 'referer')?.replace(/\/[^/]*$/, '') || 'http://localhost:3001';
 
@@ -39,8 +40,9 @@ export default defineEventHandler(async (event) => {
     body: body ? JSON.stringify(body) : undefined,
     headers: {
       'Content-Type': 'application/json',
-      'Origin': originHeader,
+      Origin: originHeader,
       ...(cookieHeader ? { Cookie: cookieHeader } : {}),
+      ...(authHeader ? { Authorization: authHeader } : {}),
     },
     credentials: 'include',
     // Don't throw on error status codes
@@ -50,10 +52,16 @@ export default defineEventHandler(async (event) => {
   // Forward Set-Cookie headers from the API response
   const setCookieHeaders = response.headers.getSetCookie?.() || [];
   for (const cookie of setCookieHeaders) {
-    // Rewrite cookie to work on localhost (remove domain/port specifics)
+    // Rewrite cookie to work on localhost:
+    // 1. Remove domain (cookie will be set for current origin)
+    // 2. Remove secure flag (not needed for localhost)
+    // 3. Rewrite path from /iam to /api/iam (or set to / for broader access)
     const rewrittenCookie = cookie
       .replace(/domain=[^;]+;?\s*/gi, '')
-      .replace(/secure;?\s*/gi, '');
+      .replace(/secure;?\s*/gi, '')
+      // Ensure path is set to / so cookies work for all routes
+      .replace(/path=\/iam[^;]*;?\s*/gi, 'path=/; ')
+      .replace(/path=[^;]+;?\s*/gi, 'path=/; ');
     appendResponseHeader(event, 'Set-Cookie', rewrittenCookie);
   }
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "create-nuxt-base",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "license": "MIT",
+  "author": "lenne.Tech GmbH",
   "repository": {
     "url": "https://github.com/lenneTech/nuxt-base-starter"
   },
-  "author": "lenne.Tech GmbH",
   "bin": {
     "create-nuxt-base": "./index.js"
   },

package/nuxt-base-template/app/components/Transition/TransitionFade.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    leaveDuration?: `${number}` | number;
-    startDuration?: `${number}` | number;
-  }>(),
-  {
-    leaveDuration: 100,
-    startDuration: 100,
-  },
-);
-</script>
-
-<template>
-  <div :style="`--start-duration: ${props.startDuration}ms; --leave-duration: ${props.leaveDuration}ms;`">
-    <Transition
-      enter-active-class="transition ease-out duration-[--start-duration]"
-      enter-from-class="transform opacity-0"
-      enter-to-class="transform opacity-100"
-      leave-active-class="transition ease-in duration-[--leave-duration]"
-      leave-from-class="transform opacity-100"
-      leave-to-class="transform opacity-0"
-    >
-      <slot></slot>
-    </Transition>
-  </div>
-</template>

package/nuxt-base-template/app/components/Transition/TransitionFadeScale.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    leaveDuration?: `${number}` | number;
-    startDuration?: `${number}` | number;
-  }>(),
-  {
-    leaveDuration: 100,
-    startDuration: 100,
-  },
-);
-</script>
-
-<template>
-  <div :style="`--start-duration: ${props.startDuration}ms; --leave-duration: ${props.leaveDuration}ms;`">
-    <Transition
-      enter-active-class="transition ease-out duration-[--start-duration]"
-      enter-from-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-[--leave-duration]"
-      leave-from-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
-    >
-      <slot></slot>
-    </Transition>
-  </div>
-</template>

package/nuxt-base-template/app/components/Transition/TransitionSlide.vue

@@ -1,12 +0,0 @@
-<template>
-  <Transition
-    enter-active-class="transition ease-out duration-500"
-    enter-from-class="transform translate-x-full"
-    enter-to-class="transform translate-x-0"
-    leave-active-class="transition ease-in duration-500"
-    leave-from-class="transform translate-x-0"
-    leave-to-class="transform translate-x-full"
-  >
-    <slot></slot>
-  </Transition>
-</template>

package/nuxt-base-template/app/components/Transition/TransitionSlideBottom.vue

@@ -1,12 +0,0 @@
-<template>
-  <Transition
-    enter-active-class="transition ease-out duration-500"
-    enter-from-class="transform translate-y-full"
-    enter-to-class="transform translate-y-0"
-    leave-active-class="transition ease-in duration-500"
-    leave-from-class="transform translate-y-0"
-    leave-to-class="transform translate-y-full"
-  >
-    <slot></slot>
-  </Transition>
-</template>

package/nuxt-base-template/app/components/Transition/TransitionSlideRevert.vue

@@ -1,12 +0,0 @@
-<template>
-  <Transition
-    enter-active-class="transition ease-out duration-500"
-    enter-from-class="transform translate-x-[-100%]"
-    enter-to-class="transform translate-x-0"
-    leave-active-class="transition ease-in duration-500"
-    leave-from-class="transform translate-x-0"
-    leave-to-class="transform translate-x-[-100%]"
-  >
-    <slot></slot>
-  </Transition>
-</template>

package/nuxt-base-template/app/composables/use-better-auth.ts

@@ -1,415 +0,0 @@
-import { authClient } from '~/lib/auth-client';
-import { arrayBufferToBase64Url, base64UrlToUint8Array } from '~/utils/crypto';
-
-/**
- * User type for Better Auth session
- */
-interface BetterAuthUser {
-  email: string;
-  emailVerified?: boolean;
-  id: string;
-  name?: string;
-  role?: string;
-  twoFactorEnabled?: boolean;
-}
-
-/**
- * Stored auth state (persisted in cookie for SSR compatibility)
- */
-interface StoredAuthState {
-  user: BetterAuthUser | null;
-}
-
-/**
- * Result of passkey authentication
- */
-interface PasskeyAuthResult {
-  error?: string;
-  success: boolean;
-  user?: BetterAuthUser;
-}
-
-/**
- * Better Auth composable with client-side state management
- *
- * This composable manages auth state using:
- * 1. Client-side state stored in a cookie (for SSR compatibility)
- * 2. Better Auth's session endpoint as a validation check
- *
- * The state is populated after login and cleared on logout.
- */
-export function useBetterAuth() {
-  // Use useCookie for SSR-compatible persistent state
-  const authState = useCookie<StoredAuthState>('auth-state', {
-    default: () => ({ user: null }),
-    maxAge: 60 * 60 * 24 * 7, // 7 days
-    sameSite: 'lax',
-  });
-
-  // Auth token cookie (for 2FA sessions where no session cookie is set)
-  const authToken = useCookie<string | null>('auth-token', {
-    default: () => null,
-    maxAge: 60 * 60 * 24 * 7, // 7 days
-    sameSite: 'lax',
-  });
-
-  // Loading state
-  const isLoading = ref<boolean>(false);
-
-  // Computed properties based on stored state
-  const user = computed<BetterAuthUser | null>(() => authState.value?.user ?? null);
-  const isAuthenticated = computed<boolean>(() => !!user.value);
-  const isAdmin = computed<boolean>(() => user.value?.role === 'admin');
-  const is2FAEnabled = computed<boolean>(() => user.value?.twoFactorEnabled ?? false);
-
-  /**
-   * Set user data after successful login/signup
-   */
-  function setUser(userData: BetterAuthUser | null): void {
-    authState.value = { user: userData };
-  }
-
-  /**
-   * Clear user data on logout
-   */
-  function clearUser(): void {
-    authState.value = { user: null };
-  }
-
-  /**
-   * Validate session with backend (called on app init)
-   * If session is invalid, clear the stored state
-   */
-  async function validateSession(): Promise<boolean> {
-    try {
-      // Try to get session from Better Auth
-      const session = authClient.useSession();
-
-      // Wait for session to load
-      if (session.value.isPending) {
-        await new Promise((resolve) => {
-          const unwatch = watch(
-            () => session.value.isPending,
-            (isPending) => {
-              if (!isPending) {
-                unwatch();
-                resolve(true);
-              }
-            },
-            { immediate: true },
-          );
-        });
-      }
-
-      // If session has user data, update our state
-      if (session.value.data?.user) {
-        setUser(session.value.data.user as BetterAuthUser);
-        return true;
-      }
-
-      // Session not found - check if we have a stored token cookie
-      // If we have auth-state but no session, it might be a mismatch
-      // For now, trust the stored state if token cookie exists
-      const tokenCookie = useCookie('token');
-      if (tokenCookie.value && authState.value?.user) {
-        // We have both token and stored user - trust it
-        return true;
-      }
-
-      // No valid session found - clear state
-      if (authState.value?.user) {
-        clearUser();
-      }
-      return false;
-    } catch (error) {
-      console.debug('Session validation failed:', error);
-      return !!authState.value?.user;
-    }
-  }
-
-  /**
-   * Sign in with email and password
-   */
-  const signIn = {
-    ...authClient.signIn,
-    email: async (params: { email: string; password: string; rememberMe?: boolean }, options?: any) => {
-      isLoading.value = true;
-      try {
-        const result = await authClient.signIn.email(params, options);
-
-        // Check for successful response with user data
-        if (result && 'user' in result && result.user) {
-          setUser(result.user as BetterAuthUser);
-        } else if (result && 'data' in result && result.data?.user) {
-          setUser(result.data.user as BetterAuthUser);
-        }
-
-        return result;
-      } finally {
-        isLoading.value = false;
-      }
-    },
-  };
-
-  /**
-   * Sign up with email and password
-   */
-  const signUp = {
-    ...authClient.signUp,
-    email: async (params: { email: string; name: string; password: string }, options?: any) => {
-      isLoading.value = true;
-      try {
-        const result = await authClient.signUp.email(params, options);
-
-        // Check for successful response with user data
-        if (result && 'user' in result && result.user) {
-          setUser(result.user as BetterAuthUser);
-        } else if (result && 'data' in result && result.data?.user) {
-          setUser(result.data.user as BetterAuthUser);
-        }
-
-        return result;
-      } finally {
-        isLoading.value = false;
-      }
-    },
-  };
-
-  /**
-   * Sign out
-   */
-  const signOut = async (options?: any) => {
-    isLoading.value = true;
-    try {
-      const result = await authClient.signOut(options);
-      // Clear user data on logout
-      clearUser();
-      return result;
-    } finally {
-      isLoading.value = false;
-    }
-  };
-
-  /**
-   * Authenticate with a passkey (WebAuthn)
-   *
-   * This function handles the complete WebAuthn authentication flow:
-   * 1. Fetches authentication options from the server
-   * 2. Prompts the user to select a passkey via the browser's WebAuthn API
-   * 3. Sends the signed credential to the server for verification
-   * 4. Stores user data on successful authentication
-   *
-   * @returns Result with success status, user data, or error message
-   */
-  async function authenticateWithPasskey(): Promise<PasskeyAuthResult> {
-    isLoading.value = true;
-
-    try {
-      // In development, use the Nuxt proxy to ensure cookies are sent correctly
-      // In production, use the direct API URL
-      const isDev = import.meta.dev;
-      const runtimeConfig = useRuntimeConfig();
-      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
-
-      // Step 1: Get authentication options from server
-      const optionsResponse = await fetch(`${apiBase}/passkey/generate-authenticate-options`, {
-        method: 'GET',
-        credentials: 'include',
-      });
-
-      if (!optionsResponse.ok) {
-        return { success: false, error: 'Konnte Passkey-Optionen nicht laden' };
-      }
-
-      const options = await optionsResponse.json();
-
-      // Step 2: Convert challenge from base64url to ArrayBuffer
-      const challengeBuffer = base64UrlToUint8Array(options.challenge).buffer as ArrayBuffer;
-
-      // Step 3: Get credential from browser's WebAuthn API
-      const credential = (await navigator.credentials.get({
-        publicKey: {
-          challenge: challengeBuffer,
-          rpId: options.rpId,
-          allowCredentials: options.allowCredentials || [],
-          userVerification: options.userVerification,
-          timeout: options.timeout,
-        },
-      })) as PublicKeyCredential | null;
-
-      if (!credential) {
-        return { success: false, error: 'Kein Passkey ausgewählt' };
-      }
-
-      // Step 4: Convert credential response to base64url format
-      const response = credential.response as AuthenticatorAssertionResponse;
-      const credentialBody = {
-        id: credential.id,
-        rawId: arrayBufferToBase64Url(credential.rawId),
-        type: credential.type,
-        response: {
-          authenticatorData: arrayBufferToBase64Url(response.authenticatorData),
-          clientDataJSON: arrayBufferToBase64Url(response.clientDataJSON),
-          signature: arrayBufferToBase64Url(response.signature),
-          userHandle: response.userHandle ? arrayBufferToBase64Url(response.userHandle) : null,
-        },
-        clientExtensionResults: credential.getClientExtensionResults?.() || {},
-      };
-
-      // Step 5: Verify with server
-      // Note: The server expects { response: credentialData } format (matching @simplewebauthn/browser output)
-      const authResponse = await fetch(`${apiBase}/passkey/verify-authentication`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ response: credentialBody }),
-      });
-
-      const result = await authResponse.json();
-
-      if (!authResponse.ok) {
-        return { success: false, error: result.message || 'Passkey-Anmeldung fehlgeschlagen' };
-      }
-
-      // Store user data after successful passkey login
-      if (result.user) {
-        setUser(result.user as BetterAuthUser);
-      }
-
-      return { success: true, user: result.user as BetterAuthUser };
-    } catch (err: unknown) {
-      // Handle WebAuthn-specific errors
-      if (err instanceof Error && err.name === 'NotAllowedError') {
-        return { success: false, error: 'Passkey-Authentifizierung wurde abgebrochen' };
-      }
-      return { success: false, error: err instanceof Error ? err.message : 'Passkey-Anmeldung fehlgeschlagen' };
-    } finally {
-      isLoading.value = false;
-    }
-  }
-
-  /**
-   * Register a new passkey for the current user
-   *
-   * This function handles the complete WebAuthn registration flow:
-   * 1. Fetches registration options from the server
-   * 2. Prompts the user to create a passkey via the browser's WebAuthn API
-   * 3. Sends the credential to the server for storage
-   *
-   * @param name - Optional name for the passkey
-   * @returns Result with success status or error message
-   */
-  async function registerPasskey(name?: string): Promise<{ success: boolean; error?: string; passkey?: any }> {
-    isLoading.value = true;
-
-    try {
-      // In development, use the Nuxt proxy to ensure cookies are sent correctly
-      // In production, use the direct API URL
-      const isDev = import.meta.dev;
-      const runtimeConfig = useRuntimeConfig();
-      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
-
-      // Step 1: Get registration options from server
-      const optionsResponse = await fetch(`${apiBase}/passkey/generate-register-options`, {
-        method: 'GET',
-        credentials: 'include',
-      });
-
-      if (!optionsResponse.ok) {
-        const error = await optionsResponse.json().catch(() => ({}));
-        return { success: false, error: error.message || 'Konnte Registrierungsoptionen nicht laden' };
-      }
-
-      const options = await optionsResponse.json();
-
-      // Step 2: Convert challenge from base64url to ArrayBuffer
-      const challengeBuffer = base64UrlToUint8Array(options.challenge).buffer as ArrayBuffer;
-
-      // Step 3: Convert user.id from base64url to ArrayBuffer
-      const userIdBuffer = base64UrlToUint8Array(options.user.id).buffer as ArrayBuffer;
-
-      // Step 4: Create credential via browser's WebAuthn API
-      const credential = (await navigator.credentials.create({
-        publicKey: {
-          challenge: challengeBuffer,
-          rp: options.rp,
-          user: {
-            ...options.user,
-            id: userIdBuffer,
-          },
-          pubKeyCredParams: options.pubKeyCredParams,
-          timeout: options.timeout,
-          attestation: options.attestation,
-          authenticatorSelection: options.authenticatorSelection,
-          excludeCredentials: (options.excludeCredentials || []).map((cred: any) => ({
-            ...cred,
-            id: base64UrlToUint8Array(cred.id).buffer as ArrayBuffer,
-          })),
-        },
-      })) as PublicKeyCredential | null;
-
-      if (!credential) {
-        return { success: false, error: 'Passkey-Erstellung abgebrochen' };
-      }
-
-      // Step 5: Convert credential response to base64url format
-      const attestationResponse = credential.response as AuthenticatorAttestationResponse;
-      const credentialBody = {
-        name,
-        response: {
-          id: credential.id,
-          rawId: arrayBufferToBase64Url(credential.rawId),
-          type: credential.type,
-          response: {
-            attestationObject: arrayBufferToBase64Url(attestationResponse.attestationObject),
-            clientDataJSON: arrayBufferToBase64Url(attestationResponse.clientDataJSON),
-            transports: attestationResponse.getTransports?.() || [],
-          },
-          clientExtensionResults: credential.getClientExtensionResults?.() || {},
-        },
-      };
-
-      // Step 6: Send to server for verification and storage
-      const registerResponse = await fetch(`${apiBase}/passkey/verify-registration`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(credentialBody),
-      });
-
-      const result = await registerResponse.json();
-
-      if (!registerResponse.ok) {
-        return { success: false, error: result.message || 'Passkey-Registrierung fehlgeschlagen' };
-      }
-
-      return { success: true, passkey: result };
-    } catch (err: unknown) {
-      if (err instanceof Error && err.name === 'NotAllowedError') {
-        return { success: false, error: 'Passkey-Erstellung wurde abgebrochen' };
-      }
-      return { success: false, error: err instanceof Error ? err.message : 'Passkey-Registrierung fehlgeschlagen' };
-    } finally {
-      isLoading.value = false;
-    }
-  }
-
-  return {
-    authenticateWithPasskey,
-    changePassword: authClient.changePassword,
-    clearUser,
-    is2FAEnabled,
-    isAdmin,
-    isAuthenticated,
-    isLoading: computed(() => isLoading.value),
-    passkey: authClient.passkey,
-    registerPasskey,
-    setUser,
-    signIn,
-    signOut,
-    signUp,
-    twoFactor: authClient.twoFactor,
-    user,
-    validateSession,
-  };
-}

package/nuxt-base-template/app/composables/use-file.ts

@@ -1,71 +0,0 @@
-interface FileInfo {
-  [key: string]: unknown;
-  filename: string;
-  id: string;
-  mimetype: string;
-  size: number;
-  url?: string;
-}
-
-export function useFile() {
-  const config = useRuntimeConfig();
-
-  function isValidMongoID(id: string): boolean {
-    return /^[a-f\d]{24}$/i.test(id);
-  }
-
-  async function getFileInfo(id: string | undefined): Promise<FileInfo | null | string> {
-    if (!id) {
-      return null;
-    }
-
-    if (!isValidMongoID(id)) {
-      return id;
-    }
-
-    try {
-      const response = await $fetch<FileInfo>(config.public.host + '/files/info/' + id, {
-        credentials: 'include',
-        method: 'GET',
-      });
-      return response;
-    } catch (error) {
-      console.error('Error fetching file info:', error);
-      return null;
-    }
-  }
-
-  function getFileUrl(id: string): string {
-    return `${config.public.host}/files/${id}`;
-  }
-
-  function getDownloadUrl(id: string, filename?: string): string {
-    const base = `${config.public.host}/files/download/${id}`;
-    return filename ? `${base}?filename=${encodeURIComponent(filename)}` : base;
-  }
-
-  function formatFileSize(bytes: number): string {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-  }
-
-  function formatDuration(seconds: number): string {
-    if (seconds < 60) return `${seconds}s`;
-    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    return `${hours}h ${minutes}m`;
-  }
-
-  return {
-    formatDuration,
-    formatFileSize,
-    getDownloadUrl,
-    getFileInfo,
-    getFileUrl,
-    isValidMongoID,
-  };
-}

package/nuxt-base-template/app/composables/use-share.ts

@@ -1,38 +0,0 @@
-export function useShare() {
-  const route = useRoute();
-
-  async function share(title?: string, text?: string, url?: string) {
-    if (!import.meta.client) {
-      return;
-    }
-
-    if (window?.navigator?.share) {
-      try {
-        await window.navigator.share({
-          text: text ?? window.location.origin,
-          title: title,
-          url: url ?? route.fullPath,
-        });
-      } catch (error) {
-        console.error('Error sharing:', error);
-      }
-    } else {
-      // Fallback: Copy to clipboard
-      try {
-        await navigator.clipboard.writeText(url ?? window.location.origin);
-        const toast = useToast();
-        toast.add({
-          color: 'success',
-          description: 'Der Link wurde in die Zwischenablage kopiert.',
-          title: 'Link kopiert',
-        });
-      } catch (error) {
-        console.error('Error copying to clipboard:', error);
-      }
-    }
-  }
-
-  return {
-    share,
-  };
-}