create-nuxt-base 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.
 
+### [1.1.2](https://github.com/lenneTech/nuxt-base-starter/compare/v1.1.1...v1.1.2) (2026-01-22)
+
+### [1.1.1](https://github.com/lenneTech/nuxt-base-starter/compare/v1.1.0...v1.1.1) (2026-01-20)
+
+
+### Bug Fixes
+
+* **auth:** auto-login after registration and improved passkey handling ([625128b](https://github.com/lenneTech/nuxt-base-starter/commit/625128b18fe812c141859946c196f8efb0738dca))
+* **auth:** improve 2FA UX and document dev-mode proxy requirements ([4c4b1f4](https://github.com/lenneTech/nuxt-base-starter/commit/4c4b1f4d8b77fa93469ccc1a31d4f3292cc7c724))
+
 ## [1.1.0](https://github.com/lenneTech/nuxt-base-starter/compare/v1.0.3...v1.1.0) (2026-01-20)
 
 

package/nuxt-base-template/app/composables/use-better-auth.ts

@@ -1,4 +1,5 @@
 import { authClient } from '~/lib/auth-client';
+import { arrayBufferToBase64Url, base64UrlToUint8Array } from '~/utils/crypto';
 
 /**
  * User type for Better Auth session
@@ -19,6 +20,15 @@ interface StoredAuthState {
   user: BetterAuthUser | null;
 }
 
+/**
+ * Result of passkey authentication
+ */
+interface PasskeyAuthResult {
+  error?: string;
+  success: boolean;
+  user?: BetterAuthUser;
+}
+
 /**
  * Better Auth composable with client-side state management
  *
@@ -36,6 +46,13 @@ export function useBetterAuth() {
     sameSite: 'lax',
   });
 
+  // Auth token cookie (for 2FA sessions where no session cookie is set)
+  const authToken = useCookie<string | null>('auth-token', {
+    default: () => null,
+    maxAge: 60 * 60 * 24 * 7, // 7 days
+    sameSite: 'lax',
+  });
+
   // Loading state
   const isLoading = ref<boolean>(false);
 
@@ -173,7 +190,212 @@ export function useBetterAuth() {
     }
   };
 
+  /**
+   * Authenticate with a passkey (WebAuthn)
+   *
+   * This function handles the complete WebAuthn authentication flow:
+   * 1. Fetches authentication options from the server
+   * 2. Prompts the user to select a passkey via the browser's WebAuthn API
+   * 3. Sends the signed credential to the server for verification
+   * 4. Stores user data on successful authentication
+   *
+   * @returns Result with success status, user data, or error message
+   */
+  async function authenticateWithPasskey(): Promise<PasskeyAuthResult> {
+    isLoading.value = true;
+
+    try {
+      // In development, use the Nuxt proxy to ensure cookies are sent correctly
+      // In production, use the direct API URL
+      const isDev = import.meta.dev;
+      const runtimeConfig = useRuntimeConfig();
+      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
+
+      // Step 1: Get authentication options from server
+      const optionsResponse = await fetch(`${apiBase}/passkey/generate-authenticate-options`, {
+        method: 'GET',
+        credentials: 'include',
+      });
+
+      if (!optionsResponse.ok) {
+        return { success: false, error: 'Konnte Passkey-Optionen nicht laden' };
+      }
+
+      const options = await optionsResponse.json();
+
+      // Step 2: Convert challenge from base64url to ArrayBuffer
+      const challengeBuffer = base64UrlToUint8Array(options.challenge).buffer as ArrayBuffer;
+
+      // Step 3: Get credential from browser's WebAuthn API
+      const credential = (await navigator.credentials.get({
+        publicKey: {
+          challenge: challengeBuffer,
+          rpId: options.rpId,
+          allowCredentials: options.allowCredentials || [],
+          userVerification: options.userVerification,
+          timeout: options.timeout,
+        },
+      })) as PublicKeyCredential | null;
+
+      if (!credential) {
+        return { success: false, error: 'Kein Passkey ausgewählt' };
+      }
+
+      // Step 4: Convert credential response to base64url format
+      const response = credential.response as AuthenticatorAssertionResponse;
+      const credentialBody = {
+        id: credential.id,
+        rawId: arrayBufferToBase64Url(credential.rawId),
+        type: credential.type,
+        response: {
+          authenticatorData: arrayBufferToBase64Url(response.authenticatorData),
+          clientDataJSON: arrayBufferToBase64Url(response.clientDataJSON),
+          signature: arrayBufferToBase64Url(response.signature),
+          userHandle: response.userHandle ? arrayBufferToBase64Url(response.userHandle) : null,
+        },
+        clientExtensionResults: credential.getClientExtensionResults?.() || {},
+      };
+
+      // Step 5: Verify with server
+      // Note: The server expects { response: credentialData } format (matching @simplewebauthn/browser output)
+      const authResponse = await fetch(`${apiBase}/passkey/verify-authentication`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ response: credentialBody }),
+      });
+
+      const result = await authResponse.json();
+
+      if (!authResponse.ok) {
+        return { success: false, error: result.message || 'Passkey-Anmeldung fehlgeschlagen' };
+      }
+
+      // Store user data after successful passkey login
+      if (result.user) {
+        setUser(result.user as BetterAuthUser);
+      }
+
+      return { success: true, user: result.user as BetterAuthUser };
+    } catch (err: unknown) {
+      // Handle WebAuthn-specific errors
+      if (err instanceof Error && err.name === 'NotAllowedError') {
+        return { success: false, error: 'Passkey-Authentifizierung wurde abgebrochen' };
+      }
+      return { success: false, error: err instanceof Error ? err.message : 'Passkey-Anmeldung fehlgeschlagen' };
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  /**
+   * Register a new passkey for the current user
+   *
+   * This function handles the complete WebAuthn registration flow:
+   * 1. Fetches registration options from the server
+   * 2. Prompts the user to create a passkey via the browser's WebAuthn API
+   * 3. Sends the credential to the server for storage
+   *
+   * @param name - Optional name for the passkey
+   * @returns Result with success status or error message
+   */
+  async function registerPasskey(name?: string): Promise<{ success: boolean; error?: string; passkey?: any }> {
+    isLoading.value = true;
+
+    try {
+      // In development, use the Nuxt proxy to ensure cookies are sent correctly
+      // In production, use the direct API URL
+      const isDev = import.meta.dev;
+      const runtimeConfig = useRuntimeConfig();
+      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
+
+      // Step 1: Get registration options from server
+      const optionsResponse = await fetch(`${apiBase}/passkey/generate-register-options`, {
+        method: 'GET',
+        credentials: 'include',
+      });
+
+      if (!optionsResponse.ok) {
+        const error = await optionsResponse.json().catch(() => ({}));
+        return { success: false, error: error.message || 'Konnte Registrierungsoptionen nicht laden' };
+      }
+
+      const options = await optionsResponse.json();
+
+      // Step 2: Convert challenge from base64url to ArrayBuffer
+      const challengeBuffer = base64UrlToUint8Array(options.challenge).buffer as ArrayBuffer;
+
+      // Step 3: Convert user.id from base64url to ArrayBuffer
+      const userIdBuffer = base64UrlToUint8Array(options.user.id).buffer as ArrayBuffer;
+
+      // Step 4: Create credential via browser's WebAuthn API
+      const credential = (await navigator.credentials.create({
+        publicKey: {
+          challenge: challengeBuffer,
+          rp: options.rp,
+          user: {
+            ...options.user,
+            id: userIdBuffer,
+          },
+          pubKeyCredParams: options.pubKeyCredParams,
+          timeout: options.timeout,
+          attestation: options.attestation,
+          authenticatorSelection: options.authenticatorSelection,
+          excludeCredentials: (options.excludeCredentials || []).map((cred: any) => ({
+            ...cred,
+            id: base64UrlToUint8Array(cred.id).buffer as ArrayBuffer,
+          })),
+        },
+      })) as PublicKeyCredential | null;
+
+      if (!credential) {
+        return { success: false, error: 'Passkey-Erstellung abgebrochen' };
+      }
+
+      // Step 5: Convert credential response to base64url format
+      const attestationResponse = credential.response as AuthenticatorAttestationResponse;
+      const credentialBody = {
+        name,
+        response: {
+          id: credential.id,
+          rawId: arrayBufferToBase64Url(credential.rawId),
+          type: credential.type,
+          response: {
+            attestationObject: arrayBufferToBase64Url(attestationResponse.attestationObject),
+            clientDataJSON: arrayBufferToBase64Url(attestationResponse.clientDataJSON),
+            transports: attestationResponse.getTransports?.() || [],
+          },
+          clientExtensionResults: credential.getClientExtensionResults?.() || {},
+        },
+      };
+
+      // Step 6: Send to server for verification and storage
+      const registerResponse = await fetch(`${apiBase}/passkey/verify-registration`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(credentialBody),
+      });
+
+      const result = await registerResponse.json();
+
+      if (!registerResponse.ok) {
+        return { success: false, error: result.message || 'Passkey-Registrierung fehlgeschlagen' };
+      }
+
+      return { success: true, passkey: result };
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name === 'NotAllowedError') {
+        return { success: false, error: 'Passkey-Erstellung wurde abgebrochen' };
+      }
+      return { success: false, error: err instanceof Error ? err.message : 'Passkey-Registrierung fehlgeschlagen' };
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
   return {
+    authenticateWithPasskey,
     changePassword: authClient.changePassword,
     clearUser,
     is2FAEnabled,
@@ -181,6 +403,7 @@ export function useBetterAuth() {
     isAuthenticated,
     isLoading: computed(() => isLoading.value),
     passkey: authClient.passkey,
+    registerPasskey,
     setUser,
     signIn,
     signOut,

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

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
 
+const { isAuthenticated, signOut, user } = useBetterAuth();
+
+async function handleLogout() {
+  await signOut();
+  await navigateTo('/auth/login');
+}
+
 const headerItems = computed<NavigationMenuItem[]>(() => [
   {
     label: 'Docs',
@@ -51,6 +58,16 @@ const footerItems: NavigationMenuItem[] = [
       <UNavigationMenu :items="headerItems" />
 
       <template #right>
+        <template v-if="isAuthenticated">
+          <span class="text-sm text-muted hidden sm:inline">{{ user?.email }}</span>
+          <UTooltip text="Logout">
+            <UButton color="neutral" variant="ghost" icon="i-lucide-log-out" aria-label="Logout" @click="handleLogout" />
+          </UTooltip>
+        </template>
+        <template v-else>
+          <UButton color="primary" variant="soft" to="/auth/login" icon="i-lucide-log-in" label="Login" />
+        </template>
+
         <UColorModeButton />
 
         <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">

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

@@ -80,9 +80,18 @@ export interface AuthClientConfig {
  * plain text password transmission over the network.
  */
 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 = import.meta.env?.VITE_API_URL || process.env.API_URL || 'http://localhost:3000',
-    basePath = '/iam',
+    baseURL = defaultBaseURL,
+    basePath = defaultBasePath,
     twoFactorRedirectPath = '/auth/2fa',
     enableAdmin = true,
     enableTwoFactor = true,

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/login.vue

@@ -127,8 +127,13 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
     }
 
     // Check if 2FA is required
+    // Better-Auth native uses 'twoFactorRedirect', nest-server REST API uses 'requiresTwoFactor'
     const resultData = 'data' in result ? result.data : result;
-    if (resultData && 'twoFactorRedirect' in resultData && resultData.twoFactorRedirect) {
+    const requires2FA = resultData && (
+      ('twoFactorRedirect' in resultData && resultData.twoFactorRedirect) ||
+      ('requiresTwoFactor' in resultData && resultData.requiresTwoFactor)
+    );
+    if (requires2FA) {
       // Redirect to 2FA page
       await navigateTo('/auth/2fa');
       return;

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

@@ -13,6 +13,7 @@ import { authClient } from '~/lib/auth-client';
 // Composables
 // ============================================================================
 const toast = useToast();
+const { signUp, signIn } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -74,66 +75,91 @@ const schema = v.pipe(
 
 type Schema = InferOutput<typeof schema>;
 
-async function addPasskey(): Promise<void> {
-  passkeyLoading.value = true;
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  loading.value = true;
 
   try {
-    const { error } = await authClient.passkey.addPasskey({
-      name: 'Mein Gerät',
+    // Step 1: Sign up
+    const signUpResult = await signUp.email({
+      email: payload.data.email,
+      name: payload.data.name,
+      password: payload.data.password,
     });
 
-    if (error) {
+    const signUpError = 'error' in signUpResult ? signUpResult.error : null;
+
+    if (signUpError) {
       toast.add({
         color: 'error',
-        description: error.message || 'Passkey konnte nicht hinzugefügt werden',
+        description: signUpError.message || 'Registrierung fehlgeschlagen',
         title: 'Fehler',
       });
       return;
     }
 
+    // Step 2: Sign in to create session (required for passkey registration)
+    const signInResult = await signIn.email({
+      email: payload.data.email,
+      password: payload.data.password,
+    });
+
+    const signInError = 'error' in signInResult ? signInResult.error : null;
+
+    if (signInError) {
+      // Sign-up was successful but sign-in failed - still show success and redirect
+      toast.add({
+        color: 'success',
+        description: 'Dein Konto wurde erstellt. Bitte melde dich an.',
+        title: 'Willkommen!',
+      });
+      await navigateTo('/auth/login');
+      return;
+    }
+
     toast.add({
       color: 'success',
-      description: 'Passkey wurde erfolgreich hinzugefügt',
-      title: 'Erfolg',
+      description: 'Dein Konto wurde erfolgreich erstellt',
+      title: 'Willkommen!',
     });
 
-    await navigateTo('/app');
+    // Show passkey prompt after successful registration + login
+    showPasskeyPrompt.value = true;
   } finally {
-    passkeyLoading.value = false;
+    loading.value = false;
   }
 }
 
-// ============================================================================
-// Functions
-// ============================================================================
-async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
-  loading.value = true;
+async function addPasskey(): Promise<void> {
+  passkeyLoading.value = true;
 
   try {
-    const { error } = await authClient.signUp.email({
-      email: payload.data.email,
-      name: payload.data.name,
-      password: payload.data.password,
+    const { error } = await authClient.passkey.addPasskey({
+      name: 'Mein Gerät',
     });
 
     if (error) {
       toast.add({
         color: 'error',
-        description: error.message || 'Registrierung fehlgeschlagen',
+        description: error.message || 'Passkey konnte nicht hinzugefügt werden',
         title: 'Fehler',
       });
+      // Still navigate to app even if passkey failed
+      await navigateTo('/app');
       return;
     }
 
     toast.add({
       color: 'success',
-      description: 'Dein Konto wurde erfolgreich erstellt',
-      title: 'Willkommen!',
+      description: 'Passkey wurde erfolgreich hinzugefügt',
+      title: 'Erfolg',
     });
 
-    showPasskeyPrompt.value = true;
+    await navigateTo('/app');
   } finally {
-    loading.value = false;
+    passkeyLoading.value = false;
   }
 }
 

package/nuxt-base-template/app/plugins/auth-interceptor.client.ts

@@ -0,0 +1,143 @@
+/**
+ * Auth Interceptor Plugin
+ *
+ * This plugin intercepts all API responses and handles session expiration.
+ * When a 401 (Unauthorized) response is received, it automatically:
+ * 1. Clears the user session state
+ * 2. Redirects to the login page
+ *
+ * Note: This is a client-only plugin (.client.ts) since auth state
+ * management only makes sense in the browser context.
+ */
+export default defineNuxtPlugin(() => {
+  const { clearUser, isAuthenticated } = useBetterAuth();
+  const route = useRoute();
+
+  // Track if we're already handling a 401 to prevent multiple redirects
+  let isHandling401 = false;
+
+  // Paths that should not trigger auto-logout on 401
+  // (public auth endpoints where 401 is expected)
+  const publicAuthPaths = [
+    '/auth/login',
+    '/auth/register',
+    '/auth/forgot-password',
+    '/auth/reset-password',
+    '/auth/2fa',
+  ];
+
+  /**
+   * Check if current route is a public auth route
+   */
+  function isPublicAuthRoute(): boolean {
+    return publicAuthPaths.some((path) => route.path.startsWith(path));
+  }
+
+  /**
+   * Check if URL is an auth-related endpoint that shouldn't trigger logout
+   * (e.g., login, register, password reset endpoints)
+   */
+  function isAuthEndpoint(url: string): boolean {
+    const authEndpoints = [
+      '/sign-in',
+      '/sign-up',
+      '/sign-out',
+      '/forgot-password',
+      '/reset-password',
+      '/verify-email',
+      '/session',
+    ];
+    return authEndpoints.some((endpoint) => url.includes(endpoint));
+  }
+
+  /**
+   * Handle 401 Unauthorized responses
+   * Clears user state and redirects to login page
+   */
+  async function handleUnauthorized(requestUrl?: string): Promise<void> {
+    // Prevent multiple simultaneous 401 handling
+    if (isHandling401) {
+      return;
+    }
+
+    // Don't handle 401 for auth endpoints (expected behavior)
+    if (requestUrl && isAuthEndpoint(requestUrl)) {
+      return;
+    }
+
+    // Don't handle 401 on public auth pages
+    if (isPublicAuthRoute()) {
+      return;
+    }
+
+    isHandling401 = true;
+
+    try {
+      // Only handle if user was authenticated (prevents redirect loops)
+      if (isAuthenticated.value) {
+        console.debug('[Auth Interceptor] Session expired, logging out...');
+
+        // Clear user state
+        clearUser();
+
+        // Redirect to login page with return URL
+        await navigateTo({
+          path: '/auth/login',
+          query: {
+            redirect: route.fullPath !== '/auth/login' ? route.fullPath : undefined,
+          },
+        }, {
+          replace: true,
+        });
+      }
+    } finally {
+      // Reset flag after a short delay to allow navigation to complete
+      setTimeout(() => {
+        isHandling401 = false;
+      }, 1000);
+    }
+  }
+
+  // Override the default $fetch to add response error handling
+  const originalFetch = globalThis.$fetch;
+
+  // Use a wrapper to intercept responses
+  globalThis.$fetch = ((url: string, options?: any) => {
+    return originalFetch(url, {
+      ...options,
+      onResponseError: (context: any) => {
+        // Call original onResponseError if provided
+        if (options?.onResponseError) {
+          options.onResponseError(context);
+        }
+
+        // Handle 401 errors
+        if (context.response?.status === 401) {
+          handleUnauthorized(url);
+        }
+      },
+    });
+  }) as typeof globalThis.$fetch;
+
+  // Also intercept native fetch for manual API calls
+  const originalNativeFetch = globalThis.fetch;
+
+  globalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const response = await originalNativeFetch(input, init);
+
+    // Handle 401 errors from native fetch
+    if (response.status === 401) {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+      handleUnauthorized(url);
+    }
+
+    return response;
+  };
+
+  // Provide a manual method to trigger logout on 401
+  return {
+    provide: {
+      handleUnauthorized,
+    },
+  };
+});

package/nuxt-base-template/app/utils/crypto.ts

@@ -11,3 +11,34 @@ export async function sha256(message: string): Promise<string> {
   const hashArray = Array.from(new Uint8Array(hashBuffer));
   return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
 }
+
+// ============================================================================
+// WebAuthn/Passkey Utilities
+// ============================================================================
+
+/**
+ * Converts an ArrayBuffer to a base64url-encoded string
+ * Used for WebAuthn credential responses
+ *
+ * @param buffer - The ArrayBuffer to convert
+ * @returns The base64url-encoded string (no padding)
+ */
+export function arrayBufferToBase64Url(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  bytes.forEach((b) => (binary += String.fromCharCode(b)));
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+/**
+ * Converts a base64url-encoded string to a Uint8Array
+ * Used for WebAuthn challenge decoding
+ *
+ * @param base64url - The base64url-encoded string
+ * @returns The decoded Uint8Array
+ */
+export function base64UrlToUint8Array(base64url: string): Uint8Array {
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+  const paddedBase64 = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+  return Uint8Array.from(atob(paddedBase64), (c) => c.charCodeAt(0));
+}

package/nuxt-base-template/server/api/iam/[...path].ts

@@ -0,0 +1,65 @@
+/**
+ * Proxy handler for Better Auth API requests
+ *
+ * This proxy is REQUIRED for WebAuthn/Passkey functionality in development mode because:
+ * 1. Frontend runs on a different port (e.g., 3001/3002) than the API (3000)
+ * 2. WebAuthn validates the origin, which must be consistent
+ * 3. Cross-origin requests have cookie handling issues
+ *
+ * The proxy ensures:
+ * - Cookies are properly forwarded between frontend and API
+ * - The origin header is preserved for WebAuthn validation
+ * - Set-Cookie headers from the API are forwarded to the browser
+ */
+export default defineEventHandler(async (event) => {
+  const path = getRouterParam(event, 'path') || '';
+  const apiUrl = process.env.API_URL || 'http://localhost:3000';
+  const targetUrl = `${apiUrl}/iam/${path}`;
+
+  // Get query string
+  const query = getQuery(event);
+  const queryString = new URLSearchParams(query as Record<string, string>).toString();
+  const fullUrl = queryString ? `${targetUrl}?${queryString}` : targetUrl;
+
+  // Get request body for POST/PUT/PATCH requests
+  const method = event.method;
+  let body: any;
+  if (['POST', 'PUT', 'PATCH'].includes(method)) {
+    body = await readBody(event);
+  }
+
+  // Forward cookies from the incoming request
+  const cookieHeader = getHeader(event, 'cookie');
+  // Use the actual origin from the request, fallback to localhost
+  const originHeader = getHeader(event, 'origin') || getHeader(event, 'referer')?.replace(/\/[^/]*$/, '') || 'http://localhost:3001';
+
+  // Make the request to the API
+  const response = await $fetch.raw(fullUrl, {
+    method: method as any,
+    body: body ? JSON.stringify(body) : undefined,
+    headers: {
+      'Content-Type': 'application/json',
+      'Origin': originHeader,
+      ...(cookieHeader ? { Cookie: cookieHeader } : {}),
+    },
+    credentials: 'include',
+    // Don't throw on error status codes
+    ignoreResponseError: true,
+  });
+
+  // Forward Set-Cookie headers from the API response
+  const setCookieHeaders = response.headers.getSetCookie?.() || [];
+  for (const cookie of setCookieHeaders) {
+    // Rewrite cookie to work on localhost (remove domain/port specifics)
+    const rewrittenCookie = cookie
+      .replace(/domain=[^;]+;?\s*/gi, '')
+      .replace(/secure;?\s*/gi, '');
+    appendResponseHeader(event, 'Set-Cookie', rewrittenCookie);
+  }
+
+  // Set response status
+  setResponseStatus(event, response.status);
+
+  // Return the response body
+  return response._data;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nuxt-base",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "license": "MIT",
   "repository": {