create-nuxt-base 1.0.3 → 1.1.1

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

@@ -34,102 +34,199 @@ export interface AuthResponse {
   };
 }
 
-// =============================================================================
-// 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(),
-  ],
-});
+/**
+ * Configuration options for the auth client factory
+ * All options have sensible defaults for nest-server compatibility
+ */
+export interface AuthClientConfig {
+  /** API base URL (default: from env or http://localhost:3000) */
+  baseURL?: string;
+  /** Auth API base path (default: '/iam' - must match nest-server betterAuth.basePath) */
+  basePath?: string;
+  /** 2FA redirect path (default: '/auth/2fa') */
+  twoFactorRedirectPath?: string;
+  /** Enable admin plugin (default: true) */
+  enableAdmin?: boolean;
+  /** Enable 2FA plugin (default: true) */
+  enableTwoFactor?: boolean;
+  /** Enable passkey plugin (default: true) */
+  enablePasskey?: boolean;
+}
 
 // =============================================================================
-// Auth Client with Password Hashing
+// Auth Client Factory
 // =============================================================================
 
 /**
- * Extended auth client that hashes passwords before transmission.
+ * Creates a configured Better-Auth client with password hashing
+ *
+ * This factory function allows creating auth clients with custom configuration,
+ * making it reusable across different projects.
+ *
+ * @example
+ * ```typescript
+ * // Default configuration (works with nest-server defaults)
+ * const authClient = createBetterAuthClient();
+ *
+ * // Custom configuration
+ * const authClient = createBetterAuthClient({
+ *   baseURL: 'https://api.example.com',
+ *   basePath: '/auth',
+ *   twoFactorRedirectPath: '/login/2fa',
+ * });
+ * ```
  *
  * 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);
+export function createBetterAuthClient(config: AuthClientConfig = {}) {
+  // In development, use empty baseURL and /api/iam path to leverage Nuxt server proxy
+  // This is REQUIRED for WebAuthn/Passkey to work correctly because:
+  // - Frontend runs on localhost:3002, API on localhost:3000
+  // - WebAuthn validates the origin, which must be consistent
+  // - The Nuxt server proxy ensures requests come from the frontend origin
+  const isDev = import.meta.env?.DEV || process.env.NODE_ENV === 'development';
+  const defaultBaseURL = isDev ? '' : (import.meta.env?.VITE_API_URL || process.env.API_URL || 'http://localhost:3000');
+  const defaultBasePath = isDev ? '/api/iam' : '/iam';
+
+  const {
+    baseURL = defaultBaseURL,
+    basePath = defaultBasePath,
+    twoFactorRedirectPath = '/auth/2fa',
+    enableAdmin = true,
+    enableTwoFactor = true,
+    enablePasskey = true,
+  } = config;
+
+  // Build plugins array based on configuration
+  const plugins: any[] = [];
+
+  if (enableAdmin) {
+    plugins.push(adminClient());
+  }
+
+  if (enableTwoFactor) {
+    plugins.push(
+      twoFactorClient({
+        onTwoFactorRedirect() {
+          navigateTo(twoFactorRedirectPath);
+        },
+      }),
+    );
+  }
+
+  if (enablePasskey) {
+    plugins.push(passkeyClient());
+  }
+
+  // Create base client with configuration
+  const baseClient = createAuthClient({
+    basePath,
+    baseURL,
+    fetchOptions: {
+      credentials: 'include', // Required for cross-origin cookie handling
     },
-  },
+    plugins,
+  });
+
+  // Return extended client with password hashing
+  return {
+    // Spread all base client properties and methods
+    ...baseClient,
 
-  // Explicitly pass through signOut (not captured by spread operator)
-  signOut: baseClient.signOut,
+    // Explicitly pass through methods not captured by spread operator
+    useSession: baseClient.useSession,
+    passkey: (baseClient as any).passkey,
+    admin: (baseClient as any).admin,
+    $Infer: baseClient.$Infer,
+    $fetch: baseClient.$fetch,
+    $store: baseClient.$store,
 
-  // Override signUp to hash password
-  signUp: {
-    ...baseClient.signUp,
     /**
-     * Sign up with email and password (password is hashed before sending)
+     * Change password for an authenticated user (both passwords are hashed)
      */
-    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);
+    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);
     },
-  },
 
