create-nuxt-base 0.3.16 → 1.0.2

package/nuxt-base-template/app/composables/use-tus-upload.ts

@@ -0,0 +1,278 @@
+import * as tus from 'tus-js-client';
+
+import type { UploadItem, UploadOptions, UploadProgress, UseTusUploadReturn } from '~/interfaces/upload.interface';
+
+export function useTusUpload(defaultOptions: UploadOptions = {}): UseTusUploadReturn {
+  const config = useRuntimeConfig();
+
+  // State
+  const uploadItems = ref<Map<string, UploadItem>>(new Map());
+  const tusUploads = ref<Map<string, tus.Upload>>(new Map());
+
+  // Default config
+  const defaultConfig: UploadOptions = {
+    autoStart: true,
+    chunkSize: 5 * 1024 * 1024, // 5MB chunks
+    endpoint: `${config.public.host}/files/upload`,
+    parallelUploads: 3,
+    retryDelays: [0, 1000, 3000, 5000, 10000],
+    ...defaultOptions,
+  };
+
+  // Computed
+  const uploads = computed(() => Array.from(uploadItems.value.values()));
+  const isUploading = computed(() => uploads.value.some((u) => u.status === 'uploading'));
+  const totalProgress = computed<UploadProgress>(() => {
+    const items = uploads.value;
+    if (items.length === 0) {
+      return { bytesTotal: 0, bytesUploaded: 0, percentage: 0, remainingTime: 0, speed: 0 };
+    }
+
+    const bytesUploaded = items.reduce((acc, i) => acc + i.progress.bytesUploaded, 0);
+    const bytesTotal = items.reduce((acc, i) => acc + i.progress.bytesTotal, 0);
+    const speed = items.reduce((acc, i) => acc + i.progress.speed, 0);
+
+    return {
+      bytesTotal,
+      bytesUploaded,
+      percentage: bytesTotal > 0 ? Math.round((bytesUploaded / bytesTotal) * 100) : 0,
+      remainingTime: speed > 0 ? Math.ceil((bytesTotal - bytesUploaded) / speed) : 0,
+      speed,
+    };
+  });
+
+  // Helper: Generate unique ID
+  function generateId(): string {
+    return `upload_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+  }
+
+  // Helper: Calculate speed with smoothing
+  function createSpeedTracker() {
+    let lastBytes = 0;
+    let lastTime = Date.now();
+    let smoothedSpeed = 0;
+
+    return (bytesUploaded: number): number => {
+      const now = Date.now();
+      const timeDiff = (now - lastTime) / 1000;
+      const bytesDiff = bytesUploaded - lastBytes;
+
+      if (timeDiff > 0) {
+        const currentSpeed = bytesDiff / timeDiff;
+        // Exponential moving average for smoother display
+        smoothedSpeed = smoothedSpeed === 0 ? currentSpeed : smoothedSpeed * 0.7 + currentSpeed * 0.3;
+      }
+
+      lastBytes = bytesUploaded;
+      lastTime = now;
+
+      return Math.round(smoothedSpeed);
+    };
+  }
+
+  // Update item in map (triggers reactivity)
+  function updateItem(id: string, updates: Partial<UploadItem>): void {
+    const item = uploadItems.value.get(id);
+    if (item) {
+      const newMap = new Map(uploadItems.value);
+      newMap.set(id, { ...item, ...updates });
+      uploadItems.value = newMap;
+    }
+  }
+
+  // Create TUS upload instance
+  function createTusUpload(item: UploadItem, options: UploadOptions): tus.Upload {
+    const speedTracker = createSpeedTracker();
+
+    return new tus.Upload(item.file, {
+      chunkSize: options.chunkSize || defaultConfig.chunkSize,
+      endpoint: options.endpoint || defaultConfig.endpoint,
+      headers: options.headers,
+      metadata: {
+        filename: item.file.name,
+        filetype: item.file.type,
+        ...options.metadata,
+        ...item.metadata,
+      },
+      onBeforeRequest: (req) => {
+        const xhr = req.getUnderlyingObject() as XMLHttpRequest;
+        xhr.withCredentials = true;
+      },
+      onError: (error) => {
+        updateItem(item.id, {
+          error: error.message,
+          status: 'error',
+        });
+        options.onError?.(uploadItems.value.get(item.id)!, error);
+      },
+
+      onProgress: (bytesUploaded, bytesTotal) => {
+        const speed = speedTracker(bytesUploaded);
+        const percentage = Math.round((bytesUploaded / bytesTotal) * 100);
+        const remainingTime = speed > 0 ? Math.ceil((bytesTotal - bytesUploaded) / speed) : 0;
+
+        updateItem(item.id, {
+          progress: { bytesTotal, bytesUploaded, percentage, remainingTime, speed },
+        });
+
+        options.onProgress?.(uploadItems.value.get(item.id)!);
+      },
+
+      onShouldRetry: (err) => {
+        const status = (err as { originalResponse?: { getStatus?: () => number } }).originalResponse?.getStatus?.();
+        // Don't retry on 4xx errors (except 429 Too Many Requests)
+        if (status && status >= 400 && status < 500 && status !== 429) {
+          return false;
+        }
+        return true;
+      },
+
+      onSuccess: () => {
+        const tusUpload = tusUploads.value.get(item.id);
+        const currentItem = uploadItems.value.get(item.id);
+        updateItem(item.id, {
+          completedAt: new Date(),
+          progress: { ...currentItem!.progress, percentage: 100 },
+          status: 'completed',
+          url: tusUpload?.url ?? undefined,
+        });
+        options.onSuccess?.(uploadItems.value.get(item.id)!);
+      },
+
+      retryDelays: options.retryDelays || defaultConfig.retryDelays,
+    });
+  }
+
+  // Actions
+  function addFiles(files: File | File[]): string[] {
+    const fileArray = Array.isArray(files) ? files : [files];
+    const ids: string[] = [];
+
+    for (const file of fileArray) {
+      const id = generateId();
+      const item: UploadItem = {
+        file,
+        id,
+        metadata: defaultConfig.metadata,
+        progress: { bytesTotal: file.size, bytesUploaded: 0, percentage: 0, remainingTime: 0, speed: 0 },
+        status: 'idle',
+      };
+
+      const newMap = new Map(uploadItems.value);
+      newMap.set(id, item);
+      uploadItems.value = newMap;
+
+      const tusUpload = createTusUpload(item, defaultConfig);
+      tusUploads.value.set(id, tusUpload);
+
+      ids.push(id);
+    }
+
+    if (defaultConfig.autoStart) {
+      startAll();
+    }
+
+    return ids;
+  }
+
+  function startUpload(id: string): void {
+    const item = uploadItems.value.get(id);
+    const tusUpload = tusUploads.value.get(id);
+
+    if (item && tusUpload && item.status !== 'uploading') {
+      updateItem(id, { startedAt: new Date(), status: 'uploading' });
+
+      // Check for previous uploads to resume
+      tusUpload.findPreviousUploads().then((previousUploads) => {
+        const previousUpload = previousUploads[0];
+        if (previousUpload) {
+          tusUpload.resumeFromPreviousUpload(previousUpload);
+        }
+        tusUpload.start();
+      });
+    }
+  }
+
+  function startAll(): void {
+    const pending = uploads.value.filter((u) => u.status === 'idle' || u.status === 'paused');
+    const currentlyUploading = uploads.value.filter((u) => u.status === 'uploading').length;
+    const limit = (defaultConfig.parallelUploads || 3) - currentlyUploading;
+
+    pending.slice(0, Math.max(0, limit)).forEach((item) => startUpload(item.id));
+  }
+
+  function pauseUpload(id: string): void {
+    const tusUpload = tusUploads.value.get(id);
+    if (tusUpload) {
+      tusUpload.abort();
+      updateItem(id, { status: 'paused' });
+    }
+  }
+
+  function pauseAll(): void {
+    uploads.value.filter((u) => u.status === 'uploading').forEach((item) => pauseUpload(item.id));
+  }
+
+  function resumeUpload(id: string): void {
+    startUpload(id);
+  }
+
+  function resumeAll(): void {
+    uploads.value.filter((u) => u.status === 'paused').forEach((item) => resumeUpload(item.id));
+  }
+
+  function cancelUpload(id: string): void {
+    const tusUpload = tusUploads.value.get(id);
+    if (tusUpload) {
+      tusUpload.abort();
+    }
+    tusUploads.value.delete(id);
+
+    const newMap = new Map(uploadItems.value);
+    newMap.delete(id);
+    uploadItems.value = newMap;
+  }
+
+  function cancelAll(): void {
+    uploads.value.forEach((item) => cancelUpload(item.id));
+  }
+
+  function removeUpload(id: string): void {
+    cancelUpload(id);
+  }
+
+  function clearCompleted(): void {
+    uploads.value.filter((u) => u.status === 'completed').forEach((item) => removeUpload(item.id));
+  }
+
+  function retryUpload(id: string): void {
+    const item = uploadItems.value.get(id);
+    if (item && item.status === 'error') {
+      updateItem(id, { error: undefined, status: 'idle' });
+      startUpload(id);
+    }
+  }
+
+  function getUpload(id: string): undefined | UploadItem {
+    return uploadItems.value.get(id);
+  }
+
+  return {
+    addFiles,
+    cancelAll,
+    cancelUpload,
+    clearCompleted,
+    getUpload,
+    isUploading,
+    pauseAll,
+    pauseUpload,
+    removeUpload,
+    resumeAll,
+    resumeUpload,
+    retryUpload,
+    startAll,
+    startUpload,
+    totalProgress,
+    uploads,
+  };
+}

package/nuxt-base-template/app/error.vue

@@ -1,49 +1,13 @@
 <script setup lang="ts">
-const props = defineProps({
-  error: Object,
-});
+import type { NuxtError } from '#app';
 
-console.error(props.error);
-const debugWord = ref<string>('');
-const { current } = useMagicKeys();
-
-watch(
-  () => current.values(),
-  () => {
-    if (current.values().next().value === 'escape') {
-      debugWord.value = '';
-      return;
-    }
-
-    if (debugWord.value === 'debug') {
-      return;
-    }
-
-    if (current.values().next().value && !debugWord.value.includes(current.values().next().value)) {
-      debugWord.value += current.values().next().value;
-    }
-  },
-);
-
-const handleError = () => clearError({ redirect: '/' });
+defineProps<{
+  error: NuxtError;
+}>();
 </script>
 
 <template>
-  <NuxtLayout>
-    <div class="w-full min-h-screen flex flex-col justify-center items-center">
-      <div class="w-full flex flex-col items-center mb-20">
-        <h1 class="text-[12rem] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400">Oops!</h1>
-        <h2 v-if="error?.statusCode" class="text-3xl text-gray-600">
-          {{ error?.statusCode }}
-        </h2>
-      </div>
-
-      <pre v-if="debugWord === 'debug'" class="w-full max-w-3xl mb-5 mx-auto bg-black/80 text-white font-mono p-2 rounded-lg overflow-x-scroll">
-      {{ { error } }}
-    </pre
-      >
-
-      <BaseButton color="primary" appearance="outline" @click="handleError"> Zurück zur Startseite </BaseButton>
-    </div>
-  </NuxtLayout>
+  <UApp>
+    <UError :error="error" />
+  </UApp>
 </template>

package/nuxt-base-template/app/interfaces/upload.interface.ts

@@ -0,0 +1,58 @@
+import type { ComputedRef } from 'vue';
+
+export interface UploadItem {
+  completedAt?: Date;
+  error?: string;
+  file: File;
+  id: string;
+  metadata?: Record<string, string>;
+  progress: UploadProgress;
+  startedAt?: Date;
+  status: UploadStatus;
+  url?: string;
+}
+
+export interface UploadOptions {
+  autoStart?: boolean;
+  chunkSize?: number;
+  endpoint?: string;
+  headers?: Record<string, string>;
+  metadata?: Record<string, string>;
+  onError?: (item: UploadItem, error: Error) => void;
+  onProgress?: (item: UploadItem) => void;
+  onSuccess?: (item: UploadItem) => void;
+  parallelUploads?: number;
+  retryDelays?: number[];
+}
+
+export interface UploadProgress {
+  bytesTotal: number;
+  bytesUploaded: number;
+  percentage: number;
+  remainingTime: number; // seconds
+  speed: number; // bytes/second
+}
+
+export type UploadStatus = 'completed' | 'error' | 'idle' | 'paused' | 'uploading';
+
+export interface UseTusUploadReturn {
+  // Actions
+  addFiles: (files: File | File[]) => string[];
+  cancelAll: () => void;
+  cancelUpload: (id: string) => void;
+  clearCompleted: () => void;
+  getUpload: (id: string) => undefined | UploadItem;
+
+  // State
+  isUploading: ComputedRef<boolean>;
+  pauseAll: () => void;
+  pauseUpload: (id: string) => void;
+  removeUpload: (id: string) => void;
+  resumeAll: () => void;
+  resumeUpload: (id: string) => void;
+  retryUpload: (id: string) => void;
+  startAll: () => void;
+  startUpload: (id: string) => void;
+  totalProgress: ComputedRef<UploadProgress>;
+  uploads: ComputedRef<UploadItem[]>;
+}

package/nuxt-base-template/app/interfaces/user.interface.ts

@@ -0,0 +1,12 @@
+export interface User {
+  banExpires?: Date;
+  banned?: boolean;
+  banReason?: string;
+  email: string;
+  emailVerified: boolean;
+  id: string;
+  image?: string;
+  name?: string;
+  role?: string;
+  twoFactorEnabled?: boolean;
+}

package/nuxt-base-template/app/layouts/default.vue

@@ -1,8 +1,80 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui';
+
+const headerItems = computed<NavigationMenuItem[]>(() => [
+  {
+    label: 'Docs',
+    to: '#',
+  },
+  {
+    label: 'Components',
+    to: '#',
+  },
+  {
+    label: 'Figma',
+    target: '_blank',
+    to: '#',
+  },
+  {
+    label: 'Releases',
+    target: '_blank',
+    to: '#',
+  },
+]);
+
+const footerItems: NavigationMenuItem[] = [
+  {
+    label: 'Figma Kit',
+    target: '_blank',
+    to: '#',
+  },
+  {
+    label: 'Playground',
+    target: '_blank',
+    to: '#',
+  },
+  {
+    label: 'Releases',
+    target: '_blank',
+    to: '#',
+  },
+];
+</script>
 
 <template>
-  <div>
-    <NuxtLoadingIndicator />
-    <slot></slot>
+  <div class="flex flex-col min-h-screen">
+    <UHeader>
+      <template #title>
+        <UIcon name="i-lucide-code" class="text-primary" />
+      </template>
+
+      <UNavigationMenu :items="headerItems" />
+
+      <template #right>
+        <UColorModeButton />
+
+        <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
+          <UButton color="neutral" variant="ghost" to="https://github.com/lenneTech/nuxt-base-starter" target="_blank" icon="i-simple-icons-github" aria-label="GitHub" />
+        </UTooltip>
+      </template>
+    </UHeader>
+    <UMain>
+      <slot></slot>
+    </UMain>
+    <USeparator icon="i-simple-icons-nuxtdotjs" type="dashed" class="h-px" />
+
+    <UFooter>
+      <template #left>
+        <p class="text-muted text-sm">Copyright © {{ new Date().getFullYear() }}</p>
+      </template>
+
+      <UNavigationMenu :items="footerItems" variant="link" />
+
+      <template #right>
+        <UButton icon="i-simple-icons-discord" color="neutral" variant="ghost" to="#" target="_blank" aria-label="Discord" />
+        <UButton icon="i-simple-icons-x" color="neutral" variant="ghost" to="#" target="_blank" aria-label="X" />
+        <UButton icon="i-simple-icons-github" color="neutral" variant="ghost" to="#" target="_blank" aria-label="GitHub" />
+      </template>
+    </UFooter>
   </div>
 </template>

package/nuxt-base-template/app/layouts/slim.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="min-h-screen flex justify-center items-center">
+    <slot></slot>
+  </div>
+</template>

package/nuxt-base-template/app/lib/auth-client.ts

@@ -0,0 +1,135 @@
+import { passkeyClient } from '@better-auth/passkey/client';
+import { adminClient, twoFactorClient } from 'better-auth/client/plugins';
+import { createAuthClient } from 'better-auth/vue';
+
+import { sha256 } from '~/utils/crypto';
+
+// =============================================================================
+// Type Definitions
+// =============================================================================
+
+/**
+ * Normalized response type for Better-Auth operations
+ * The Vue client returns complex union types - this provides a consistent interface
+ */
+export interface AuthResponse {
+  data?: null | {
+    redirect?: boolean;
+    token?: null | string;
+    url?: string;
+    user?: {
+      createdAt?: Date;
+      email?: string;
+      emailVerified?: boolean;
+      id?: string;
+      image?: string;
+      name?: string;
+      updatedAt?: Date;
+    };
+  };
+  error?: null | {
+    code?: string;
+    message?: string;
+    status?: number;
+  };
+}
+
+// =============================================================================
+// Base Client Configuration
+// =============================================================================
+
+const baseClient = createAuthClient({
+  basePath: '/iam', // IMPORTANT: Must match nest-server betterAuth.basePath, default: '/iam'
+  baseURL: import.meta.env?.VITE_API_URL || process.env.API_URL || 'http://localhost:3000',
+  plugins: [
+    adminClient(),
+    twoFactorClient({
+      onTwoFactorRedirect() {
+        navigateTo('/auth/2fa');
+      },
+    }),
+    passkeyClient(),
+  ],
+});
+
+// =============================================================================
+// Auth Client with Password Hashing
+// =============================================================================
+
+/**
+ * Extended auth client that hashes passwords before transmission.
+ *
+ * SECURITY: Passwords are hashed with SHA256 client-side to prevent
+ * plain text password transmission over the network.
+ *
+ * The server's normalizePasswordForIam() detects SHA256 hashes (64 hex chars)
+ * and processes them correctly.
+ */
+export const authClient = {
+  // Spread all base client properties and methods
+  ...baseClient,
+
+  /**
+   * Change password for an authenticated user (both passwords are hashed)
+   */
+  changePassword: async (params: { currentPassword: string; newPassword: string }, options?: any) => {
+    const [hashedCurrent, hashedNew] = await Promise.all([sha256(params.currentPassword), sha256(params.newPassword)]);
+    return baseClient.changePassword?.({ currentPassword: hashedCurrent, newPassword: hashedNew }, options);
+  },
+
+  /**
+   * Reset password with token (new password is hashed before sending)
+   */
+  resetPassword: async (params: { newPassword: string; token: string }, options?: any) => {
+    const hashedPassword = await sha256(params.newPassword);
+    return baseClient.resetPassword?.({ newPassword: hashedPassword, token: params.token }, options);
+  },
+
+  // Override signIn to hash password
+  signIn: {
+    ...baseClient.signIn,
+    /**
+     * Sign in with email and password (password is hashed before sending)
+     */
+    email: async (params: { email: string; password: string; rememberMe?: boolean }, options?: any) => {
+      const hashedPassword = await sha256(params.password);
+      return baseClient.signIn.email({ ...params, password: hashedPassword }, options);
+    },
+  },
+
+  // Explicitly pass through signOut (not captured by spread operator)
+  signOut: baseClient.signOut,
+
+  // Override signUp to hash password
+  signUp: {
+    ...baseClient.signUp,
+    /**
+     * Sign up with email and password (password is hashed before sending)
+     */
+    email: async (params: { email: string; name: string; password: string }, options?: any) => {
+      const hashedPassword = await sha256(params.password);
+      return baseClient.signUp.email({ ...params, password: hashedPassword }, options);
+    },
+  },
+
+  // Override twoFactor to hash passwords
+  twoFactor: {
+    ...baseClient.twoFactor,
+    /**
+     * Disable 2FA (password is hashed before sending)
+     */
+    disable: async (params: { password: string }, options?: any) => {
+      const hashedPassword = await sha256(params.password);
+      return baseClient.twoFactor.disable({ password: hashedPassword }, options);
+    },
+    /**
+     * Enable 2FA (password is hashed before sending)
+     */
+    enable: async (params: { password: string }, options?: any) => {
+      const hashedPassword = await sha256(params.password);
+      return baseClient.twoFactor.enable({ password: hashedPassword }, options);
+    },
+  },
+};
+
+export type AuthClient = typeof authClient;

package/nuxt-base-template/app/middleware/admin.global.ts

@@ -1,9 +1,23 @@
-export default defineNuxtRouteMiddleware((to) => {
-  const { currentUserState } = useAuthState();
+export default defineNuxtRouteMiddleware(async (to) => {
+  // Only check routes starting with /app/admin
+  if (!to.path.startsWith('/app/admin')) {
+    return;
+  }
+
+  const { isAdmin, isAuthenticated, isLoading } = useBetterAuth();
+
+  // Wait for session to load
+  if (isLoading.value) {
+    return;
+  }
+
+  // Redirect to login if not authenticated
+  if (!isAuthenticated.value) {
+    return navigateTo('/auth/login');
+  }
 
-  if (to.fullPath.startsWith('/app/admin')) {
-    if (!currentUserState?.value?.roles?.includes('admin')) {
-      return navigateTo('/app');
-    }
+  // Redirect to /app if authenticated but not admin
+  if (!isAdmin.value) {
+    return navigateTo('/app');
   }
 });

package/nuxt-base-template/app/middleware/auth.global.ts

@@ -1,9 +1,18 @@
-export default defineNuxtRouteMiddleware((to) => {
-  const { accessTokenState } = useAuthState();
+export default defineNuxtRouteMiddleware(async (to) => {
+  // Only check routes starting with /app (but not /app/admin, handled by admin middleware)
+  if (!to.path.startsWith('/app') || to.path.startsWith('/app/admin')) {
+    return;
+  }
+
+  const { isAuthenticated, isLoading } = useBetterAuth();
+
+  // Wait for session to load
+  if (isLoading.value) {
+    return;
+  }
 
-  if (to.fullPath.startsWith('/app')) {
-    if (!accessTokenState?.value) {
-      return navigateTo('/auth/login');
-    }
+  // Redirect to login if not authenticated
+  if (!isAuthenticated.value) {
+    return navigateTo('/auth/login');
   }
 });