create-nuxt-base 0.3.17 → 1.0.3

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/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

@@ -0,0 +1,23 @@
+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');
+  }
+
+  // Redirect to /app if authenticated but not admin
+  if (!isAdmin.value) {
+    return navigateTo('/app');
+  }
+});

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

@@ -0,0 +1,18 @@
+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;
+  }
+
+  // Redirect to login if not authenticated
+  if (!isAuthenticated.value) {
+    return navigateTo('/auth/login');
+  }
+});

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

@@ -0,0 +1,18 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  // Only check /auth/login route
+  if (to.path !== '/auth/login') {
+    return;
+  }
+
+  const { isAuthenticated, isLoading } = useBetterAuth();
+
+  // Wait for session to load
+  if (isLoading.value) {
+    return;
+  }
+
+  // Redirect to /app if already authenticated
+  if (isAuthenticated.value) {
+    return navigateTo('/app');
+  }
+});

package/nuxt-base-template/app/pages/app/settings/security.vue

@@ -0,0 +1,409 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+import ModalBackupCodes from '~/components/Modal/ModalBackupCodes.vue';
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Interfaces
+// ============================================================================
+interface Passkey {
+  createdAt: Date;
+  id: string;
+  name?: string;
+}
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+const overlay = useOverlay();
+const { is2FAEnabled, user } = useBetterAuth();
+
+// ============================================================================
+// Variables
+// ============================================================================
+const loading = ref<boolean>(false);
+const totpUri = ref<string>('');
+const backupCodes = ref<string[]>([]);
+const showTotpSetup = ref<boolean>(false);
+const show2FADisable = ref<boolean>(false);
+const passkeys = ref<Passkey[]>([]);
+const passkeyLoading = ref<boolean>(false);
+const newPasskeyName = ref<string>('');
+const showAddPasskey = ref<boolean>(false);
+
+const passwordSchema = v.object({
+  password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(1, 'Passwort ist erforderlich')),
+});
+
+const totpSchema = v.object({
+  code: v.pipe(v.string('Code ist erforderlich'), v.length(6, 'Code muss 6 Ziffern haben')),
+});
+
+type PasswordSchema = InferOutput<typeof passwordSchema>;
+type TotpSchema = InferOutput<typeof totpSchema>;
+
+// ============================================================================
+// Lifecycle Hooks
+// ============================================================================
+onMounted(async () => {
+  await loadPasskeys();
+});
+
+async function addPasskey(): Promise<void> {
+  if (!newPasskeyName.value.trim()) {
+    toast.add({
+      color: 'error',
+      description: 'Bitte gib einen Namen für den Passkey ein',
+      title: 'Fehler',
+    });
+    return;
+  }
+
+  passkeyLoading.value = true;
+
+  try {
+    const { error } = await authClient.passkey.addPasskey({
+      name: newPasskeyName.value,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Passkey konnte nicht hinzugefügt werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: 'Passkey wurde erfolgreich hinzugefügt',
+      title: 'Erfolg',
+    });
+
+    newPasskeyName.value = '';
+    showAddPasskey.value = false;
+    await loadPasskeys();
+  } finally {
+    passkeyLoading.value = false;
+  }
+}
+
+async function deletePasskey(id: string): Promise<void> {
+  passkeyLoading.value = true;
+
+  try {
+    const { error } = await authClient.passkey.deletePasskey({
+      id,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Passkey konnte nicht gelöscht werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: 'Passkey wurde gelöscht',
+      title: 'Erfolg',
+    });
+
+    await loadPasskeys();
+  } finally {
+    passkeyLoading.value = false;
+  }
+}
+
+async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.twoFactor.disable({
+      password: payload.data.password,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || '2FA konnte nicht deaktiviert werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: '2FA wurde deaktiviert',
+      title: 'Erfolg',
+    });
+
+    show2FADisable.value = false;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { data, error } = await authClient.twoFactor.enable({
+      password: payload.data.password,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || '2FA konnte nicht aktiviert werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    totpUri.value = data?.totpURI ?? '';
+    backupCodes.value = data?.backupCodes ?? [];
+    showTotpSetup.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function loadPasskeys(): Promise<void> {
+  try {
+    const { data, error } = await authClient.passkey.listUserPasskeys();
+
+    if (error) {
+      console.error('Failed to load passkeys:', error);
+      return;
+    }
+
+    passkeys.value = (data ?? []) as Passkey[];
+  } catch {
+    console.error('Failed to load passkeys');
+  }
+}
+
+async function openBackupCodesModal(codes: string[] = []): Promise<void> {
+  const modal = overlay.create(ModalBackupCodes, {
+    props: {
+      initialCodes: codes,
+    },
+  });
+  await modal.open();
+}
+
+async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.twoFactor.verifyTotp({
+      code: payload.data.code,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Code ungültig',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: '2FA wurde erfolgreich aktiviert',
+      title: 'Erfolg',
+    });
+
+    showTotpSetup.value = false;
+    await openBackupCodesModal(backupCodes.value);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl space-y-8">
+    <div>
+      <h1 class="text-2xl font-bold">Sicherheit</h1>
+      <p class="text-muted">Verwalte deine Sicherheitseinstellungen</p>
+    </div>
+
+    <!-- 2FA Section -->
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-3">
+          <UIcon name="i-lucide-shield-check" class="size-6 text-primary" />
+          <div>
+            <h2 class="font-semibold">Zwei-Faktor-Authentifizierung</h2>
+            <p class="text-sm text-muted">Zusätzliche Sicherheit für dein Konto</p>
+          </div>
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="font-medium">Status</p>
+            <p class="text-sm text-muted">
+              {{ is2FAEnabled ? '2FA ist aktiviert' : '2FA ist deaktiviert' }}
+            </p>
+          </div>
+          <UBadge :color="is2FAEnabled ? 'success' : 'neutral'">
+            {{ is2FAEnabled ? 'Aktiv' : 'Inaktiv' }}
+          </UBadge>
+        </div>
+
+        <template v-if="!is2FAEnabled && !showTotpSetup">
+          <UForm :schema="passwordSchema" class="space-y-4" @submit="enable2FA">
+            <UFormField label="Passwort bestätigen" name="password">
+              <UInput name="password" type="password" placeholder="Dein Passwort" />
+            </UFormField>
+            <UButton type="submit" :loading="loading"> 2FA aktivieren </UButton>
+          </UForm>
+        </template>
+
+        <template v-if="showTotpSetup">
+          <div class="space-y-4">
+            <UAlert color="info" icon="i-lucide-info"> Scanne den QR-Code mit deiner Authenticator-App (z.B. Google Authenticator, Authy) und gib den Code ein. </UAlert>
+
+            <div class="flex justify-center">
+              <img v-if="totpUri" :src="`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(totpUri)}`" alt="TOTP QR Code" class="rounded-lg" />
+            </div>
+
+            <UForm :schema="totpSchema" class="space-y-4" @submit="verifyTotp">
+              <UFormField label="Verifizierungscode" name="code">
+                <UInput name="code" placeholder="000000" class="text-center font-mono" />
+              </UFormField>
+              <div class="flex gap-2">
+                <UButton type="submit" :loading="loading"> Verifizieren </UButton>
+                <UButton variant="outline" color="neutral" @click="showTotpSetup = false"> Abbrechen </UButton>
+              </div>
+            </UForm>
+          </div>
+        </template>
+
+        <template v-if="is2FAEnabled && !show2FADisable">
+          <div class="flex gap-2">
+            <UButton variant="outline" @click="show2FADisable = true"> 2FA deaktivieren </UButton>
+            <UButton variant="outline" color="neutral" @click="openBackupCodesModal()"> Backup-Codes anzeigen </UButton>
+          </div>
+        </template>
+
+        <template v-if="show2FADisable">
+          <UForm :schema="passwordSchema" class="space-y-4" @submit="disable2FA">
+            <UAlert color="warning" icon="i-lucide-alert-triangle"> 2FA zu deaktivieren verringert die Sicherheit deines Kontos. </UAlert>
+            <UFormField label="Passwort bestätigen" name="password">
+              <UInput name="password" type="password" placeholder="Dein Passwort" />
+            </UFormField>
+            <div class="flex gap-2">
+              <UButton type="submit" color="error" :loading="loading"> 2FA deaktivieren </UButton>
+              <UButton variant="outline" color="neutral" @click="show2FADisable = false"> Abbrechen </UButton>
+            </div>
+          </UForm>
+        </template>
+      </div>
+    </UCard>
+
+    <!-- Passkeys Section -->
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-3">
+          <UIcon name="i-lucide-fingerprint" class="size-6 text-primary" />
+          <div>
+            <h2 class="font-semibold">Passkeys</h2>
+            <p class="text-sm text-muted">Passwordlose Anmeldung mit biometrischen Daten</p>
+          </div>
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <template v-if="passkeys.length > 0">
+          <div class="divide-y">
+            <div v-for="passkey in passkeys" :key="passkey.id" class="flex items-center justify-between py-3">
+              <div class="flex items-center gap-3">
+                <UIcon name="i-lucide-key" class="size-5 text-muted" />
+                <div>
+                  <p class="font-medium">{{ passkey.name || 'Unbenannter Passkey' }}</p>
+                  <p class="text-xs text-muted">Erstellt am {{ new Date(passkey.createdAt).toLocaleDateString('de-DE') }}</p>
+                </div>
+              </div>
+              <UButton variant="ghost" color="error" icon="i-lucide-trash-2" size="sm" :loading="passkeyLoading" @click="deletePasskey(passkey.id)" />
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <p class="text-center text-muted py-4">Du hast noch keine Passkeys eingerichtet.</p>
+        </template>
+
+        <template v-if="!showAddPasskey">
+          <UButton variant="outline" icon="i-lucide-plus" @click="showAddPasskey = true"> Passkey hinzufügen </UButton>
+        </template>
+
+        <template v-else>
+          <div class="flex gap-2">
+            <UInput v-model="newPasskeyName" placeholder="Name für den Passkey" class="flex-1" />
+            <UButton :loading="passkeyLoading" @click="addPasskey"> Hinzufügen </UButton>
+            <UButton
+              variant="outline"
+              color="neutral"
+              @click="
+                showAddPasskey = false;
+                newPasskeyName = '';
+              "
+            >
+              Abbrechen
+            </UButton>
+          </div>
+        </template>
+      </div>
+    </UCard>
+
+    <!-- Account Info -->
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-3">
+          <UIcon name="i-lucide-user" class="size-6 text-primary" />
+          <div>
+            <h2 class="font-semibold">Kontoinformationen</h2>
+            <p class="text-sm text-muted">Deine Kontodaten</p>
+          </div>
+        </div>
+      </template>
+
+      <div class="space-y-3">
+        <div class="flex justify-between">
+          <span class="text-muted">E-Mail</span>
+          <span class="font-medium">{{ user?.email }}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-muted">Name</span>
+          <span class="font-medium">{{ user?.name || '-' }}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-muted">E-Mail verifiziert</span>
+          <UBadge :color="user?.emailVerified ? 'success' : 'warning'">
+            {{ user?.emailVerified ? 'Ja' : 'Nein' }}
+          </UBadge>
+        </div>
+      </div>
+    </UCard>
+  </div>
+</template>