-  // Override twoFactor to hash passwords
-  twoFactor: {
-    ...baseClient.twoFactor,
     /**
-     * Disable 2FA (password is hashed before sending)
+     * Reset password with token (new 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);
+    resetPassword: async (params: { newPassword: string; token: string }, options?: any) => {
+      const hashedPassword = await sha256(params.newPassword);
+      return baseClient.resetPassword?.({ newPassword: hashedPassword, token: params.token }, 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);
+
+    // Override signIn to hash password (keep passkey method from plugin)
+    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);
+      },
+      /**
+       * Sign in with passkey (pass through to base client - provided by passkeyClient plugin)
+       * @see https://www.better-auth.com/docs/plugins/passkey
+       */
+      passkey: (baseClient.signIn as any).passkey,
+    },
+
+    // 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 (provided by twoFactorClient plugin)
+    twoFactor: {
+      ...(baseClient as any).twoFactor,
+      /**
+       * Disable 2FA (password is hashed before sending)
+       */
+      disable: async (params: { password: string }, options?: any) => {
+        const hashedPassword = await sha256(params.password);
+        return (baseClient as any).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 as any).twoFactor.enable({ password: hashedPassword }, options);
+      },
+      /**
+       * Verify TOTP code (pass through to base client)
+       */
+      verifyTotp: (baseClient as any).twoFactor.verifyTotp,
+      /**
+       * Verify backup code (pass through to base client)
+       */
+      verifyBackupCode: (baseClient as any).twoFactor.verifyBackupCode,
     },
-  },
-};
+  };
+}
+
+// =============================================================================
+// Default Auth Client Instance
+// =============================================================================
+
+/**
+ * Default auth client instance with standard nest-server configuration
+ * Use createBetterAuthClient() for custom configuration
+ */
+export const authClient = createBetterAuthClient();
 
-export type AuthClient = typeof authClient;
+export type AuthClient = ReturnType<typeof createBetterAuthClient>;

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+// ============================================================================
+// Composables
+// ============================================================================
+const { user, signOut } = useBetterAuth();
+
+// ============================================================================
+// Variables
+// ============================================================================
+const pages = [
+  {
+    title: 'Sicherheit',
+    description: 'Verwalte 2FA, Passkeys und Kontosicherheit',
+    icon: 'i-lucide-shield-check',
+    to: '/app/settings/security',
+  },
+];
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function handleSignOut(): Promise<void> {
+  await signOut();
+  await navigateTo('/auth/login');
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl px-4 py-8">
+    <!-- Welcome Header -->
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold">
+        Willkommen{{ user?.name ? `, ${user.name}` : '' }}!
+      </h1>
+      <p class="mt-2 text-muted">
+        {{ user?.email }}
+      </p>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="mb-8">
+      <h2 class="mb-4 text-xl font-semibold">Schnellzugriff</h2>
+      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <UCard
+          v-for="page in pages"
+          :key="page.to"
+          class="cursor-pointer transition-shadow hover:shadow-lg"
+          @click="navigateTo(page.to)"
+        >
+          <div class="flex items-start gap-4">
+            <div class="rounded-lg bg-primary/10 p-3">
+              <UIcon :name="page.icon" class="size-6 text-primary" />
+            </div>
+            <div>
+              <h3 class="font-semibold">{{ page.title }}</h3>
+              <p class="mt-1 text-sm text-muted">{{ page.description }}</p>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </div>
+
+    <!-- User Info Card -->
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-3">
+          <UIcon name="i-lucide-user" class="size-6 text-primary" />
+          <h2 class="font-semibold">Dein Konto</h2>
+        </div>
+      </template>
+
+      <div class="space-y-3">
+        <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</span>
+          <span class="font-medium">{{ user?.email || '-' }}</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>
+
+      <template #footer>
+        <UButton
+          color="error"
+          variant="outline"
+          icon="i-lucide-log-out"
+          @click="handleSignOut"
+        >
+          Abmelden
+        </UButton>
+      </template>
+    </UCard>
+  </div>
+</template>

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

@@ -24,7 +24,7 @@ interface Passkey {
 // ============================================================================
 const toast = useToast();
 const overlay = useOverlay();
-const { is2FAEnabled, user } = useBetterAuth();
+const { is2FAEnabled, registerPasskey, setUser, user } = useBetterAuth();
 
 // ============================================================================
 // Variables
@@ -39,6 +39,11 @@ 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')),
 });
@@ -70,14 +75,13 @@ async function addPasskey(): Promise<void> {
   passkeyLoading.value = true;
 
   try {
-    const { error } = await authClient.passkey.addPasskey({
-      name: newPasskeyName.value,
-    });
+    // Use custom registerPasskey method with direct API calls
+    const result = await registerPasskey(newPasskeyName.value);
 
-    if (error) {
+    if (!result.success) {
       toast.add({
         color: 'error',
-        description: error.message || 'Passkey konnte nicht hinzugefügt werden',
+        description: result.error || 'Passkey konnte nicht hinzugefügt werden',
         title: 'Fehler',
       });
       return;
@@ -143,6 +147,11 @@ async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<voi
       return;
     }
 
+    // Update user state to reflect 2FA disabled
+    if (user.value) {
+      setUser({ ...user.value, twoFactorEnabled: false });
+    }
+
     toast.add({
       color: 'success',
       description: '2FA wurde deaktiviert',
@@ -150,6 +159,7 @@ async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<voi
     });
 
     show2FADisable.value = false;
+    disable2FAForm.password = '';
   } finally {
     loading.value = false;
   }
@@ -175,6 +185,7 @@ async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void
     totpUri.value = data?.totpURI ?? '';
     backupCodes.value = data?.backupCodes ?? [];
     showTotpSetup.value = true;
+    enable2FAForm.password = '';
   } finally {
     loading.value = false;
   }
@@ -224,6 +235,11 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
       return;
     }
 
