create-nuxt-base 1.2.0 → 2.1.0

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

@@ -2,16 +2,13 @@
 // ============================================================================
 // Imports
 // ============================================================================
-import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
-import type { InferOutput } from 'valibot';
-
 import * as v from 'valibot';
 
 // ============================================================================
 // Composables
 // ============================================================================
 const toast = useToast();
-const { signUp, signIn, registerPasskey } = useBetterAuth();
+const { signUp, signIn, registerPasskey } = useLtAuth();
 
 // ============================================================================
 // Page Meta
@@ -27,36 +24,13 @@ const loading = ref<boolean>(false);
 const showPasskeyPrompt = ref<boolean>(false);
 const passkeyLoading = ref<boolean>(false);
 
-const fields: AuthFormField[] = [
-  {
-    label: 'Name',
-    name: 'name',
-    placeholder: 'Name eingeben',
-    required: true,
-    type: 'text',
-  },
-  {
-    label: 'E-Mail',
-    name: 'email',
-    placeholder: 'E-Mail eingeben',
-    required: true,
-    type: 'email',
-  },
-  {
-    label: 'Passwort',
-    name: 'password',
-    placeholder: 'Passwort eingeben',
-    required: true,
-    type: 'password',
-  },
-  {
-    label: 'Passwort bestätigen',
-    name: 'confirmPassword',
-    placeholder: 'Passwort wiederholen',
-    required: true,
-    type: 'password',
-  },
-];
+// Form state - using refs for direct v-model binding
+const formState = reactive({
+  name: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+});
 
 const schema = v.pipe(
   v.object({
@@ -71,20 +45,30 @@ const schema = v.pipe(
   ),
 );
 
-type Schema = InferOutput<typeof schema>;
-
 // ============================================================================
 // Functions
 // ============================================================================
-async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+async function onSubmit(): Promise<void> {
+  // Validate
+  const result = v.safeParse(schema, formState);
+  if (!result.success) {
+    const firstError = result.issues[0];
+    toast.add({
+      color: 'error',
+      description: firstError.message,
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     // Step 1: Sign up
     const signUpResult = await signUp.email({
-      email: payload.data.email,
-      name: payload.data.name,
-      password: payload.data.password,
+      email: formState.email,
+      name: formState.name,
+      password: formState.password,
     });
 
     const signUpError = 'error' in signUpResult ? signUpResult.error : null;
@@ -100,8 +84,8 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
 
     // Step 2: Sign in to create session (required for passkey registration)
     const signInResult = await signIn.email({
-      email: payload.data.email,
-      password: payload.data.password,
+      email: formState.email,
+      password: formState.password,
     });
 
     const signInError = 'error' in signInResult ? signInResult.error : null;
@@ -168,25 +152,65 @@ async function skipPasskey(): Promise<void> {
 <template>
   <UPageCard class="w-md" variant="naked">
     <template v-if="!showPasskeyPrompt">
-      <UAuthForm
-        :schema="schema"
-        title="Registrieren"
-        icon="i-lucide-user-plus"
-        :fields="fields"
-        :loading="loading"
-        :submit="{
-          label: 'Konto erstellen',
-          block: true,
-        }"
-        @submit="onSubmit"
-      >
-        <template #footer>
-          <p class="text-center text-sm text-muted">
-            Bereits ein Konto?
-            <ULink to="/auth/login" class="text-primary font-medium">Anmelden</ULink>
-          </p>
-        </template>
-      </UAuthForm>
+      <div class="flex flex-col items-center gap-4">
+        <UIcon name="i-lucide-user-plus" class="size-12 text-primary" />
+        <h1 class="text-2xl font-semibold">Registrieren</h1>
+      </div>
+
+      <form class="mt-6 flex flex-col gap-4" @submit.prevent="onSubmit">
+        <UFormField label="Name" name="name" required class="w-full">
+          <UInput
+            v-model="formState.name"
+            name="name"
+            type="text"
+            placeholder="Name eingeben"
+            autocomplete="name"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="E-Mail" name="email" required class="w-full">
+          <UInput
+            v-model="formState.email"
+            name="email"
+            type="email"
+            placeholder="E-Mail eingeben"
+            autocomplete="email"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Passwort" name="password" required class="w-full">
+          <UInput
+            v-model="formState.password"
+            name="password"
+            type="password"
+            placeholder="Passwort eingeben"
+            autocomplete="new-password"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Passwort bestätigen" name="confirmPassword" required class="w-full">
+          <UInput
+            v-model="formState.confirmPassword"
+            name="confirmPassword"
+            type="password"
+            placeholder="Passwort wiederholen"
+            autocomplete="new-password"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UButton type="submit" block :loading="loading">
+          Konto erstellen
+        </UButton>
+      </form>
+
+      <p class="mt-4 text-center text-sm text-muted">
+        Bereits ein Konto?
+        <ULink to="/auth/login" class="text-primary font-medium">Anmelden</ULink>
+      </p>
     </template>
 
     <template v-else>

package/nuxt-base-template/app/pages/auth/reset-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/docs/pages/docs.vue

@@ -182,7 +182,7 @@ async function handleFormSubmit(): Promise<void> {
 }
 
 async function handleShare(): Promise<void> {
-  const { share } = useShare();
+  const { share } = useLtShare();
   await share('Nuxt Base Starter', 'Check out this Nuxt Base Starter Template!', window.location.href);
 
   toast.add({

package/nuxt-base-template/nuxt.config.ts

@@ -67,12 +67,40 @@ export default defineNuxtConfig({
     dirs: ['./states', './stores', './forms', './interfaces', './base', './plugins'],
   },
 
+  // ============================================================================
+  // lenne.tech Nuxt Extensions
+  // ============================================================================
+  ltExtensions: {
+    auth: {
+      enabled: true,
+      // baseURL is used in production mode for cross-origin API requests
+      // In dev mode, Nuxt proxy is used (baseURL is ignored, requests go through /api/iam)
+      // In production, requests go directly to baseURL + basePath (e.g., https://api.example.com/iam)
+      baseURL: process.env.API_URL || 'http://localhost:3000',
+      basePath: '/iam',
+      loginPath: '/auth/login',
+      twoFactorRedirectPath: '/auth/2fa',
+      enableAdmin: true,
+      enableTwoFactor: true,
+      enablePasskey: true,
+      interceptor: {
+        enabled: true,
+        publicPaths: ['/auth/login', '/auth/register', '/auth/forgot-password', '/auth/reset-password'],
+      },
+    },
+    tus: {
+      defaultEndpoint: '/files/upload',
+      defaultChunkSize: 5 * 1024 * 1024,
+    },
+  },
+
   // ============================================================================
   // Nuxt Modules
   // ============================================================================
   modules: [
+    '@lenne.tech/nuxt-extensions', // Auth, Upload, Transitions
     '@nuxt/test-utils/module', // E2E testing with Playwright
-    '@lenne.tech/bug.lt', // Bug reporting to Linear
+    // '@lenne.tech/bug.lt', // Bug reporting to Linear - TEMPORARILY DISABLED FOR TESTING
     '@vueuse/nuxt', // Vue composition utilities
     'dayjs-nuxt', // Date/time handling
     '@nuxt/image', // Image optimization
@@ -158,5 +186,26 @@ export default defineNuxtConfig({
       exclude: ['@tailwindcss/vite', 'lightningcss', '@vue/devtools-core', '@vue/devtools-kit', '@internationalized/date'],
     },
     plugins: [tailwindcss()],
+    server: {
+      proxy: {
+        // IAM proxy via /api prefix (nuxt-extensions adds /api in dev mode)
+        // Must be before /api to match more specifically
+        '/api/iam': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+        // API proxy - no rewrite, backend expects /api/... paths
+        '/api': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+        },
+        // IAM proxy for direct BetterAuth endpoints (SSR mode)
+        '/iam': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+        },
+      },
+    },
   },
 });