create-nuxt-base 1.1.1 → 1.1.2

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.2](https://github.com/lenneTech/nuxt-base-starter/compare/v1.1.1...v1.1.2) (2026-01-22)
+
 ### [1.1.1](https://github.com/lenneTech/nuxt-base-starter/compare/v1.1.0...v1.1.1) (2026-01-20)
 
 

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

@@ -205,12 +205,14 @@ export function useBetterAuth() {
     isLoading.value = true;
 
     try {
-      // Direct API access (CORS is configured on the server for trusted origins)
+      // 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 apiUrl = runtimeConfig.public.apiUrl || 'http://localhost:3000';
+      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
 
       // Step 1: Get authentication options from server
-      const optionsResponse = await fetch(`${apiUrl}/iam/passkey/generate-authenticate-options`, {
+      const optionsResponse = await fetch(`${apiBase}/passkey/generate-authenticate-options`, {
         method: 'GET',
         credentials: 'include',
       });
@@ -255,11 +257,12 @@ export function useBetterAuth() {
       };
 
       // Step 5: Verify with server
-      const authResponse = await fetch(`${apiUrl}/iam/passkey/verify-authentication`, {
+      // Note: The server expects { response: credentialData } format (matching @simplewebauthn/browser output)
+      const authResponse = await fetch(`${apiBase}/passkey/verify-authentication`, {
         method: 'POST',
         credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(credentialBody),
+        body: JSON.stringify({ response: credentialBody }),
       });
 
       const result = await authResponse.json();
@@ -300,12 +303,14 @@ export function useBetterAuth() {
     isLoading.value = true;
 
     try {
-      // Direct API access (CORS is configured on the server for trusted origins)
+      // 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 apiUrl = runtimeConfig.public.apiUrl || 'http://localhost:3000';
+      const apiBase = isDev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
 
       // Step 1: Get registration options from server
-      const optionsResponse = await fetch(`${apiUrl}/iam/passkey/generate-register-options`, {
+      const optionsResponse = await fetch(`${apiBase}/passkey/generate-register-options`, {
         method: 'GET',
         credentials: 'include',
       });
@@ -365,7 +370,7 @@ export function useBetterAuth() {
       };
 
       // Step 6: Send to server for verification and storage
-      const registerResponse = await fetch(`${apiUrl}/iam/passkey/verify-registration`, {
+      const registerResponse = await fetch(`${apiBase}/passkey/verify-registration`, {
         method: 'POST',
         credentials: 'include',
         headers: { 'Content-Type': 'application/json' },

package/nuxt-base-template/app/layouts/default.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
 
+const { isAuthenticated, signOut, user } = useBetterAuth();
+
+async function handleLogout() {
+  await signOut();
+  await navigateTo('/auth/login');
+}
+
 const headerItems = computed<NavigationMenuItem[]>(() => [
   {
     label: 'Docs',
@@ -51,6 +58,16 @@ const footerItems: NavigationMenuItem[] = [
       <UNavigationMenu :items="headerItems" />
 
       <template #right>
+        <template v-if="isAuthenticated">
+          <span class="text-sm text-muted hidden sm:inline">{{ user?.email }}</span>
+          <UTooltip text="Logout">
+            <UButton color="neutral" variant="ghost" icon="i-lucide-log-out" aria-label="Logout" @click="handleLogout" />
+          </UTooltip>
+        </template>
+        <template v-else>
+          <UButton color="primary" variant="soft" to="/auth/login" icon="i-lucide-log-in" label="Login" />
+        </template>
+
         <UColorModeButton />
 
         <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">

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

@@ -7,6 +7,8 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
+import { authClient } from '~/lib/auth-client';
+
 // ============================================================================
 // Composables
 // ============================================================================
@@ -24,6 +26,8 @@ definePageMeta({
 // Variables
 // ============================================================================
 const loading = ref<boolean>(false);
+const showPasskeyPrompt = ref<boolean>(false);
+const passkeyLoading = ref<boolean>(false);
 
 const fields: AuthFormField[] = [
   {
@@ -117,40 +121,90 @@ 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 {
+    const { error } = await authClient.passkey.addPasskey({
+      name: 'Mein Gerät',
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || '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>

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

@@ -0,0 +1,143 @@
+/**
+ * Auth Interceptor Plugin
+ *
+ * This plugin intercepts all API responses and handles session expiration.
+ * When a 401 (Unauthorized) response is received, it automatically:
+ * 1. Clears the user session state
+ * 2. Redirects to the login page
+ *
+ * Note: This is a client-only plugin (.client.ts) since auth state
+ * management only makes sense in the browser context.
+ */
+export default defineNuxtPlugin(() => {
+  const { clearUser, isAuthenticated } = useBetterAuth();
+  const route = useRoute();
+
+  // Track if we're already handling a 401 to prevent multiple redirects
+  let isHandling401 = false;
+
+  // 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',
+  ];
+
+  /**
+   * Check if current route is a public auth route
+   */
+  function isPublicAuthRoute(): boolean {
+    return publicAuthPaths.some((path) => route.path.startsWith(path));
+  }
+
+  /**
+   * Check if URL is an auth-related endpoint that shouldn't trigger logout
+   * (e.g., login, register, password reset endpoints)
+   */
+  function isAuthEndpoint(url: string): boolean {
+    const authEndpoints = [
+      '/sign-in',
+      '/sign-up',
+      '/sign-out',
+      '/forgot-password',
+      '/reset-password',
+      '/verify-email',
+      '/session',
+    ];
+    return authEndpoints.some((endpoint) => url.includes(endpoint));
+  }
+
+  /**
+   * Handle 401 Unauthorized responses
+   * Clears user state and redirects to login page
+   */
+  async function handleUnauthorized(requestUrl?: string): Promise<void> {
+    // Prevent multiple simultaneous 401 handling
+    if (isHandling401) {
+      return;
+    }
+
+    // Don't handle 401 for auth endpoints (expected behavior)
+    if (requestUrl && isAuthEndpoint(requestUrl)) {
+      return;
+    }
+
+    // Don't handle 401 on public auth pages
+    if (isPublicAuthRoute()) {
+      return;
+    }
+
+    isHandling401 = true;
+
+    try {
+      // Only handle if user was authenticated (prevents redirect loops)
+      if (isAuthenticated.value) {
+        console.debug('[Auth Interceptor] Session expired, logging out...');
+
+        // Clear user state
+        clearUser();
+
+        // Redirect to login page with return URL
+        await navigateTo({
+          path: '/auth/login',
+          query: {
+            redirect: route.fullPath !== '/auth/login' ? route.fullPath : undefined,
+          },
+        }, {
+          replace: true,
+        });
+      }
+    } finally {
+      // Reset flag after a short delay to allow navigation to complete
+      setTimeout(() => {
+        isHandling401 = false;
+      }, 1000);
+    }
+  }
+
+  // Override the default $fetch to add response error handling
+  const originalFetch = globalThis.$fetch;
+
+  // Use a wrapper to intercept responses
+  globalThis.$fetch = ((url: string, options?: any) => {
+    return originalFetch(url, {
+      ...options,
+      onResponseError: (context: any) => {
+        // Call original onResponseError if provided
+        if (options?.onResponseError) {
+          options.onResponseError(context);
+        }
+
+        // Handle 401 errors
+        if (context.response?.status === 401) {
+          handleUnauthorized(url);
+        }
+      },
+    });
+  }) as typeof globalThis.$fetch;
+
+  // Also intercept native fetch for manual API calls
+  const originalNativeFetch = globalThis.fetch;
+
+  globalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const response = await originalNativeFetch(input, init);
+
+    // Handle 401 errors from native fetch
+    if (response.status === 401) {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+      handleUnauthorized(url);
+    }
+
+    return response;
+  };
+
+  // Provide a manual method to trigger logout on 401
+  return {
+    provide: {
+      handleUnauthorized,
+    },
+  };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nuxt-base",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "license": "MIT",
   "repository": {