create-nuxt-base 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.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,207 @@ 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 {
+      // Direct API access (CORS is configured on the server for trusted origins)
+      const runtimeConfig = useRuntimeConfig();
+      const apiUrl = runtimeConfig.public.apiUrl || 'http://localhost:3000';
+
+      // Step 1: Get authentication options from server
+      const optionsResponse = await fetch(`${apiUrl}/iam/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
+      const authResponse = await fetch(`${apiUrl}/iam/passkey/verify-authentication`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(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 {
+      // Direct API access (CORS is configured on the server for trusted origins)
+      const runtimeConfig = useRuntimeConfig();
+      const apiUrl = runtimeConfig.public.apiUrl || 'http://localhost:3000';
+
+      // Step 1: Get registration options from server
+      const optionsResponse = await fetch(`${apiUrl}/iam/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(`${apiUrl}/iam/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 +398,7 @@ export function useBetterAuth() {
     isAuthenticated,
     isLoading: computed(() => isLoading.value),
     passkey: authClient.passkey,
+    registerPasskey,
     setUser,
     signIn,
     signOut,

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

@@ -7,12 +7,11 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
-import { authClient } from '~/lib/auth-client';
-
 // ============================================================================
 // Composables
 // ============================================================================
 const toast = useToast();
+const { signUp, signIn } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -25,8 +24,6 @@ definePageMeta({
 // Variables
 // ============================================================================
 const loading = ref<boolean>(false);
-const showPasskeyPrompt = ref<boolean>(false);
-const passkeyLoading = ref<boolean>(false);
 
 const fields: AuthFormField[] = [
   {
@@ -74,111 +71,86 @@ 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;
     }
 
-    toast.add({
-      color: 'success',
-      description: 'Passkey wurde erfolgreich hinzugefügt',
-      title: 'Erfolg',
-    });
-
-    await navigateTo('/app');
-  } finally {
-    passkeyLoading.value = false;
-  }
-}
-
-// ============================================================================
-// Functions
-// ============================================================================
-async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
-  loading.value = true;
-
-  try {
-    const { error } = await authClient.signUp.email({
+    // Step 2: Sign in to create session (required for passkey registration)
+    const signInResult = await signIn.email({
       email: payload.data.email,
-      name: payload.data.name,
       password: payload.data.password,
     });
 
-    if (error) {
+    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: 'error',
-        description: error.message || 'Registrierung fehlgeschlagen',
-        title: 'Fehler',
+        color: 'success',
+        description: 'Dein Konto wurde erstellt. Bitte melde dich an.',
+        title: 'Willkommen!',
       });
+      await navigateTo('/auth/login');
       return;
     }
 
     toast.add({
       color: 'success',
-      description: 'Dein Konto wurde erfolgreich erstellt',
+      description: 'Dein Konto wurde erfolgreich erstellt. Du kannst Passkeys später in den Sicherheitseinstellungen hinzufügen.',
       title: 'Willkommen!',
     });
 
-    showPasskeyPrompt.value = true;
+    // Navigate to app - passkeys can be added later in security settings
+    // Note: Immediate passkey registration after sign-up is currently not supported
+    // due to session handling differences between nest-server and Better Auth
+    await navigateTo('/app', { external: true });
   } finally {
     loading.value = false;
   }
 }
-
-async function skipPasskey(): Promise<void> {
-  await navigateTo('/app');
-}
 </script>
 
 <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>
-    </template>
-
-    <template v-else>
-      <div class="flex flex-col items-center gap-6">
-        <UIcon name="i-lucide-key" class="size-16 text-primary" />
-        <div class="text-center">
-          <h2 class="text-xl font-semibold">Passkey hinzufügen?</h2>
-          <p class="mt-2 text-sm text-muted">Mit einem Passkey kannst du dich schnell und sicher ohne Passwort anmelden.</p>
-        </div>
-
-        <div class="flex w-full flex-col gap-3">
-          <UButton block :loading="passkeyLoading" @click="addPasskey"> Passkey hinzufügen </UButton>
-          <UButton block variant="outline" color="neutral" @click="skipPasskey"> Später einrichten </UButton>
-        </div>
-      </div>
-    </template>
+    <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>
   </UPageCard>
 </template>

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.1",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "license": "MIT",
   "repository": {