create-nuxt-base 1.1.2 → 1.2.0

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

@@ -0,0 +1,206 @@
+/**
+ * Shared authentication state for Cookie/JWT dual-mode authentication
+ *
+ * This module provides a reactive state that is shared between:
+ * - auth-client.ts (uses it for customFetch)
+ * - use-better-auth.ts (manages the state)
+ *
+ * Auth Mode Strategy:
+ * 1. Primary: Session cookies (more secure, HttpOnly)
+ * 2. Fallback: JWT tokens (when cookies are not available/working)
+ *
+ * The state is persisted in cookies for SSR compatibility.
+ */
+
+export type AuthMode = 'cookie' | 'jwt';
+
+/**
+ * Get the current auth mode from cookie
+ */
+export function getAuthMode(): AuthMode {
+  if (import.meta.server) return 'cookie';
+
+  try {
+    const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+    if (cookie) {
+      const parts = cookie.split('=');
+      const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+      const state = JSON.parse(value);
+      return state?.authMode || 'cookie';
+    }
+  } catch {
+    // Ignore parse errors
+  }
+  return 'cookie';
+}
+
+/**
+ * Get the JWT token from cookie
+ */
+export function getJwtToken(): string | null {
+  if (import.meta.server) return null;
+
+  try {
+    const cookie = document.cookie.split('; ').find((row) => row.startsWith('jwt-token='));
+    if (cookie) {
+      const parts = cookie.split('=');
+      const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+      // Handle JSON-encoded string (useCookie stores as JSON)
+      if (value.startsWith('"') && value.endsWith('"')) {
+        return JSON.parse(value);
+      }
+      return value || null;
+    }
+  } catch {
+    // Ignore parse errors
+  }
+  return null;
+}
+
+/**
+ * Set JWT token in cookie
+ */
+export function setJwtToken(token: string | null): void {
+  if (import.meta.server) return;
+
+  const maxAge = 60 * 60 * 24 * 7; // 7 days
+  if (token) {
+    document.cookie = `jwt-token=${encodeURIComponent(JSON.stringify(token))}; path=/; max-age=${maxAge}; samesite=lax`;
+  } else {
+    document.cookie = `jwt-token=; path=/; max-age=0`;
+  }
+}
+
+/**
+ * Update auth mode in the auth-state cookie
+ */
+export function setAuthMode(mode: AuthMode): void {
+  if (import.meta.server) return;
+
+  try {
+    const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+
+    let state = { user: null, authMode: mode };
+    if (cookie) {
+      const parts = cookie.split('=');
+      const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+      state = { ...JSON.parse(value), authMode: mode };
+    }
+
+    const maxAge = 60 * 60 * 24 * 7; // 7 days
+    document.cookie = `auth-state=${encodeURIComponent(JSON.stringify(state))}; path=/; max-age=${maxAge}; samesite=lax`;
+  } catch {
+    // Ignore errors
+  }
+}
+
+/**
+ * Get the API base URL
+ */
+export function getApiBase(): string {
+  const isDev = import.meta.dev;
+  if (isDev) {
+    return '/api/iam';
+  }
+  // In production, try to get from runtime config or fall back to default
+  if (typeof window !== 'undefined' && (window as any).__NUXT__?.config?.public?.apiUrl) {
+    return `${(window as any).__NUXT__.config.public.apiUrl}/iam`;
+  }
+  return 'http://localhost:3000/iam';
+}
+
+/**
+ * Attempt to switch to JWT mode by fetching a token
+ */
+export async function attemptJwtSwitch(): Promise<boolean> {
+  try {
+    const apiBase = getApiBase();
+    const response = await fetch(`${apiBase}/token`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      if (data.token) {
+        setJwtToken(data.token);
+        setAuthMode('jwt');
+        console.debug('[Auth] Switched to JWT mode');
+        return true;
+      }
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if user is authenticated (has auth-state with user)
+ */
+export function isAuthenticated(): boolean {
+  if (import.meta.server) return false;
+
+  try {
+    const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+    if (cookie) {
+      const parts = cookie.split('=');
+      const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+      const state = JSON.parse(value);
+      return !!state?.user;
+    }
+  } catch {
+    // Ignore parse errors
+  }
+  return false;
+}
+
+/**
+ * Custom fetch function that handles Cookie/JWT dual-mode authentication
+ *
+ * This function:
+ * 1. In cookie mode: Uses credentials: 'include'
+ * 2. In JWT mode: Adds Authorization header
+ * 3. On 401 in cookie mode: Attempts to switch to JWT and retries
+ */
+export async function authFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  const authMode = getAuthMode();
+  const jwtToken = getJwtToken();
+
+  const headers = new Headers(init?.headers);
+
+  // In JWT mode, add Authorization header
+  if (authMode === 'jwt' && jwtToken) {
+    headers.set('Authorization', `Bearer ${jwtToken}`);
+  }
+
+  // Always include credentials for cookie-based session auth
+  // In JWT mode, cookies are sent but ignored by the server (Authorization header is used instead)
+  // This is more robust than conditionally omitting cookies
+  const response = await fetch(input, {
+    ...init,
+    headers,
+    credentials: 'include',
+  });
+
+  // If we get 401 in cookie mode and user is authenticated, try JWT fallback
+  if (response.status === 401 && authMode === 'cookie' && isAuthenticated()) {
+    console.debug('[Auth] Cookie auth failed, attempting JWT fallback...');
+    const switched = await attemptJwtSwitch();
+
+    if (switched) {
+      // Retry the request with JWT
+      const newToken = getJwtToken();
+      if (newToken) {
+        headers.set('Authorization', `Bearer ${newToken}`);
+        return fetch(input, {
+          ...init,
+          headers,
+          credentials: 'include',
+        });
+      }
+    }
+  }
+
+  return response;
+}

package/nuxt-base-template/app/middleware/admin.global.ts

@@ -4,20 +4,40 @@ export default defineNuxtRouteMiddleware(async (to) => {
     return;
   }
 
-  const { isAdmin, isAuthenticated, isLoading } = useBetterAuth();
+  let isAuthenticated = false;
+  let isAdmin = false;
 
-  // Wait for session to load
-  if (isLoading.value) {
-    return;
+  // On client, read directly from document.cookie for accurate state
+  if (import.meta.client) {
+    try {
+      const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+      if (cookie) {
+        const parts = cookie.split('=');
+        const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+        const state = JSON.parse(value);
+        isAuthenticated = !!state?.user;
+        isAdmin = state?.user?.role === 'admin';
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  } else {
+    // On server, use useCookie
+    const authStateCookie = useCookie<{ user: { role?: string } | null; authMode: string } | null>('auth-state');
+    isAuthenticated = !!authStateCookie.value?.user;
+    isAdmin = authStateCookie.value?.user?.role === 'admin';
   }
 
   // Redirect to login if not authenticated
-  if (!isAuthenticated.value) {
-    return navigateTo('/auth/login');
+  if (!isAuthenticated) {
+    return navigateTo({
+      path: '/auth/login',
+      query: { redirect: to.fullPath },
+    });
   }
 
   // Redirect to /app if authenticated but not admin
-  if (!isAdmin.value) {
+  if (!isAdmin) {
     return navigateTo('/app');
   }
 });

package/nuxt-base-template/app/middleware/auth.global.ts

@@ -4,15 +4,32 @@ export default defineNuxtRouteMiddleware(async (to) => {
     return;
   }
 
-  const { isAuthenticated, isLoading } = useBetterAuth();
+  let isAuthenticated = false;
 
-  // Wait for session to load
-  if (isLoading.value) {
-    return;
+  // On client, read directly from document.cookie for accurate state
+  if (import.meta.client) {
+    try {
+      const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+      if (cookie) {
+        const parts = cookie.split('=');
+        const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+        const state = JSON.parse(value);
+        isAuthenticated = !!state?.user;
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  } else {
+    // On server, use useCookie
+    const authStateCookie = useCookie<{ user: unknown; authMode: string } | null>('auth-state');
+    isAuthenticated = !!authStateCookie.value?.user;
   }
 
   // Redirect to login if not authenticated
-  if (!isAuthenticated.value) {
-    return navigateTo('/auth/login');
+  if (!isAuthenticated) {
+    return navigateTo({
+      path: '/auth/login',
+      query: { redirect: to.fullPath },
+    });
   }
 });

package/nuxt-base-template/app/middleware/guest.global.ts

@@ -4,15 +4,30 @@ export default defineNuxtRouteMiddleware(async (to) => {
     return;
   }
 
-  const { isAuthenticated, isLoading } = useBetterAuth();
+  let isAuthenticated = false;
 
-  // Wait for session to load
-  if (isLoading.value) {
-    return;
+  // On client, read directly from document.cookie for accurate state
+  if (import.meta.client) {
+    try {
+      const cookie = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+      if (cookie) {
+        const parts = cookie.split('=');
+        const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+        const state = JSON.parse(value);
+        isAuthenticated = !!state?.user;
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  } else {
+    // On server, use useCookie
+    const authStateCookie = useCookie<{ user: unknown; authMode: string } | null>('auth-state');
+    isAuthenticated = !!authStateCookie.value?.user;
   }
 
-  // Redirect to /app if already authenticated
-  if (isAuthenticated.value) {
-    return navigateTo('/app');
+  // Redirect to /app (or redirect query) if already authenticated
+  if (isAuthenticated) {
+    const redirect = to.query.redirect as string;
+    return navigateTo(redirect || '/app');
   }
 });

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

@@ -29,9 +29,7 @@ async function handleSignOut(): Promise<void> {
   <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>
+      <h1 class="text-3xl font-bold">Willkommen{{ user?.name ? `, ${user.name}` : '' }}!</h1>
       <p class="mt-2 text-muted">
         {{ user?.email }}
       </p>
@@ -41,12 +39,7 @@ async function handleSignOut(): Promise<void> {
     <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)"
-        >
+        <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" />
@@ -87,14 +80,7 @@ async function handleSignOut(): Promise<void> {
       </div>
 
       <template #footer>
-        <UButton
-          color="error"
-          variant="outline"
-          icon="i-lucide-log-out"
-          @click="handleSignOut"
-        >
-          Abmelden
-        </UButton>
+        <UButton color="error" variant="outline" icon="i-lucide-log-out" @click="handleSignOut"> Abmelden </UButton>
       </template>
     </UCard>
   </div>

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

@@ -13,7 +13,7 @@ import { authClient } from '~/lib/auth-client';
 // Composables
 // ============================================================================
 const toast = useToast();
-const { setUser, validateSession } = useBetterAuth();
+const { fetchWithAuth, setUser, switchToJwtMode, jwtToken } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -76,13 +76,45 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
       }
     }
 
-    // Update auth state with user data from response
+    // Extract token and user data from response (JWT mode: cookies: false)
+    const token = result?.token || result?.data?.token;
     const userData = result?.data?.user || result?.user;
-    if (userData) {
-      setUser(userData);
+
+    if (token) {
+      // JWT mode: Token is in the response
+      jwtToken.value = token;
+      if (userData) {
+        setUser(userData, 'jwt');
+      }
+      console.debug('[Auth] JWT token received from 2FA response');
+    } else if (userData) {
+      // Cookie mode: No token in response, use cookies
+      setUser(userData, 'cookie');
+      // Try to get JWT token for fallback
+      switchToJwtMode().catch(() => {});
     } else {
-      // Fallback: validate session to get user data
-      await validateSession();
+      // Fallback: fetch session data from API using authenticated fetch
+      try {
+        const isDev = import.meta.dev;
+        const runtimeConfig = useRuntimeConfig();
+        const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
+        const sessionResponse = await fetchWithAuth(`${apiBase}/get-session`);
+        if (sessionResponse.ok) {
+          const sessionData = await sessionResponse.json();
+          const sessionToken = sessionData?.token;
+          if (sessionToken) {
+            jwtToken.value = sessionToken;
+            if (sessionData?.user) {
+              setUser(sessionData.user, 'jwt');
+            }
+          } else if (sessionData?.user) {
+            setUser(sessionData.user, 'cookie');
+            switchToJwtMode().catch(() => {});
+          }
+        }
+      } catch {
+        // Ignore session fetch errors
+      }
     }
 
     await navigateTo('/app');

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

@@ -7,13 +7,11 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
-import { authClient } from '~/lib/auth-client';
-
 // ============================================================================
 // Composables
 // ============================================================================
 const toast = useToast();
-const { signIn, setUser, isLoading, validateSession } = useBetterAuth();
+const { signIn, setUser, isLoading, validateSession, authenticateWithPasskey } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -54,32 +52,30 @@ type Schema = InferOutput<typeof schema>;
 
 /**
  * Handle passkey authentication
- * Uses official Better Auth signIn.passkey() method
- * @see https://www.better-auth.com/docs/plugins/passkey
+ * Uses authenticateWithPasskey from composable which supports JWT mode (challengeId)
  */
 async function onPasskeyLogin(): Promise<void> {
   passkeyLoading.value = true;
 
   try {
-    // Use official Better Auth client method
-    // This calls: GET /passkey/generate-authenticate-options → POST /passkey/verify-authentication
-    const result = await authClient.signIn.passkey();
+    // Use composable method which handles challengeId for JWT mode
+    const result = await authenticateWithPasskey();
 
-    // Check for error in response
-    if (result.error) {
+    // Check for error in response (authenticateWithPasskey returns { success, error?, user? })
+    if (!result.success) {
       toast.add({
         color: 'error',
-        description: result.error.message || 'Passkey-Anmeldung fehlgeschlagen',
+        description: result.error || '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
+    if (result.user) {
+      setUser(result.user as any);
+    } else {
+      // Passkey auth may return success without user - fetch user via session validation
       await validateSession();
     }
 
@@ -129,10 +125,7 @@ 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;
-    const requires2FA = resultData && (
-      ('twoFactorRedirect' in resultData && resultData.twoFactorRedirect) ||
-      ('requiresTwoFactor' in resultData && resultData.requiresTwoFactor)
-    );
+    const requires2FA = resultData && (('twoFactorRedirect' in resultData && resultData.twoFactorRedirect) || ('requiresTwoFactor' in resultData && resultData.requiresTwoFactor));
     if (requires2FA) {
       // Redirect to 2FA page
       await navigateTo('/auth/2fa');
@@ -140,7 +133,7 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
     }
 
     // Check if login was successful (user data in response)
-    const userData = 'user' in result ? result.user : ('data' in result ? result.data?.user : null);
+    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

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

@@ -7,13 +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();
+const { signUp, signIn, registerPasskey } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -136,14 +134,13 @@ async function addPasskey(): Promise<void> {
   passkeyLoading.value = true;
 
   try {
-    const { error } = await authClient.passkey.addPasskey({
-      name: 'Mein Gerät',
-    });
+    // Use registerPasskey from composable which properly handles challengeId
+    const result = await registerPasskey('Mein Gerät');
 
-    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',
       });
       // Still navigate to app even if passkey failed

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

@@ -18,13 +18,7 @@ export default defineNuxtPlugin(() => {
 
   // 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',
-  ];
+  const publicAuthPaths = ['/auth/login', '/auth/register', '/auth/forgot-password', '/auth/reset-password', '/auth/2fa'];
 
   /**
    * Check if current route is a public auth route
@@ -35,7 +29,8 @@ export default defineNuxtPlugin(() => {
 
   /**
    * Check if URL is an auth-related endpoint that shouldn't trigger logout
-   * (e.g., login, register, password reset endpoints)
+   * (e.g., login, register, password reset, passkey endpoints)
+   * These endpoints use the authFetch wrapper which handles JWT fallback
    */
   function isAuthEndpoint(url: string): boolean {
     const authEndpoints = [
@@ -46,6 +41,16 @@ export default defineNuxtPlugin(() => {
       '/reset-password',
       '/verify-email',
       '/session',
+      '/token',
+      // Passkey endpoints - handled by authFetch with JWT fallback
+      '/passkey/',
+      '/list-user-passkeys',
+      '/generate-register-options',
+      '/verify-registration',
+      '/generate-authenticate-options',
+      '/verify-authentication',
+      // Two-factor endpoints
+      '/two-factor/',
     ];
     return authEndpoints.some((endpoint) => url.includes(endpoint));
   }
@@ -81,14 +86,17 @@ export default defineNuxtPlugin(() => {
         clearUser();
 
         // Redirect to login page with return URL
-        await navigateTo({
-          path: '/auth/login',
-          query: {
-            redirect: route.fullPath !== '/auth/login' ? route.fullPath : undefined,
+        await navigateTo(
+          {
+            path: '/auth/login',
+            query: {
+              redirect: route.fullPath !== '/auth/login' ? route.fullPath : undefined,
+            },
           },
-        }, {
-          replace: true,
-        });
+          {
+            replace: true,
+          },
+        );
       }
     } finally {
       // Reset flag after a short delay to allow navigation to complete

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

@@ -28,8 +28,9 @@ export default defineEventHandler(async (event) => {
     body = await readBody(event);
   }
 
-  // Forward cookies from the incoming request
+  // Forward cookies and authorization from the incoming request
   const cookieHeader = getHeader(event, 'cookie');
+  const authHeader = getHeader(event, 'authorization');
   // Use the actual origin from the request, fallback to localhost
   const originHeader = getHeader(event, 'origin') || getHeader(event, 'referer')?.replace(/\/[^/]*$/, '') || 'http://localhost:3001';
 
@@ -39,8 +40,9 @@ export default defineEventHandler(async (event) => {
     body: body ? JSON.stringify(body) : undefined,
     headers: {
       'Content-Type': 'application/json',
-      'Origin': originHeader,
+      Origin: originHeader,
       ...(cookieHeader ? { Cookie: cookieHeader } : {}),
+      ...(authHeader ? { Authorization: authHeader } : {}),
     },
     credentials: 'include',
     // Don't throw on error status codes
@@ -50,10 +52,16 @@ export default defineEventHandler(async (event) => {
   // 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)
+    // Rewrite cookie to work on localhost:
+    // 1. Remove domain (cookie will be set for current origin)
+    // 2. Remove secure flag (not needed for localhost)
+    // 3. Rewrite path from /iam to /api/iam (or set to / for broader access)
     const rewrittenCookie = cookie
       .replace(/domain=[^;]+;?\s*/gi, '')
-      .replace(/secure;?\s*/gi, '');
+      .replace(/secure;?\s*/gi, '')
+      // Ensure path is set to / so cookies work for all routes
+      .replace(/path=\/iam[^;]*;?\s*/gi, 'path=/; ')
+      .replace(/path=[^;]+;?\s*/gi, 'path=/; ');
     appendResponseHeader(event, 'Set-Cookie', rewrittenCookie);
   }
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "create-nuxt-base",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "license": "MIT",
+  "author": "lenne.Tech GmbH",
   "repository": {
     "url": "https://github.com/lenneTech/nuxt-base-starter"
   },
-  "author": "lenne.Tech GmbH",
   "bin": {
     "create-nuxt-base": "./index.js"
   },