create-nuxt-base 1.0.3 → 1.1.1

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

@@ -13,6 +13,7 @@ import { authClient } from '~/lib/auth-client';
 // Composables
 // ============================================================================
 const toast = useToast();
+const { signIn, setUser, isLoading, validateSession } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -51,22 +52,53 @@ const schema = v.object({
 
 type Schema = InferOutput<typeof schema>;
 
+/**
+ * Handle passkey authentication
+ * Uses official Better Auth signIn.passkey() method
+ * @see https://www.better-auth.com/docs/plugins/passkey
+ */
 async function onPasskeyLogin(): Promise<void> {
   passkeyLoading.value = true;
 
   try {
-    const { error } = await authClient.signIn.passkey();
+    // Use official Better Auth client method
+    // This calls: GET /passkey/generate-authenticate-options → POST /passkey/verify-authentication
+    const result = await authClient.signIn.passkey();
 
-    if (error) {
+    // Check for error in response
+    if (result.error) {
       toast.add({
         color: 'error',
-        description: error.message || 'Passkey-Anmeldung fehlgeschlagen',
+        description: result.error.message || 'Passkey-Anmeldung fehlgeschlagen',
         title: 'Fehler',
       });
       return;
     }
 
+    // Update auth state with user data if available
+    if (result.data?.user) {
+      setUser(result.data.user as any);
+    } else if (result.data?.session) {
+      // Passkey auth returns session without user - fetch user via session validation
+      await validateSession();
+    }
+
     await navigateTo('/app');
+  } catch (err: unknown) {
+    // Handle WebAuthn-specific errors
+    if (err instanceof Error && err.name === 'NotAllowedError') {
+      toast.add({
+        color: 'error',
+        description: 'Passkey-Authentifizierung wurde abgebrochen',
+        title: 'Fehler',
+      });
+      return;
+    }
+    toast.add({
+      color: 'error',
+      description: err instanceof Error ? err.message : 'Passkey-Anmeldung fehlgeschlagen',
+      title: 'Fehler',
+    });
   } finally {
     passkeyLoading.value = false;
   }
@@ -79,21 +111,53 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
   loading.value = true;
 
   try {
-    const { error } = await authClient.signIn.email({
+    const result = await signIn.email({
       email: payload.data.email,
       password: payload.data.password,
     });
 
-    if (error) {
+    // Check for error in response
+    if ('error' in result && result.error) {
       toast.add({
         color: 'error',
-        description: error.message || 'Anmeldung fehlgeschlagen',
+        description: (result.error as { message?: string }).message || 'Anmeldung fehlgeschlagen',
         title: 'Fehler',
       });
       return;
     }
 
-    await navigateTo('/app');
+    // Check if 2FA is required
+    // Better-Auth native uses 'twoFactorRedirect', nest-server REST API uses 'requiresTwoFactor'
+    const resultData = 'data' in result ? result.data : result;
+    const requires2FA = resultData && (
+      ('twoFactorRedirect' in resultData && resultData.twoFactorRedirect) ||
+      ('requiresTwoFactor' in resultData && resultData.requiresTwoFactor)
+    );
+    if (requires2FA) {
+      // Redirect to 2FA page
+      await navigateTo('/auth/2fa');
+      return;
+    }
+
+    // Check if login was successful (user data in response)
+    const userData = 'user' in result ? result.user : ('data' in result ? result.data?.user : null);
+    if (userData) {
+      // Auth state is already stored by useBetterAuth
+      // Navigate to app
+      await navigateTo('/app');
+    } else {
+      toast.add({
+        color: 'error',
+        description: 'Anmeldung fehlgeschlagen - keine Benutzerdaten erhalten',
+        title: 'Fehler',
+      });
+    }
+  } catch (err) {
+    toast.add({
+      color: 'error',
+      description: 'Ein unerwarteter Fehler ist aufgetreten',
+      title: 'Fehler',
+    });
   } finally {
     loading.value = false;
   }

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