create-nuxt-base 1.1.1 → 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

@@ -11,7 +11,7 @@ import * as v from 'valibot';
 // Composables
 // ============================================================================
 const toast = useToast();
-const { signUp, signIn } = useBetterAuth();
+const { signUp, signIn, registerPasskey } = useBetterAuth();
 
 // ============================================================================
 // Page Meta
@@ -24,6 +24,8 @@ definePageMeta({
 // Variables
 // ============================================================================
 const loading = ref<boolean>(false);
+const showPasskeyPrompt = ref<boolean>(false);
+const passkeyLoading = ref<boolean>(false);
 
 const fields: AuthFormField[] = [
   {
@@ -117,40 +119,89 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
 
     toast.add({
       color: 'success',
-      description: 'Dein Konto wurde erfolgreich erstellt. Du kannst Passkeys später in den Sicherheitseinstellungen hinzufügen.',
+      description: 'Dein Konto wurde erfolgreich erstellt',
       title: 'Willkommen!',
     });
 
-    // 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 });
+    // Show passkey prompt after successful registration + login
+    showPasskeyPrompt.value = true;
   } finally {
     loading.value = false;
   }
 }
+
+async function addPasskey(): Promise<void> {
+  passkeyLoading.value = true;
+
+  try {
+    // Use registerPasskey from composable which properly handles challengeId
+    const result = await registerPasskey('Mein Gerät');
+
+    if (!result.success) {
+      toast.add({
+        color: 'error',
+        description: result.error || '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: 'Passkey wurde erfolgreich hinzugefügt',
+      title: 'Erfolg',
+    });
+
+    await navigateTo('/app');
+  } finally {
+    passkeyLoading.value = false;
+  }
+}
+
+async function skipPasskey(): Promise<void> {
+  await navigateTo('/app');
+}
 </script>
 
 <template>
   <UPageCard class="w-md" variant="naked">
-    <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 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>
   </UPageCard>
 </template>