create-nuxt-base 1.1.2 → 1.2.0

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

@@ -17,6 +17,7 @@ interface BetterAuthUser {
  * Stored auth state (persisted in cookie for SSR compatibility)
  */
 interface StoredAuthState {
+  authMode: 'cookie' | 'jwt';
   user: BetterAuthUser | null;
 }
 
@@ -25,6 +26,7 @@ interface StoredAuthState {
  */
 interface PasskeyAuthResult {
   error?: string;
+  session?: { token: string };
   success: boolean;
   user?: BetterAuthUser;
 }
@@ -33,22 +35,49 @@ interface PasskeyAuthResult {
  * Better Auth composable with client-side state management
  *
  * This composable manages auth state using:
- * 1. Client-side state stored in a cookie (for SSR compatibility)
- * 2. Better Auth's session endpoint as a validation check
+ * 1. Primary: Session cookies (more secure, HttpOnly)
+ * 2. Fallback: JWT tokens (when cookies are not available/working)
  *
- * The state is populated after login and cleared on logout.
+ * The auth mode is automatically detected:
+ * - If session cookie works → use cookies
+ * - If cookies fail (401) → switch to JWT mode
  */
 export function useBetterAuth() {
   // Use useCookie for SSR-compatible persistent state
-  const authState = useCookie<StoredAuthState>('auth-state', {
-    default: () => ({ user: null }),
+  // Note: No default value to prevent overwriting existing cookies during hydration
+  const authState = useCookie<StoredAuthState | null>('auth-state', {
     maxAge: 60 * 60 * 24 * 7, // 7 days
     sameSite: 'lax',
   });
 
-  // Auth token cookie (for 2FA sessions where no session cookie is set)
-  const authToken = useCookie<string | null>('auth-token', {
-    default: () => null,
+  // On client, sync from browser cookie to ensure we have the latest value
+  // This prevents hydration mismatch where useCookie may return stale/null value
+  if (import.meta.client) {
+    try {
+      const cookieStr = document.cookie.split('; ').find((row) => row.startsWith('auth-state='));
+      if (cookieStr) {
+        const parts = cookieStr.split('=');
+        const value = parts.length > 1 ? decodeURIComponent(parts.slice(1).join('=')) : '';
+        if (value) {
+          const parsed = JSON.parse(value);
+          // Only update if the browser cookie has a user but useCookie doesn't
+          if (parsed?.user && !authState.value?.user) {
+            authState.value = parsed;
+          }
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  // Initialize with default only on server if cookie doesn't exist
+  if (import.meta.server && (authState.value === null || authState.value === undefined)) {
+    authState.value = { user: null, authMode: 'cookie' };
+  }
+
+  // JWT token storage (used when cookies are not available)
+  const jwtToken = useCookie<string | null>('jwt-token', {
     maxAge: 60 * 60 * 24 * 7, // 7 days
     sameSite: 'lax',
   });
@@ -56,24 +85,141 @@ export function useBetterAuth() {
   // Loading state
   const isLoading = ref<boolean>(false);
 
+  // Auth mode: 'cookie' (default) or 'jwt' (fallback)
+  const authMode = computed(() => authState.value?.authMode || 'cookie');
+  const isJwtMode = computed(() => authMode.value === 'jwt');
+
   // Computed properties based on stored state
   const user = computed<BetterAuthUser | null>(() => authState.value?.user ?? null);
   const isAuthenticated = computed<boolean>(() => !!user.value);
   const isAdmin = computed<boolean>(() => user.value?.role === 'admin');
   const is2FAEnabled = computed<boolean>(() => user.value?.twoFactorEnabled ?? false);
 
+  /**
+   * Get the API base URL
+   */
+  function getApiBase(): string {
+    const isDev = import.meta.dev;
+    const runtimeConfig = useRuntimeConfig();
+    return isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
+  }
+
   /**
    * Set user data after successful login/signup
+   * Also manually writes to browser cookie for SSR compatibility
    */
-  function setUser(userData: BetterAuthUser | null): void {
-    authState.value = { user: userData };
+  function setUser(userData: BetterAuthUser | null, mode: 'cookie' | 'jwt' = 'cookie'): void {
+    const newState = { user: userData, authMode: mode };
+    authState.value = newState;
+
+    // Manually write to browser cookie for immediate SSR compatibility
+    if (import.meta.client) {
+      const maxAge = 60 * 60 * 24 * 7; // 7 days
+      document.cookie = `auth-state=${encodeURIComponent(JSON.stringify(newState))}; path=/; max-age=${maxAge}; samesite=lax`;
+    }
   }
 
   /**
    * Clear user data on logout
+   * Also manually clears browser cookies for SSR compatibility
    */
   function clearUser(): void {
-    authState.value = { user: null };
+    const clearedState = { user: null, authMode: 'cookie' as const };
+    authState.value = clearedState;
+    jwtToken.value = null;
+
+    // Manually clear browser cookies for immediate SSR compatibility
+    if (import.meta.client) {
+      const maxAge = 60 * 60 * 24 * 7; // 7 days
+      document.cookie = `auth-state=${encodeURIComponent(JSON.stringify(clearedState))}; path=/; max-age=${maxAge}; samesite=lax`;
+      document.cookie = `jwt-token=; path=/; max-age=0`;
+
+      // Clear Better Auth session cookies (set by the API)
+      // These cookies may have different names depending on the configuration
+      const sessionCookieNames = ['better-auth.session_token', 'better-auth.session', '__Secure-better-auth.session_token', 'session_token', 'session'];
+
+      for (const name of sessionCookieNames) {
+        // Clear with different path variations
+        document.cookie = `${name}=; path=/; max-age=0`;
+        document.cookie = `${name}=; path=/api; max-age=0`;
+        document.cookie = `${name}=; path=/api/iam; max-age=0`;
+        document.cookie = `${name}=; path=/iam; max-age=0`;
+      }
+    }
+  }
+
+  /**
+   * Switch to JWT mode and fetch a token
+   */
+  async function switchToJwtMode(): 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) {
+          jwtToken.value = data.token;
+          if (authState.value) {
+            authState.value = { ...authState.value, authMode: 'jwt' };
+          }
+          console.debug('[Auth] Switched to JWT mode');
+          return true;
+        }
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Refresh JWT token before it expires
+   */
+  async function refreshJwtToken(): Promise<boolean> {
+    if (!isJwtMode.value || !jwtToken.value) return false;
+    return switchToJwtMode();
+  }
+
+  /**
+   * Authenticated fetch wrapper
+   * Uses cookies by default, falls back to JWT if cookies fail
+   */
+  async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
+    const headers = new Headers(options.headers);
+
+    // In JWT mode, add Authorization header
+    if (isJwtMode.value && jwtToken.value) {
+      headers.set('Authorization', `Bearer ${jwtToken.value}`);
+    }
+
+    const response = await fetch(url, {
+      ...options,
+      headers,
+      // Only include credentials in cookie mode
+      credentials: isJwtMode.value ? 'omit' : 'include',
+    });
+
+    // If we get 401 in cookie mode, try switching to JWT
+    if (response.status === 401 && !isJwtMode.value && isAuthenticated.value) {
+      console.debug('[Auth] Cookie auth failed, attempting JWT fallback...');
+      const switched = await switchToJwtMode();
+
+      if (switched) {
+        // Retry the request with JWT
+        headers.set('Authorization', `Bearer ${jwtToken.value}`);
+        return fetch(url, {
+          ...options,
+          headers,
+          credentials: 'omit',
+        });
+      }
+    }
+
+    return response;
   }
 
   /**
@@ -103,23 +249,21 @@ export function useBetterAuth() {
 
       // If session has user data, update our state
       if (session.value.data?.user) {
-        setUser(session.value.data.user as BetterAuthUser);
+        setUser(session.value.data.user as BetterAuthUser, 'cookie');
+        // Pre-fetch JWT for fallback
+        switchToJwtMode().catch(() => {});
         return true;
       }
 
-      // Session not found - check if we have a stored token cookie
-      // If we have auth-state but no session, it might be a mismatch
-      // For now, trust the stored state if token cookie exists
-      const tokenCookie = useCookie('token');
-      if (tokenCookie.value && authState.value?.user) {
-        // We have both token and stored user - trust it
+      // Session not found from Better Auth API
+      // Trust the stored auth-state if user exists (e.g., after 2FA verification)
+      // The auth-state cookie is set by our application after successful login/2FA
+      if (authState.value?.user) {
+        // Pre-fetch JWT for fallback
+        switchToJwtMode().catch(() => {});
         return true;
       }
 
-      // No valid session found - clear state
-      if (authState.value?.user) {
-        clearUser();
-      }
       return false;
     } catch (error) {
       console.debug('Session validation failed:', error);
@@ -137,11 +281,23 @@ export function useBetterAuth() {
       try {
         const result = await authClient.signIn.email(params, options);
 
-        // Check for successful response with user data
-        if (result && 'user' in result && result.user) {
-          setUser(result.user as BetterAuthUser);
-        } else if (result && 'data' in result && result.data?.user) {
-          setUser(result.data.user as BetterAuthUser);
+        // Extract token from response (JWT mode: cookies: false)
+        const resultAny = result as any;
+        const token = resultAny?.token || resultAny?.data?.token;
+        const userData = resultAny?.user || resultAny?.data?.user;
+
+        if (token) {
+          // JWT mode: Token is in the response
+          jwtToken.value = token;
+          if (userData) {
+            setUser(userData as BetterAuthUser, 'jwt');
+          }
+          console.debug('[Auth] JWT token received from login response');
+        } else if (userData) {
+          // Cookie mode: No token in response, use cookies
+          setUser(userData as BetterAuthUser, 'cookie');
+          // Try to get JWT token for fallback
+          switchToJwtMode().catch(() => {});
         }
 
         return result;
@@ -161,11 +317,22 @@ export function useBetterAuth() {
       try {
         const result = await authClient.signUp.email(params, options);
 
-        // Check for successful response with user data
-        if (result && 'user' in result && result.user) {
-          setUser(result.user as BetterAuthUser);
-        } else if (result && 'data' in result && result.data?.user) {
-          setUser(result.data.user as BetterAuthUser);
+        // Extract token from response (JWT mode: cookies: false)
+        const resultAny = result as any;
+        const token = resultAny?.token || resultAny?.data?.token;
+        const userData = resultAny?.user || resultAny?.data?.user;
+
+        if (token) {
+          // JWT mode: Token is in the response
+          jwtToken.value = token;
+          if (userData) {
+            setUser(userData as BetterAuthUser, 'jwt');
+          }
+          console.debug('[Auth] JWT token received from signup response');
+        } else if (userData) {
+          // Cookie mode: No token in response, use cookies
+          setUser(userData as BetterAuthUser, 'cookie');
+          switchToJwtMode().catch(() => {});
         }
 
         return result;
@@ -205,16 +372,11 @@ export function useBetterAuth() {
     isLoading.value = true;
 
     try {
-      // In development, use the Nuxt proxy to ensure cookies are sent correctly
-      // In production, use the direct API URL
-      const isDev = import.meta.dev;
-      const runtimeConfig = useRuntimeConfig();
-      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
+      const apiBase = getApiBase();
 
       // Step 1: Get authentication options from server
-      const optionsResponse = await fetch(`${apiBase}/passkey/generate-authenticate-options`, {
+      const optionsResponse = await fetchWithAuth(`${apiBase}/passkey/generate-authenticate-options`, {
         method: 'GET',
-        credentials: 'include',
       });
 
       if (!optionsResponse.ok) {
@@ -258,11 +420,11 @@ export function useBetterAuth() {
 
       // Step 5: Verify with server
       // Note: The server expects { response: credentialData } format (matching @simplewebauthn/browser output)
-      const authResponse = await fetch(`${apiBase}/passkey/verify-authentication`, {
+      // Include challengeId for JWT mode (database challenge storage)
+      const authResponse = await fetchWithAuth(`${apiBase}/passkey/verify-authentication`, {
         method: 'POST',
-        credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ response: credentialBody }),
+        body: JSON.stringify({ challengeId: options.challengeId, response: credentialBody }),
       });
 
       const result = await authResponse.json();
@@ -273,10 +435,19 @@ export function useBetterAuth() {
 
       // Store user data after successful passkey login
       if (result.user) {
-        setUser(result.user as BetterAuthUser);
+        setUser(result.user as BetterAuthUser, 'cookie');
+        switchToJwtMode().catch(() => {});
+      } else if (result.session?.token) {
+        // Passkey auth returns session without user in JWT mode
+        // Store the session token as JWT and fetch user via validateSession
+        jwtToken.value = result.session.token;
+        if (authState.value) {
+          authState.value = { ...authState.value, authMode: 'jwt' };
+        }
+        console.debug('[Auth] Passkey: Stored session token as JWT');
       }
 
-      return { success: true, user: result.user as BetterAuthUser };
+      return { success: true, user: result.user as BetterAuthUser, session: result.session };
     } catch (err: unknown) {
       // Handle WebAuthn-specific errors
       if (err instanceof Error && err.name === 'NotAllowedError') {
@@ -303,16 +474,11 @@ export function useBetterAuth() {
     isLoading.value = true;
 
     try {
-      // In development, use the Nuxt proxy to ensure cookies are sent correctly
-      // In production, use the direct API URL
-      const isDev = import.meta.dev;
-      const runtimeConfig = useRuntimeConfig();
-      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
+      const apiBase = getApiBase();
 
       // Step 1: Get registration options from server
-      const optionsResponse = await fetch(`${apiBase}/passkey/generate-register-options`, {
+      const optionsResponse = await fetchWithAuth(`${apiBase}/passkey/generate-register-options`, {
         method: 'GET',
-        credentials: 'include',
       });
 
       if (!optionsResponse.ok) {
@@ -356,6 +522,8 @@ export function useBetterAuth() {
       const attestationResponse = credential.response as AuthenticatorAttestationResponse;
       const credentialBody = {
         name,
+        // Include challengeId for JWT mode (database challenge storage)
+        challengeId: options.challengeId,
         response: {
           id: credential.id,
           rawId: arrayBufferToBase64Url(credential.rawId),
@@ -370,9 +538,8 @@ export function useBetterAuth() {
       };
 
       // Step 6: Send to server for verification and storage
-      const registerResponse = await fetch(`${apiBase}/passkey/verify-registration`, {
+      const registerResponse = await fetchWithAuth(`${apiBase}/passkey/verify-registration`, {
         method: 'POST',
-        credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(credentialBody),
       });
@@ -395,21 +562,36 @@ export function useBetterAuth() {
   }
 
   return {
+    // Auth state
+    authMode,
+    isAuthenticated,
+    isJwtMode,
+    isLoading: computed(() => isLoading.value),
+    user,
+
+    // User properties
+    is2FAEnabled,
+    isAdmin,
+
+    // Auth actions
     authenticateWithPasskey,
     changePassword: authClient.changePassword,
     clearUser,
-    is2FAEnabled,
-    isAdmin,
-    isAuthenticated,
-    isLoading: computed(() => isLoading.value),
-    passkey: authClient.passkey,
     registerPasskey,
     setUser,
     signIn,
     signOut,
     signUp,
-    twoFactor: authClient.twoFactor,
-    user,
     validateSession,
+
+    // JWT management
+    fetchWithAuth,
+    jwtToken,
+    refreshJwtToken,
+    switchToJwtMode,
+
+    // Better Auth client passthrough
+    passkey: authClient.passkey,
+    twoFactor: authClient.twoFactor,
   };
 }

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

@@ -2,6 +2,7 @@ import { passkeyClient } from '@better-auth/passkey/client';
 import { adminClient, twoFactorClient } from 'better-auth/client/plugins';
 import { createAuthClient } from 'better-auth/vue';
 
+import { authFetch } from '~/lib/auth-state';
 import { sha256 } from '~/utils/crypto';
 
 // =============================================================================
@@ -85,18 +86,13 @@ export function createBetterAuthClient(config: AuthClientConfig = {}) {
   // - 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');
+  // Note: In Nuxt, use import.meta.dev (not import.meta.env?.DEV which is Vite-specific)
+  // At lenne.tech, 'development' is a stage on a web server, 'local' is the local dev environment
+  const isDev = import.meta.dev || process.env.NODE_ENV === 'local';
+  const defaultBaseURL = isDev ? '' : import.meta.env?.VITE_API_URL || process.env.API_URL || 'http://localhost:3000';
   const defaultBasePath = isDev ? '/api/iam' : '/iam';
 
-  const {
-    baseURL = defaultBaseURL,
-    basePath = defaultBasePath,
-    twoFactorRedirectPath = '/auth/2fa',
-    enableAdmin = true,
-    enableTwoFactor = true,
-    enablePasskey = true,
-  } = config;
+  const { baseURL = defaultBaseURL, basePath = defaultBasePath, twoFactorRedirectPath = '/auth/2fa', enableAdmin = true, enableTwoFactor = true, enablePasskey = true } = config;
 
   // Build plugins array based on configuration
   const plugins: any[] = [];
@@ -120,11 +116,12 @@ export function createBetterAuthClient(config: AuthClientConfig = {}) {
   }
 
   // Create base client with configuration
+  // Uses authFetch for automatic Cookie/JWT dual-mode authentication
   const baseClient = createAuthClient({
     basePath,
     baseURL,
     fetchOptions: {
-      credentials: 'include', // Required for cross-origin cookie handling
+      customFetchImpl: authFetch,
     },
     plugins,
   });