create-nuxt-base 1.2.0 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.1.0](https://github.com/lenneTech/nuxt-base-starter/compare/v2.0.0...v2.1.0) (2026-01-24)
+
+
+### Features
+
+* **tests, i18n:** add test infrastructure and error translation integration ([f8aff01](https://github.com/lenneTech/nuxt-base-starter/commit/f8aff01b5c763ea54cee270e10a1a29e2bece867))
+
+## [2.0.0](https://github.com/lenneTech/nuxt-base-starter/compare/v1.2.0...v2.0.0) (2026-01-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* Local auth, upload, and utility files replaced by package
+
+Migration to @lenne.tech/nuxt-extensions v1.0.1:
+- Remove local composables (use-better-auth, use-tus-upload, use-file, use-share, use-tw)
+- Remove local lib files (auth-client, auth-state)
+- Remove local plugins (auth-interceptor.client)
+- Remove local utils (crypto)
+- Remove local interfaces (upload.interface)
+- Remove local Transition components (now provided by package as Lt* prefix)
+- Simplify user.interface.ts to re-export LtUser from package
+- Update all imports to use auto-imported composables (useLtAuth, useLtTusUpload, etc.)
+- Update package.json to use npm package instead of yalc
+
+All authentication features now provided by the package:
+- Cookie/JWT dual-mode authentication
+- Passkey/WebAuthn support
+- 2FA/TOTP support
+- Auto-logout on 401
+
+Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+
+### Bug Fixes
+
+* use exact version 1.0.1 for [@lenne](https://github.com/lenne).tech/nuxt-extensions ([fe8d4c2](https://github.com/lenneTech/nuxt-base-starter/commit/fe8d4c21575977bd093a304adc2e18c7edc61110))
+
+
+* migrate to [@lenne](https://github.com/lenne).tech/nuxt-extensions package ([4c8b732](https://github.com/lenneTech/nuxt-base-starter/commit/4c8b732b9d017a0ff7fb21ef09136dcd7fff81f0))
+
 ## [1.2.0](https://github.com/lenneTech/nuxt-base-starter/compare/v1.1.2...v1.2.0) (2026-01-22)
 
 

package/nuxt-base-template/.github/workflows/test.yml

@@ -0,0 +1,90 @@
+name: Tests
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  unit-tests:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Run unit tests with coverage
+        run: npm run test:unit:coverage
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage-report
+          path: coverage/
+          retention-days: 7
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Check formatting
+        run: npm run format:check
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs: [unit-tests, lint]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: .output/
+          retention-days: 7

package/nuxt-base-template/app/components/Modal/ModalBackupCodes.vue

@@ -7,7 +7,8 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
-import { authClient } from '~/lib/auth-client';
+// Auth client from @lenne.tech/nuxt-extensions (auto-imported as ltAuthClient)
+const authClient = ltAuthClient;
 
 // ============================================================================
 // Props & Emits

package/nuxt-base-template/app/components/Upload/TusFileUpload.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { UploadItem } from '~/interfaces/upload.interface';
+import type { LtUploadItem } from '@lenne.tech/nuxt-extensions';
 
 // ============================================================================
 // Props & Emits
@@ -45,11 +45,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   /** Alle Uploads abgeschlossen */
-  complete: [items: UploadItem[]];
+  complete: [items: LtUploadItem[]];
   /** Upload-Fehler */
-  error: [item: UploadItem, error: Error];
+  error: [item: LtUploadItem, error: Error];
   /** Ein Upload abgeschlossen */
-  success: [item: UploadItem];
+  success: [item: LtUploadItem];
   /** Files geaendert */
   'update:modelValue': [files: File[]];
 }>();
@@ -58,12 +58,12 @@ const emit = defineEmits<{
 // Composables
 // ============================================================================
 const toast = useToast();
-const { formatDuration, formatFileSize } = useFile();
+const { formatDuration, formatFileSize } = useLtFile();
 
 // ============================================================================
 // TUS Upload Setup
 // ============================================================================
-const { addFiles, cancelAll, cancelUpload, clearCompleted, isUploading, pauseAll, pauseUpload, resumeAll, resumeUpload, retryUpload, totalProgress, uploads } = useTusUpload({
+const { addFiles, cancelAll, cancelUpload, clearCompleted, isUploading, pauseAll, pauseUpload, resumeAll, resumeUpload, retryUpload, totalProgress, uploads } = useLtTusUpload({
   autoStart: props.autoStart,
   chunkSize: props.chunkSize,
   endpoint: props.endpoint,
@@ -162,7 +162,7 @@ function getStatusLabel(status: string): string {
 // ============================================================================
 // Helpers
 // ============================================================================
-function getUploadForFile(file: File, index: number): undefined | UploadItem {
+function getUploadForFile(file: File, index: number): undefined | LtUploadItem {
   // Versuche ueber Index zu matchen (funktioniert wenn Reihenfolge gleich)
   const upload = uploads.value[index];
   if (upload?.file.name === file.name && upload?.file.size === file.size) {

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

@@ -1,12 +1,5 @@
-export interface User {
-  banExpires?: Date;
-  banned?: boolean;
-  banReason?: string;
-  email: string;
-  emailVerified: boolean;
-  id: string;
-  image?: string;
-  name?: string;
-  role?: string;
-  twoFactorEnabled?: boolean;
-}
+/**
+ * Re-export LtUser from @lenne.tech/nuxt-extensions as User
+ * This provides backwards compatibility while using the package type
+ */
+export type { LtUser as User } from '@lenne.tech/nuxt-extensions';

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
 
-const { isAuthenticated, signOut, user } = useBetterAuth();
+const { isAuthenticated, signOut, user } = useLtAuth();
 
 async function handleLogout() {
   await signOut();

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

@@ -10,7 +10,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   // On client, read directly from document.cookie for accurate state
   if (import.meta.client) {
     try {
-      const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+      const cookie = document.cookie.split('; ').find((row) => row.startsWith('lt-auth-state='));
       if (cookie) {
         const parts = cookie.split('=');
         const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
@@ -23,7 +23,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
     }
   } else {
     // On server, use useCookie
-    const authStateCookie = useCookie<{ user: { role?: string } | null; authMode: string } | null>('auth-state');
+    const authStateCookie = useCookie<{ user: { role?: string } | null; authMode: string } | null>('lt-auth-state');
     isAuthenticated = !!authStateCookie.value?.user;
     isAdmin = authStateCookie.value?.user?.role === 'admin';
   }

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

@@ -9,7 +9,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   // On client, read directly from document.cookie for accurate state
   if (import.meta.client) {
     try {
-      const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+      const cookie = document.cookie.split('; ').find((row) => row.startsWith('lt-auth-state='));
       if (cookie) {
         const parts = cookie.split('=');
         const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
@@ -21,7 +21,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
     }
   } else {
     // On server, use useCookie
-    const authStateCookie = useCookie<{ user: unknown; authMode: string } | null>('auth-state');
+    const authStateCookie = useCookie<{ user: unknown; authMode: string } | null>('lt-auth-state');
     isAuthenticated = !!authStateCookie.value?.user;
   }
 

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

@@ -9,7 +9,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   // On client, read directly from document.cookie for accurate state
   if (import.meta.client) {
     try {
-      const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+      const cookie = document.cookie.split('; ').find((row) => row.startsWith('lt-auth-state='));
       if (cookie) {
         const parts = cookie.split('=');
         const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
@@ -21,7 +21,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
     }
   } else {
     // On server, use useCookie
-    const authStateCookie = useCookie<{ user: unknown; authMode: string } | null>('auth-state');
+    const authStateCookie = useCookie<{ user: unknown; authMode: string } | null>('lt-auth-state');
     isAuthenticated = !!authStateCookie.value?.user;
   }
 

package/nuxt-base-template/app/pages/app/index.vue

@@ -2,7 +2,7 @@
 // ============================================================================
 // Composables
 // ============================================================================
-const { user, signOut } = useBetterAuth();
+const { user, signOut } = useLtAuth();
 
 // ============================================================================
 // Variables

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

@@ -2,13 +2,7 @@
 // ============================================================================
 // 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
@@ -24,7 +18,8 @@ interface Passkey {
 // ============================================================================
 const toast = useToast();
 const overlay = useOverlay();
-const { is2FAEnabled, registerPasskey, setUser, user } = useBetterAuth();
+const { is2FAEnabled, registerPasskey, setUser, user } = useLtAuth();
+const authClient = useLtAuthClient();
 
 // ============================================================================
 // Variables
@@ -39,21 +34,10 @@ const passkeyLoading = ref<boolean>(false);
 const newPasskeyName = ref<string>('');
 const showAddPasskey = ref<boolean>(false);
 
-// Form states for UForm (required for proper data binding)
-const enable2FAForm = reactive({ password: '' });
-const disable2FAForm = reactive({ password: '' });
-const totpForm = reactive({ code: '' });
-
-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>;
+// Form states - using reactive for direct v-model binding
+const enable2FAPassword = ref('');
+const disable2FAPassword = ref('');
+const totpCode = ref('');
 
 // ============================================================================
 // Lifecycle Hooks
@@ -130,12 +114,21 @@ async function deletePasskey(id: string): Promise<void> {
   }
 }
 
-async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
+async function disable2FA(): Promise<void> {
+  if (!disable2FAPassword.value) {
+    toast.add({
+      color: 'error',
+      description: 'Passwort ist erforderlich',
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     const { error } = await authClient.twoFactor.disable({
-      password: payload.data.password,
+      password: disable2FAPassword.value,
     });
 
     if (error) {
@@ -159,18 +152,27 @@ async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<voi
     });
 
     show2FADisable.value = false;
-    disable2FAForm.password = '';
+    disable2FAPassword.value = '';
   } finally {
     loading.value = false;
   }
 }
 
-async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
+async function enable2FA(): Promise<void> {
+  if (!enable2FAPassword.value) {
+    toast.add({
+      color: 'error',
+      description: 'Passwort ist erforderlich',
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     const { data, error } = await authClient.twoFactor.enable({
-      password: payload.data.password,
+      password: enable2FAPassword.value,
     });
 
     if (error) {
@@ -185,7 +187,7 @@ async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void
     totpUri.value = data?.totpURI ?? '';
     backupCodes.value = data?.backupCodes ?? [];
     showTotpSetup.value = true;
-    enable2FAForm.password = '';
+    enable2FAPassword.value = '';
   } finally {
     loading.value = false;
   }
@@ -218,12 +220,21 @@ async function openBackupCodesModal(codes: string[] = []): Promise<void> {
   await modal.open();
 }
 
-async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
+async function verifyTotp(): Promise<void> {
+  if (!totpCode.value || totpCode.value.length !== 6) {
+    toast.add({
+      color: 'error',
+      description: 'Code muss 6 Ziffern haben',
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     const { error } = await authClient.twoFactor.verifyTotp({
-      code: payload.data.code,
+      code: totpCode.value,
     });
 
     if (error) {
@@ -247,7 +258,7 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
     });
 
     showTotpSetup.value = false;
-    totpForm.code = '';
+    totpCode.value = '';
     await openBackupCodesModal(backupCodes.value);
   } finally {
     loading.value = false;
@@ -288,12 +299,12 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
         </div>
 
         <template v-if="!is2FAEnabled && !showTotpSetup">
-          <UForm :schema="passwordSchema" :state="enable2FAForm" class="space-y-4" @submit="enable2FA">
-            <UFormField label="Passwort bestätigen" name="password">
-              <UInput v-model="enable2FAForm.password" type="password" placeholder="Dein Passwort" />
+          <form class="space-y-4" @submit.prevent="enable2FA">
+            <UFormField label="Passwort bestätigen" name="password" class="w-full">
+              <UInput v-model="enable2FAPassword" type="password" placeholder="Dein Passwort" class="w-full" />
             </UFormField>
             <UButton type="submit" :loading="loading"> 2FA aktivieren </UButton>
-          </UForm>
+          </form>
         </template>
 
         <template v-if="showTotpSetup">
@@ -304,15 +315,15 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
               <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" :state="totpForm" class="space-y-4" @submit="verifyTotp">
-              <UFormField label="Verifizierungscode" name="code">
-                <UInput v-model="totpForm.code" placeholder="000000" class="text-center font-mono" />
+            <form class="space-y-4" @submit.prevent="verifyTotp">
+              <UFormField label="Verifizierungscode" name="code" class="w-full">
+                <UInput v-model="totpCode" placeholder="000000" class="w-full 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>
+            </form>
           </div>
         </template>
 
@@ -324,16 +335,16 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
         </template>
 
         <template v-if="show2FADisable">
-          <UForm :schema="passwordSchema" :state="disable2FAForm" class="space-y-4" @submit="disable2FA">
+          <form class="space-y-4" @submit.prevent="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 v-model="disable2FAForm.password" type="password" placeholder="Dein Passwort" />
+            <UFormField label="Passwort bestätigen" name="password" class="w-full">
+              <UInput v-model="disable2FAPassword" type="password" placeholder="Dein Passwort" class="w-full" />
             </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>
+          </form>
         </template>
       </div>
     </UCard>

package/nuxt-base-template/app/pages/auth/2fa.vue

@@ -7,13 +7,12 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
-import { authClient } from '~/lib/auth-client';
-
 // ============================================================================
 // Composables
 // ============================================================================
 const toast = useToast();
-const { fetchWithAuth, setUser, switchToJwtMode, jwtToken } = useBetterAuth();
+const { fetchWithAuth, setUser, switchToJwtMode, jwtToken } = useLtAuth();
+const authClient = useLtAuthClient();
 
 // ============================================================================
 // Page Meta

package/nuxt-base-template/app/pages/auth/forgot-password.vue

@@ -7,7 +7,8 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
-import { authClient } from '~/lib/auth-client';
+// Auth client from @lenne.tech/nuxt-extensions (auto-imported as ltAuthClient)
+const authClient = ltAuthClient;
 
 // ============================================================================
 // Composables

package/nuxt-base-template/app/pages/auth/login.vue

@@ -11,7 +11,8 @@ import * as v from 'valibot';
 // Composables
 // ============================================================================
 const toast = useToast();
-const { signIn, setUser, isLoading, validateSession, authenticateWithPasskey } = useBetterAuth();
+const { signIn, setUser, isLoading, validateSession, authenticateWithPasskey } = useLtAuth();
+const { translateError } = useLtErrorTranslation();
 
 // ============================================================================
 // Page Meta
@@ -114,10 +115,11 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
 
     // Check for error in response
     if ('error' in result && result.error) {
+      const errorMessage = (result.error as { message?: string }).message || 'Anmeldung fehlgeschlagen';
       toast.add({
         color: 'error',
-        description: (result.error as { message?: string }).message || 'Anmeldung fehlgeschlagen',
-        title: 'Fehler',
+        description: translateError(errorMessage),
+        title: 'Anmeldung fehlgeschlagen',
       });
       return;
     }
@@ -135,7 +137,7 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
     // Check if login was successful (user data in response)
     const userData = 'user' in result ? result.user : 'data' in result ? result.data?.user : null;
     if (userData) {
-      // Auth state is already stored by useBetterAuth
+      // Auth state is already stored by useLtAuth
       // Navigate to app
       await navigateTo('/app');
     } else {