+    // Update user state to reflect 2FA enabled
+    if (user.value) {
+      setUser({ ...user.value, twoFactorEnabled: true });
+    }
+
     toast.add({
       color: 'success',
       description: '2FA wurde erfolgreich aktiviert',
@@ -231,6 +247,7 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
     });
 
     showTotpSetup.value = false;
+    totpForm.code = '';
     await openBackupCodesModal(backupCodes.value);
   } finally {
     loading.value = false;
@@ -271,9 +288,9 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
         </div>
 
         <template v-if="!is2FAEnabled && !showTotpSetup">
-          <UForm :schema="passwordSchema" class="space-y-4" @submit="enable2FA">
+          <UForm :schema="passwordSchema" :state="enable2FAForm" class="space-y-4" @submit="enable2FA">
             <UFormField label="Passwort bestätigen" name="password">
-              <UInput name="password" type="password" placeholder="Dein Passwort" />
+              <UInput v-model="enable2FAForm.password" type="password" placeholder="Dein Passwort" />
             </UFormField>
             <UButton type="submit" :loading="loading"> 2FA aktivieren </UButton>
           </UForm>
@@ -281,15 +298,15 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
 
         <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>
+            <p class="text-sm text-muted">Scanne den QR-Code mit deiner Authenticator-App (z.B. Google Authenticator, Authy) und gib den Code ein.</p>
 
             <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">
+            <UForm :schema="totpSchema" :state="totpForm" class="space-y-4" @submit="verifyTotp">
               <UFormField label="Verifizierungscode" name="code">
-                <UInput name="code" placeholder="000000" class="text-center font-mono" />
+                <UInput v-model="totpForm.code" placeholder="000000" class="text-center font-mono" />
               </UFormField>
               <div class="flex gap-2">
                 <UButton type="submit" :loading="loading"> Verifizieren </UButton>
@@ -307,10 +324,10 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
         </template>
 
         <template v-if="show2FADisable">
-          <UForm :schema="passwordSchema" class="space-y-4" @submit="disable2FA">
+          <UForm :schema="passwordSchema" :state="disable2FAForm" 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" />
+              <UInput v-model="disable2FAForm.password" type="password" placeholder="Dein Passwort" />
             </UFormField>
             <div class="flex gap-2">
               <UButton type="submit" color="error" :loading="loading"> 2FA deaktivieren </UButton>

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

@@ -13,6 +13,7 @@ import { authClient } from '~/lib/auth-client';
 // Composables
 // ============================================================================
 const toast = useToast();
+const { setUser, validateSession } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -28,6 +29,9 @@ const loading = ref<boolean>(false);
 const useBackupCode = ref<boolean>(false);
 const trustDevice = ref<boolean>(false);
 
+// Form state for UForm
+const formState = reactive({ code: '' });
+
 const schema = v.object({
   code: v.pipe(v.string('Code ist erforderlich'), v.minLength(6, 'Code muss mindestens 6 Zeichen haben')),
 });
@@ -41,35 +45,46 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
   loading.value = true;
 
   try {
+    let result: any;
+
     if (useBackupCode.value) {
-      const { error } = await authClient.twoFactor.verifyBackupCode({
+      result = await authClient.twoFactor.verifyBackupCode({
         code: payload.data.code,
       });
 
-      if (error) {
+      if (result.error) {
         toast.add({
           color: 'error',
-          description: error.message || 'Backup-Code ungültig',
+          description: result.error.message || 'Backup-Code ungültig',
           title: 'Fehler',
         });
         return;
       }
     } else {
-      const { error } = await authClient.twoFactor.verifyTotp({
+      result = await authClient.twoFactor.verifyTotp({
         code: payload.data.code,
         trustDevice: trustDevice.value,
       });
 
-      if (error) {
+      if (result.error) {
         toast.add({
           color: 'error',
-          description: error.message || 'Code ungültig',
+          description: result.error.message || 'Code ungültig',
           title: 'Fehler',
         });
         return;
       }
     }
 
+    // Update auth state with user data from response
+    const userData = result?.data?.user || result?.user;
+    if (userData) {
+      setUser(userData);
+    } else {
+      // Fallback: validate session to get user data
+      await validateSession();
+    }
+
     await navigateTo('/app');
   } finally {
     loading.value = false;
@@ -92,10 +107,10 @@ function toggleBackupCode(): void {
         </p>
       </div>
 
-      <UForm :schema="schema" class="flex flex-col gap-4" @submit="onSubmit">
+      <UForm :schema="schema" :state="formState" class="flex flex-col gap-4" @submit="onSubmit">
         <UFormField :label="useBackupCode ? 'Backup-Code' : 'Authentifizierungscode'" name="code">
           <UInput
-            name="code"
+            v-model="formState.code"
             :placeholder="useBackupCode ? 'Backup-Code eingeben' : '000000'"
             size="lg"
             class="text-center font-mono text-lg tracking-widest"