@onmax/nuxt-better-auth 0.0.2 → 0.0.4

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@onmax/nuxt-better-auth",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "configKey": "auth",
   "compatibility": {
     "nuxt": ">=4.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { existsSync, statSync, writeFileSync, readFileSync } from 'node:fs';
 import { mkdir, writeFile } from 'node:fs/promises';
-import { getLayerDirectories, updateTemplates, addServerImportsDir, addServerImports, addServerScanDir, addServerHandler, addImportsDir, addPlugin, addComponentsDir, hasNuxtModule, installModule, extendPages, addTemplate, addTypeTemplate, defineNuxtModule, createResolver } from '@nuxt/kit';
+import { getLayerDirectories, updateTemplates, addServerImportsDir, addServerImports, addServerScanDir, addServerHandler, addImportsDir, addPlugin, addComponentsDir, extendPages, addTemplate, hasNuxtModule, addTypeTemplate, defineNuxtModule, createResolver } from '@nuxt/kit';
 import { consola as consola$1 } from 'consola';
 import { isAbsolute, join, relative, dirname } from 'pathe';
 import { defu } from 'defu';
@@ -10,7 +10,7 @@ import { randomBytes } from 'node:crypto';
 import { isCI, isTest } from 'std-env';
 export { defineClientAuth, defineServerAuth } from '../dist/runtime/config.js';
 
-const version = "0.0.2";
+const version = "0.0.4";
 
 const CONFIG_EXTENSIONS = [".ts", ".js"];
 const CONFIG_EXTENSION_RE = /\.(?:ts|js)$/;
@@ -224,8 +224,6 @@ async function registerDevtools(input) {
   const isProduction = process.env.NODE_ENV === "production" || !nuxt.options.dev;
   if (isProduction || clientOnly)
     return;
-  if (!hasNuxtModule("@nuxt/ui"))
-    await installModule("@nuxt/ui");
   setupDevTools(nuxt);
   addServerHandler({ route: "/api/_better-auth/config", method: "get", handler: resolve("./runtime/server/api/_better-auth/config.get") });
   if (hasHubDb) {
@@ -238,7 +236,7 @@ async function registerDevtools(input) {
     handlers.forEach((handler) => addServerHandler(handler));
   }
   extendPages((pages) => {
-    pages.push({ name: "better-auth-devtools", path: "/__better-auth-devtools", file: resolve("./runtime/app/pages/__better-auth-devtools.vue") });
+    pages.push({ name: "better-auth-devtools", path: "/__better-auth-devtools", file: resolve("./runtime/app/pages/__better-auth-devtools.vue"), meta: { layout: false } });
   });
 }
 function registerRouteRulesMetaHook(nuxt) {
@@ -295,7 +293,15 @@ async function generateDrizzleSchema(authOptions, dialect, schemaOptions) {
   }
   return result.code;
 }
-async function loadUserAuthConfig(configPath, throwOnError = false, alias) {
+function loadLocalEnv(rootDir) {
+  if (!rootDir)
+    return;
+  const envPath = join(rootDir, ".env.local");
+  if (!existsSync(envPath))
+    return;
+  process.loadEnvFile(envPath);
+}
+async function loadUserAuthConfig(configPath, throwOnError = false, alias, runtimeConfig = {}, rootDir) {
   const { createJiti } = await import('jiti');
   const { defineServerAuth: runtimeDefineServerAuth } = await import('../dist/runtime/config.js');
   const jiti = createJiti(import.meta.url, { interopDefault: true, moduleCache: false, alias });
@@ -309,10 +315,11 @@ async function loadUserAuthConfig(configPath, throwOnError = false, alias) {
   }
   schemaGlobals.__nuxtBetterAuthDefineServerAuth._count++;
   try {
+    loadLocalEnv(rootDir);
     const mod = await jiti.import(configPath);
     const configFn = mod.default;
     if (typeof configFn === "function") {
-      return configFn({ runtimeConfig: {}, db: null });
+      return configFn({ runtimeConfig, db: null });
     }
     consola$1.warn("[@onmax/nuxt-better-auth] auth.config.ts does not export default. Expected: export default defineServerAuth(...)");
     if (throwOnError) {
@@ -388,7 +395,7 @@ async function loadAuthOptions(context) {
   const alias = Object.fromEntries(
     Object.entries(context.nuxt.options.alias).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, value])
   );
-  const userConfig = await loadUserAuthConfig(configFile, isProduction, alias);
+  const userConfig = await loadUserAuthConfig(configFile, isProduction, alias, context.nuxt.options.runtimeConfig, context.nuxt.options.rootDir);
   const extendedConfig = {};
   await context.nuxt.callHook("better-auth:config:extend", extendedConfig);
   const plugins = [...userConfig.plugins || [], ...extendedConfig.plugins || []];
@@ -730,11 +737,23 @@ export { db }`;
 export const db = undefined`;
 }
 function buildSchemaExportCode(hasHubDb, hubDialect) {
-  if (!hasHubDb)
-    return "export const schema = undefined\n";
+  if (!hasHubDb) {
+    return `export const user = undefined
+export const session = undefined
+export const account = undefined
+export const verification = undefined
+export const schema = undefined
+`;
+  }
   return `export * from './schema.${hubDialect}.mjs'
-import * as schema from './schema.${hubDialect}.mjs'
-export { schema }
+import * as generatedSchema from './schema.${hubDialect}.mjs'
+
+const getGeneratedTable = name => generatedSchema[name] ?? generatedSchema[\`\${name}s\`]
+export const user = getGeneratedTable('user')
+export const session = getGeneratedTable('session')
+export const account = getGeneratedTable('account')
+export const verification = getGeneratedTable('verification')
+export const schema = { ...generatedSchema, user, session, account, verification }
 `;
 }
 function buildAuthRouteRulesCode(authRouteRules) {
@@ -1176,7 +1195,6 @@ declare module 'nitropack' {
   interface NitroRouteConfig {
     auth?: import('${runtimeTypesPath}').AuthMeta
   }
-  interface InternalApi extends _GeneratedAuthInternalApi {}
 }
 declare module 'nitropack/types' {
   interface NitroRouteRules {
@@ -1185,7 +1203,6 @@ declare module 'nitropack/types' {
   interface NitroRouteConfig {
     auth?: import('${runtimeTypesPath}').AuthMeta
   }
-  interface InternalApi extends _GeneratedAuthInternalApi {}
 }
 declare module 'nitro/types' {
   interface NitroRouteRules {
@@ -1194,7 +1211,6 @@ declare module 'nitro/types' {
   interface NitroRouteConfig {
     auth?: import('${runtimeTypesPath}').AuthMeta
   }
-  interface InternalApi extends _GeneratedAuthInternalApi {}
 }
 export {}
 `

package/dist/runtime/app/composables/runWithSessionRefresh.d.ts

@@ -0,0 +1 @@
+export declare function runWithSessionRefresh<TResult>(runner: () => Promise<TResult>): Promise<TResult>;

package/dist/runtime/app/composables/runWithSessionRefresh.js

@@ -0,0 +1,12 @@
+import { isAuthActionErrorResult } from "../internal/auth-action-handles.js";
+import { refreshSessionAfterAuthAction } from "../internal/wrap-auth-method.js";
+import { useUserSession } from "./useUserSession.js";
+export async function runWithSessionRefresh(runner) {
+  if (typeof runner !== "function")
+    throw new TypeError("runWithSessionRefresh(runner) requires an async function");
+  const auth = useUserSession();
+  const result = await runner();
+  if (!isAuthActionErrorResult(result))
+    await refreshSessionAfterAuthAction(auth.fetchSession, auth.loggedIn, auth.waitForSession);
+  return result;
+}

package/dist/runtime/app/internal/auth-action-handles.d.ts

@@ -14,5 +14,8 @@ export type ActionHandleFor<T> = T extends (...args: infer A) => Promise<infer R
 export type ActionHandleMap<T> = {
     [K in keyof T]: ActionHandleFor<T[K]>;
 };
+export declare function isAuthActionErrorResult(value: unknown): value is {
+    error: unknown;
+};
 export declare function createActionHandle<TArgs extends unknown[], TResult>(getMethod: () => (...args: TArgs) => Promise<TResult>, options?: CreateActionHandleOptions): UserAuthActionHandle<TArgs, TResult>;
 export declare function createActionHandles<T extends object>(getTarget: () => T, targetName: string): ActionHandleMap<T>;

package/dist/runtime/app/internal/auth-action-handles.js

@@ -1,7 +1,7 @@
 import { ref } from "#imports";
 import { normalizeAuthActionError } from "./auth-action-error.js";
 import { isRecord } from "./utils.js";
-function isErrorResult(value) {
+export function isAuthActionErrorResult(value) {
   if (!isRecord(value))
     return false;
   if (!("error" in value))
@@ -36,7 +36,7 @@ export function createActionHandle(getMethod, options = {}) {
     error.value = null;
     try {
       const result = await getMethod()(...args);
-      if (isErrorResult(result)) {
+      if (isAuthActionErrorResult(result)) {
         const normalizedError = normalizeAuthActionError(result.error);
         if (callId === latestCallId) {
           status.value = "error";

package/dist/runtime/app/internal/wrap-auth-method.d.ts

@@ -1,4 +1,7 @@
 import type { ComputedRef } from 'vue';
+export declare function refreshSessionAfterAuthAction(fetchSession: (options?: {
+    force?: boolean;
+}) => Promise<void>, loggedIn: ComputedRef<boolean>, waitForSession: () => Promise<void>): Promise<void>;
 export declare function wrapOnSuccess(fetchSession: (options?: {
     force?: boolean;
 }) => Promise<void>, loggedIn: ComputedRef<boolean>, waitForSession: () => Promise<void>, cb: (ctx: unknown) => void | Promise<void>): (ctx: unknown) => Promise<void>;

package/dist/runtime/app/internal/wrap-auth-method.js

@@ -1,11 +1,14 @@
 import { nextTick } from "#imports";
 import { isRecord } from "./utils.js";
+export async function refreshSessionAfterAuthAction(fetchSession, loggedIn, waitForSession) {
+  await fetchSession({ force: true });
+  if (!loggedIn.value)
+    await waitForSession();
+  await nextTick();
+}
 export function wrapOnSuccess(fetchSession, loggedIn, waitForSession, cb) {
   return async (ctx) => {
-    await fetchSession({ force: true });
-    if (!loggedIn.value)
-      await waitForSession();
-    await nextTick();
+    await refreshSessionAfterAuthAction(fetchSession, loggedIn, waitForSession);
     await cb(ctx);
   };
 }

package/dist/runtime/app/middleware/auth.global.js

@@ -1,11 +1,14 @@
 import { defu } from "defu";
 import { createRouter, toRouteMatcher } from "radix3";
 import { createError, defineNuxtRouteMiddleware, getRouteRules, navigateTo, useNuxtApp, useRequestHeaders, useRuntimeConfig } from "#imports";
+import { shouldSkipAuthRouteRules } from "../../internal/auth-route-rules.js";
 import { matchesUser } from "../../utils/match-user.js";
 import { useUserSession } from "../composables/useUserSession.js";
 let authRouteRulesPromise = null;
 let routeRulesMatcherPromise = null;
 export default defineNuxtRouteMiddleware(async (to) => {
+  if (shouldSkipAuthRouteRules(to.path))
+    return;
   const nuxtApp = useNuxtApp();
   if (to.meta.auth === void 0) {
     const routeRulesMatcher = await getRouteRulesMatcher();

package/dist/runtime/app/pages/__better-auth-devtools.vue

@@ -1,420 +1,380 @@
 <script setup>
+import { useFetch, useRuntimeConfig } from "#imports";
 import { useDevtoolsClient } from "@nuxt/devtools-kit/iframe-client";
-import { refDebounced } from "@vueuse/core";
-definePageMeta({ layout: false });
-const toast = useToast();
+import { computed, ref, watch, watchEffect } from "vue";
+const pageSize = 20;
+const tabLabels = {
+  sessions: "Sessions",
+  users: "Users",
+  accounts: "Accounts",
+  config: "Config"
+};
 const devtoolsClient = useDevtoolsClient();
 const runtimeConfig = useRuntimeConfig();
 const hasDb = computed(() => runtimeConfig.public.auth?.useDatabase ?? false);
 const isDark = computed(() => devtoolsClient.value?.host?.app?.colorMode?.value === "dark");
 watchEffect(() => {
-  if (import.meta.client) {
+  if (import.meta.client)
     document.documentElement.classList.toggle("dark", isDark.value);
-  }
+});
+const activeTab = ref(hasDb.value ? "sessions" : "config");
+const tabs = computed(() => hasDb.value ? ["sessions", "users", "accounts", "config"] : ["config"]);
+watch(hasDb, (enabled) => {
+  if (!enabled)
+    activeTab.value = "config";
 });
 const sessionsPage = ref(1);
 const usersPage = ref(1);
 const accountsPage = ref(1);
 const deleteConfirm = ref(null);
-const sessionsSearchRaw = ref("");
-const usersSearchRaw = ref("");
-const accountsSearchRaw = ref("");
-const sessionsSearch = refDebounced(sessionsSearchRaw, 300);
-const usersSearch = refDebounced(usersSearchRaw, 300);
-const accountsSearch = refDebounced(accountsSearchRaw, 300);
+const notice = ref("");
+const sessionsSearch = ref("");
+const usersSearch = ref("");
+const accountsSearch = ref("");
 watch(sessionsSearch, () => sessionsPage.value = 1);
 watch(usersSearch, () => usersPage.value = 1);
 watch(accountsSearch, () => accountsPage.value = 1);
-const sessionsQuery = computed(() => ({ page: sessionsPage.value, limit: 20, search: sessionsSearch.value }));
-const usersQuery = computed(() => ({ page: usersPage.value, limit: 20, search: usersSearch.value }));
-const accountsQuery = computed(() => ({ page: accountsPage.value, limit: 20, search: accountsSearch.value }));
+const sessionsQuery = computed(() => ({ page: sessionsPage.value, limit: pageSize, search: sessionsSearch.value }));
+const usersQuery = computed(() => ({ page: usersPage.value, limit: pageSize, search: usersSearch.value }));
+const accountsQuery = computed(() => ({ page: accountsPage.value, limit: pageSize, search: accountsSearch.value }));
 const { data: sessionsData, refresh: refreshSessions } = await useFetch("/api/_better-auth/sessions", { query: sessionsQuery, immediate: hasDb.value });
 const { data: usersData, refresh: refreshUsers } = await useFetch("/api/_better-auth/users", { query: usersQuery, immediate: hasDb.value });
 const { data: accountsData, refresh: refreshAccounts } = await useFetch("/api/_better-auth/accounts", { query: accountsQuery, immediate: hasDb.value });
 const { data: configData } = await useFetch("/api/_better-auth/config");
-const tabs = computed(() => {
-  const dbTabs = [
-    { label: "Sessions", value: "sessions", icon: "i-lucide-key", slot: "sessions" },
-    { label: "Users", value: "users", icon: "i-lucide-users", slot: "users" },
-    { label: "Accounts", value: "accounts", icon: "i-lucide-link", slot: "accounts" }
-  ];
-  const configTab = { label: "Config", value: "config", icon: "i-lucide-settings", slot: "config" };
-  return hasDb.value ? [...dbTabs, configTab] : [configTab];
-});
+const sessions = computed(() => sessionsData.value?.sessions ?? []);
+const users = computed(() => usersData.value?.users ?? []);
+const accounts = computed(() => accountsData.value?.accounts ?? []);
+let noticeTimer;
+function showNotice(message) {
+  notice.value = message;
+  if (noticeTimer)
+    clearTimeout(noticeTimer);
+  noticeTimer = setTimeout(() => notice.value = "", 2200);
+}
 function isExpired(date) {
-  if (!date)
-    return false;
-  return new Date(date) < /* @__PURE__ */ new Date();
+  return date ? new Date(date) < /* @__PURE__ */ new Date() : false;
 }
 function formatDate(date) {
-  if (!date)
-    return "-";
-  return new Date(date).toLocaleString();
+  return date ? new Date(date).toLocaleString() : "-";
 }
-function truncate(str, len = 12) {
+function truncate(str, len = 14) {
   if (!str)
     return "-";
   if (str.length <= len)
     return str;
-  const half = Math.floor((len - 1) / 2);
-  return `${str.slice(0, half)}\u2026${str.slice(-half)}`;
+  const half = Math.floor((len - 3) / 2);
+  return `${str.slice(0, half)}...${str.slice(-half)}`;
+}
+function totalPages(total) {
+  return Math.max(1, Math.ceil((total ?? 0) / pageSize));
+}
+function pageBack(page) {
+  page.value = Math.max(1, page.value - 1);
+}
+function pageNext(page, total) {
+  page.value = Math.min(totalPages(total), page.value + 1);
 }
 async function copyToClipboard(text, label = "Value") {
   try {
     await navigator.clipboard.writeText(text);
-    toast.add({ title: `${label} copied`, icon: "i-lucide-check", color: "success" });
+    showNotice(`${label} copied`);
   } catch {
-    toast.add({ title: "Copy failed", icon: "i-lucide-x", color: "error" });
+    showNotice("Copy failed");
   }
 }
 function generateConfigMarkdown() {
   const config = configData.value?.config;
   if (!config)
     return "";
-  const moduleJson = JSON.stringify(config.module, null, 2);
-  const serverJson = JSON.stringify(config.server, null, 2);
   return `## Module Config (\`nuxt.config.ts\`)
 
 \`\`\`json
-${moduleJson}
+${JSON.stringify(config.module ?? {}, null, 2)}
 \`\`\`
 
 ## Server Config (\`server/auth.config.ts\`)
 
 \`\`\`json
-${serverJson}
+${JSON.stringify(config.server ?? {}, null, 2)}
 \`\`\`
 `;
 }
+function json(value) {
+  return JSON.stringify(value ?? {}, null, 2);
+}
 async function deleteSession(id) {
   try {
-    await $fetch("/api/_better-auth/sessions", { method: "DELETE", body: { id } });
-    toast.add({ title: "Session deleted", icon: "i-lucide-trash-2", color: "success" });
+    const response = await fetch("/api/_better-auth/sessions", {
+      method: "DELETE",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ id })
+    });
+    if (!response.ok)
+      throw new Error("Delete failed");
     deleteConfirm.value = null;
-    refreshSessions();
+    showNotice("Session deleted");
+    await refreshSessions();
   } catch {
-    toast.add({ title: "Failed to delete session", icon: "i-lucide-x", color: "error" });
+    showNotice("Failed to delete session");
   }
 }
-const sessionColumns = [
-  { accessorKey: "id", header: "ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.id)) },
-  {
-    accessorKey: "userId",
-    header: "User",
-    cell: ({ row }) => h("div", { class: "min-w-0" }, [
-      h("p", { class: "font-mono text-sm truncate" }, truncate(row.original.userId)),
-      h("p", { class: "text-sm text-muted-foreground font-mono" }, row.original.ipAddress || "No IP")
-    ])
-  },
-  { accessorKey: "userAgent", header: "User Agent", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground max-w-48 truncate block" }, truncate(row.original.userAgent, 30)) },
-  {
-    accessorKey: "expiresAt",
-    header: "Status",
-    cell: ({ row }) => {
-      const expired = isExpired(row.original.expiresAt);
-      return h(resolveComponent("UBadge"), { color: expired ? "error" : "success", variant: "subtle", size: "sm" }, () => expired ? "Expired" : "Active");
-    }
-  },
-  { accessorKey: "createdAt", header: "Created", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground" }, formatDate(row.original.createdAt)) }
-];
-const userColumns = [
-  { accessorKey: "id", header: "ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.id)) },
-  {
-    accessorKey: "name",
-    header: "User",
-    cell: ({ row }) => h("div", { class: "min-w-0" }, [
-      h("p", { class: "font-medium truncate" }, row.original.name || "Unnamed"),
-      h("p", { class: "text-sm text-muted-foreground font-mono truncate" }, row.original.email)
-    ])
-  },
-  {
-    accessorKey: "emailVerified",
-    header: "Verified",
-    cell: ({ row }) => h(resolveComponent("UBadge"), { color: row.original.emailVerified ? "success" : "neutral", variant: "subtle", size: "sm" }, () => row.original.emailVerified ? "Yes" : "No")
-  },
-  { accessorKey: "createdAt", header: "Created", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground" }, formatDate(row.original.createdAt)) }
-];
-const accountColumns = [
-  { accessorKey: "id", header: "ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.id)) },
-  {
-    accessorKey: "providerId",
-    header: "Provider",
-    cell: ({ row }) => {
-      const provider = row.original.providerId;
-      const iconMap = { github: "i-simple-icons-github", google: "i-simple-icons-google", discord: "i-simple-icons-discord", twitter: "i-simple-icons-x", facebook: "i-simple-icons-facebook" };
-      return h("div", { class: "flex items-center gap-2" }, [
-        h(resolveComponent("UIcon"), { name: iconMap[provider] || "i-lucide-key", class: "size-4" }),
-        h("div", { class: "min-w-0" }, [
-          h("p", { class: "capitalize font-medium" }, provider),
-          h("p", { class: "text-sm text-muted-foreground font-mono truncate" }, truncate(row.original.accountId, 16))
-        ])
-      ]);
-    }
-  },
-  { accessorKey: "userId", header: "User ID", cell: ({ row }) => h("span", { class: "font-mono text-sm" }, truncate(row.original.userId)) },
-  { accessorKey: "createdAt", header: "Created", cell: ({ row }) => h("span", { class: "text-sm text-muted-foreground" }, formatDate(row.original.createdAt)) }
-];
-function getSessionActions(row) {
-  return [
-    [{ label: "Copy ID", icon: "i-lucide-copy", click: () => copyToClipboard(row.id, "Session ID") }],
-    [{ label: "Delete", icon: "i-lucide-trash-2", color: "error", click: () => {
-      deleteConfirm.value = row.id;
-    } }]
-  ];
-}
-function getUserActions(row) {
-  return [
-    [{ label: "Copy ID", icon: "i-lucide-copy", click: () => copyToClipboard(row.id, "User ID") }],
-    [{ label: "Copy Email", icon: "i-lucide-mail", click: () => copyToClipboard(row.email, "Email") }]
-  ];
-}
-function getAccountActions(row) {
-  return [[{ label: "Copy ID", icon: "i-lucide-copy", click: () => copyToClipboard(row.id, "Account ID") }]];
+async function deleteConfirmedSession() {
+  if (deleteConfirm.value)
+    await deleteSession(deleteConfirm.value);
 }
 </script>
 
 <template>
-  <div class="min-h-screen bg-background text-foreground">
-    <!-- Header -->
-    <header class="flex items-center justify-between border-b border-border px-4 py-3">
-      <div class="flex items-center gap-3">
-        <svg width="60" height="45" viewBox="0 0 60 45" fill="none" class="h-4 w-auto" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z" class="fill-current" />
+  <div class="devtools-shell">
+    <header class="devtools-header">
+      <div class="brand">
+        <svg width="60" height="45" viewBox="0 0 60 45" fill="none" class="brand-mark" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z" fill="currentColor" />
         </svg>
-        <span class="font-medium text-sm">Better Auth DevTools</span>
-      </div>
-      <div class="flex items-center">
-        <a href="https://www.better-auth.com/docs" target="_blank" class="header-link border-r border-border">Docs</a>
-        <a href="https://github.com/onmax/nuxt-better-auth" target="_blank" class="header-link">
-          <UIcon name="i-simple-icons-github" class="size-4" />
-        </a>
+        <span>Better Auth DevTools</span>
       </div>
+      <nav class="links">
+        <a href="https://www.better-auth.com/docs" target="_blank" rel="noreferrer">Docs</a>
+        <a href="https://github.com/onmax/nuxt-better-auth" target="_blank" rel="noreferrer">GitHub</a>
+      </nav>
     </header>
 
-    <!-- Tabs -->
-    <UTabs :items="tabs" class="w-full" :ui="{ list: 'border-b border-border rounded-none bg-transparent justify-start', trigger: 'rounded-none data-[state=active]:shadow-none data-[state=active]:bg-[var(--tab-active-bg)] data-[state=active]:text-foreground flex-none text-muted-foreground' }">
-      <!-- Sessions Tab -->
-      <template #sessions>
-        <div class="p-4 space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <UInput v-model="sessionsSearchRaw" placeholder="Search by user ID or IP..." icon="i-lucide-search" class="max-w-xs" />
-            <div class="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
-              <span>{{ sessionsData?.total ?? 0 }} sessions</span>
-              <UButton variant="ghost" size="xs" icon="i-lucide-refresh-cw" @click="() => refreshSessions()" />
-            </div>
-          </div>
-
-          <UAlert v-if="deleteConfirm" title="Delete session?" description="This will invalidate the session immediately." color="error" variant="soft" icon="i-lucide-alert-triangle" :actions="[{ label: 'Cancel', color: 'neutral', variant: 'outline', onClick: () => {
-  deleteConfirm = null;
-} }, { label: 'Delete', color: 'error', onClick: () => deleteSession(deleteConfirm) }]" />
+    <nav class="tabs" aria-label="Devtools sections">
+      <button
+        v-for="tab in tabs"
+        :key="tab"
+        type="button"
+        :class="{ active: activeTab === tab }"
+        @click="activeTab = tab"
+      >
+        {{ tabLabels[tab] }}
+      </button>
+    </nav>
 
-          <p v-if="sessionsData?.error" class="text-destructive text-sm">
-            {{ sessionsData.error }}
-          </p>
+    <p v-if="notice" class="notice">
+      {{ notice }}
+    </p>
 
-          <UTable v-else-if="sessionsData?.sessions?.length" :data="sessionsData.sessions" :columns="sessionColumns" class="rounded-none border border-border">
-            <template #actions="{ row }">
-              <UDropdownMenu :items="getSessionActions(row.original)">
-                <UButton variant="ghost" size="xs" icon="i-lucide-more-horizontal" />
-              </UDropdownMenu>
-            </template>
-          </UTable>
-
-          <p v-else class="text-muted-foreground text-sm py-8 text-center">
-            No sessions found
-          </p>
-
-          <UPagination v-if="(sessionsData?.total ?? 0) > 20" v-model:page="sessionsPage" :total="sessionsData?.total ?? 0" :items-per-page="20" />
-        </div>
-      </template>
-
-      <!-- Users Tab -->
-      <template #users>
-        <div class="p-4 space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <UInput v-model="usersSearchRaw" placeholder="Search by name or email..." icon="i-lucide-search" class="max-w-xs" />
-            <div class="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
-              <span>{{ usersData?.total ?? 0 }} users</span>
-              <UButton variant="ghost" size="xs" icon="i-lucide-refresh-cw" @click="() => refreshUsers()" />
-            </div>
+    <main class="panel">
+      <section v-if="activeTab === 'sessions'" class="section">
+        <div class="toolbar">
+          <input v-model="sessionsSearch" type="search" placeholder="Search by user ID or IP...">
+          <div class="toolbar-meta">
+            <span>{{ sessionsData?.total ?? 0 }} sessions</span>
+            <button type="button" @click="() => refreshSessions()">
+              Refresh
+            </button>
           </div>
+        </div>
 
-          <p v-if="usersData?.error" class="text-destructive text-sm">
-            {{ usersData.error }}
-          </p>
-
-          <UTable v-else-if="usersData?.users?.length" :data="usersData.users" :columns="userColumns" class="rounded-none border border-border">
-            <template #actions="{ row }">
-              <UDropdownMenu :items="getUserActions(row.original)">
-                <UButton variant="ghost" size="xs" icon="i-lucide-more-horizontal" />
-              </UDropdownMenu>
-            </template>
-          </UTable>
+        <div v-if="deleteConfirm" class="confirm">
+          <span>Delete this session?</span>
+          <button type="button" @click="deleteConfirm = null">
+            Cancel
+          </button>
+          <button type="button" class="danger" @click="deleteConfirmedSession">
+            Delete
+          </button>
+        </div>
 
-          <p v-else class="text-muted-foreground text-sm py-8 text-center">
-            No users found
-          </p>
+        <p v-if="sessionsData?.error" class="error">
+          {{ sessionsData.error }}
+        </p>
+        <table v-else-if="sessions.length">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>User</th>
+              <th>User Agent</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="session in sessions" :key="session.id">
+              <td><code>{{ truncate(session.id) }}</code></td>
+              <td>
+                <code>{{ truncate(session.userId) }}</code>
+                <small>{{ session.ipAddress || "No IP" }}</small>
+              </td>
+              <td>{{ truncate(session.userAgent, 32) }}</td>
+              <td>
+                <span class="badge" :class="isExpired(session.expiresAt) ? 'bad' : 'good'">
+                  {{ isExpired(session.expiresAt) ? "Expired" : "Active" }}
+                </span>
+              </td>
+              <td>{{ formatDate(session.createdAt) }}</td>
+              <td class="actions">
+                <button type="button" @click="copyToClipboard(session.id, 'Session ID')">
+                  Copy
+                </button>
+                <button type="button" class="danger" @click="deleteConfirm = session.id">
+                  Delete
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="empty">
+          No sessions found
+        </p>
 
-          <UPagination v-if="(usersData?.total ?? 0) > 20" v-model:page="usersPage" :total="usersData?.total ?? 0" :items-per-page="20" />
+        <div v-if="(sessionsData?.total ?? 0) > pageSize" class="pagination">
+          <button type="button" :disabled="sessionsPage === 1" @click="pageBack(sessionsPage)">
+            Previous
+          </button>
+          <span>Page {{ sessionsPage }} of {{ totalPages(sessionsData?.total) }}</span>
+          <button type="button" :disabled="sessionsPage >= totalPages(sessionsData?.total)" @click="pageNext(sessionsPage, sessionsData?.total)">
+            Next
+          </button>
         </div>
-      </template>
+      </section>
 
-      <!-- Accounts Tab -->
-      <template #accounts>
-        <div class="p-4 space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <UInput v-model="accountsSearchRaw" placeholder="Search by provider..." icon="i-lucide-search" class="max-w-xs" />
-            <div class="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
-              <span>{{ accountsData?.total ?? 0 }} accounts</span>
-              <UButton variant="ghost" size="xs" icon="i-lucide-refresh-cw" @click="() => refreshAccounts()" />
-            </div>
+      <section v-else-if="activeTab === 'users'" class="section">
+        <div class="toolbar">
+          <input v-model="usersSearch" type="search" placeholder="Search by name or email...">
+          <div class="toolbar-meta">
+            <span>{{ usersData?.total ?? 0 }} users</span>
+            <button type="button" @click="() => refreshUsers()">
+              Refresh
+            </button>
           </div>
+        </div>
 
-          <p v-if="accountsData?.error" class="text-destructive text-sm">
-            {{ accountsData.error }}
-          </p>
-
-          <UTable v-else-if="accountsData?.accounts?.length" :data="accountsData.accounts" :columns="accountColumns" class="rounded-none border border-border">
-            <template #actions="{ row }">
-              <UDropdownMenu :items="getAccountActions(row.original)">
-                <UButton variant="ghost" size="xs" icon="i-lucide-more-horizontal" />
-              </UDropdownMenu>
-            </template>
-          </UTable>
-
-          <p v-else class="text-muted-foreground text-sm py-8 text-center">
-            No accounts found
-          </p>
+        <p v-if="usersData?.error" class="error">
+          {{ usersData.error }}
+        </p>
+        <table v-else-if="users.length">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>User</th>
+              <th>Verified</th>
+              <th>Created</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="user in users" :key="user.id">
+              <td><code>{{ truncate(user.id) }}</code></td>
+              <td>
+                <strong>{{ user.name || "Unnamed" }}</strong>
+                <small>{{ user.email }}</small>
+              </td>
+              <td>
+                <span class="badge" :class="user.emailVerified ? 'good' : ''">
+                  {{ user.emailVerified ? "Yes" : "No" }}
+                </span>
+              </td>
+              <td>{{ formatDate(user.createdAt) }}</td>
+              <td class="actions">
+                <button type="button" @click="copyToClipboard(user.id, 'User ID')">
+                  Copy ID
+                </button>
+                <button type="button" @click="copyToClipboard(user.email, 'Email')">
+                  Copy Email
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="empty">
+          No users found
+        </p>
 
-          <UPagination v-if="(accountsData?.total ?? 0) > 20" v-model:page="accountsPage" :total="accountsData?.total ?? 0" :items-per-page="20" />
+        <div v-if="(usersData?.total ?? 0) > pageSize" class="pagination">
+          <button type="button" :disabled="usersPage === 1" @click="pageBack(usersPage)">
+            Previous
+          </button>
+          <span>Page {{ usersPage }} of {{ totalPages(usersData?.total) }}</span>
+          <button type="button" :disabled="usersPage >= totalPages(usersData?.total)" @click="pageNext(usersPage, usersData?.total)">
+            Next
+          </button>
         </div>
-      </template>
+      </section>
 
-      <!-- Config Tab -->
-      <template #config>
-        <div class="p-3 space-y-3">
-          <div class="flex items-center justify-end">
-            <UButton variant="ghost" size="xs" icon="i-lucide-copy" @click="copyToClipboard(generateConfigMarkdown(), 'Config')">
-              Copy
-            </UButton>
+      <section v-else-if="activeTab === 'accounts'" class="section">
+        <div class="toolbar">
+          <input v-model="accountsSearch" type="search" placeholder="Search by provider...">
+          <div class="toolbar-meta">
+            <span>{{ accountsData?.total ?? 0 }} accounts</span>
+            <button type="button" @click="() => refreshAccounts()">
+              Refresh
+            </button>
           </div>
+        </div>
 
-          <p v-if="configData?.error" class="text-destructive text-sm">
-            {{ configData.error }}
-          </p>
-
-          <template v-else-if="configData?.config?.server">
-            <!-- Row 1: Endpoints + Session + Auth Methods -->
-            <div class="grid gap-3 md:grid-cols-3">
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-globe" class="size-4" /><span>Endpoints</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Base URL</span><span class="font-mono">{{ configData.config.server.baseURL || "auto" }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Path</span><span class="font-mono">{{ configData.config.server.basePath }}</span>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-clock" class="size-4" /><span>Session</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Expires</span><span class="font-mono">{{ configData.config.server.session?.expiresIn }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Update</span><span class="font-mono">{{ configData.config.server.session?.updateAge }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Cache</span><UBadge :color="configData.config.server.session?.cookieCache ? 'success' : 'neutral'" variant="subtle" size="sm">
-                    {{ configData.config.server.session?.cookieCache ? "On" : "Off" }}
-                  </UBadge>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-key-round" class="size-4" /><span>Auth</span>
-                </div>
-                <div class="flex flex-wrap gap-1">
-                  <UBadge v-if="configData.config.server.emailAndPassword" variant="subtle" color="success" size="sm">
-                    Email
-                  </UBadge>
-                  <UBadge v-for="provider in configData.config.server.socialProviders" :key="provider" variant="subtle" color="neutral" size="sm" class="capitalize">
-                    {{ provider }}
-                  </UBadge>
-                  <span v-if="!configData.config.server.emailAndPassword && !configData.config.server.socialProviders?.length" class="text-muted-foreground text-sm">None</span>
-                </div>
-              </div>
-            </div>
+        <p v-if="accountsData?.error" class="error">
+          {{ accountsData.error }}
+        </p>
+        <table v-else-if="accounts.length">
+          <thead>
+            <tr>
+              <th>Provider</th>
+              <th>Account</th>
+              <th>User ID</th>
+              <th>Created</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="account in accounts" :key="account.id">
+              <td class="capitalize">
+                {{ account.providerId }}
+              </td>
+              <td><code>{{ truncate(account.accountId, 18) }}</code></td>
+              <td><code>{{ truncate(account.userId) }}</code></td>
+              <td>{{ formatDate(account.createdAt) }}</td>
+              <td class="actions">
+                <button type="button" @click="copyToClipboard(account.id, 'Account ID')">
+                  Copy
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p v-else class="empty">
+          No accounts found
+        </p>
 
-            <!-- Row 2: Security + Module + Plugins -->
-            <div class="grid gap-3 md:grid-cols-3">
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-shield" class="size-4" /><span>Security</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Cookies</span><span class="font-mono">{{ configData.config.server.advanced?.useSecureCookies }}</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">CSRF</span><UBadge :color="configData.config.server.advanced?.disableCSRFCheck ? 'error' : 'success'" variant="subtle" size="sm">
-                    {{ configData.config.server.advanced?.disableCSRFCheck ? "Off" : "On" }}
-                  </UBadge>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">Rate Limit</span><UBadge :color="configData.config.server.rateLimit ? 'success' : 'neutral'" variant="subtle" size="sm">
-                    {{ configData.config.server.rateLimit ? "On" : "Off" }}
-                  </UBadge>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-settings-2" class="size-4" /><span>Module</span>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">DB</span><UBadge :color="configData.config.module?.databaseProvider === 'none' ? 'neutral' : 'success'" variant="subtle" size="sm">
-                    {{ configData.config.module?.databaseProvider === "nuxthub" ? "Hub" : "Off" }}
-                  </UBadge>
-                </div>
-                <div class="config-row">
-                  <span class="config-label">KV</span><UBadge :color="configData.config.module?.hubSecondaryStorage ? 'success' : 'neutral'" variant="subtle" size="sm">
-                    {{ configData.config.module?.hubSecondaryStorage ? configData.config.module.hubSecondaryStorage === "custom" ? "Custom" : "On" : "Off" }}
-                  </UBadge>
-                </div>
-              </div>
-              <div class="config-section">
-                <div class="config-header">
-                  <UIcon name="i-lucide-puzzle" class="size-4" /><span>Plugins</span>
-                </div>
-                <div class="flex flex-wrap gap-1">
-                  <UBadge v-for="plugin in configData.config.server.plugins" :key="plugin" variant="subtle" color="neutral" size="sm">
-                    {{ plugin }}
-                  </UBadge>
-                  <span v-if="!configData.config.server.plugins?.length" class="text-muted-foreground text-sm">None</span>
-                </div>
-              </div>
-            </div>
+        <div v-if="(accountsData?.total ?? 0) > pageSize" class="pagination">
+          <button type="button" :disabled="accountsPage === 1" @click="pageBack(accountsPage)">
+            Previous
+          </button>
+          <span>Page {{ accountsPage }} of {{ totalPages(accountsData?.total) }}</span>
+          <button type="button" :disabled="accountsPage >= totalPages(accountsData?.total)" @click="pageNext(accountsPage, accountsData?.total)">
+            Next
+          </button>
+        </div>
+      </section>
 
-            <!-- Trusted Origins (if any) -->
-            <div v-if="configData.config.server.trustedOrigins?.length" class="config-section">
-              <div class="config-header">
-                <UIcon name="i-lucide-shield-check" class="size-4" /><span>Trusted Origins</span>
-              </div>
-              <div class="flex flex-wrap gap-1">
-                <UBadge v-for="origin in configData.config.server.trustedOrigins" :key="origin" variant="subtle" color="neutral" size="sm" class="font-mono">
-                  {{ origin }}
-                </UBadge>
-              </div>
-            </div>
-          </template>
+      <section v-else class="section config-grid">
+        <div class="toolbar">
+          <span />
+          <button type="button" @click="copyToClipboard(generateConfigMarkdown(), 'Config')">
+            Copy config
+          </button>
         </div>
-      </template>
-    </UTabs>
+
+        <p v-if="configData?.error" class="error">
+          {{ configData.error }}
+        </p>
+        <template v-else>
+          <article>
+            <h2>Module Config</h2>
+            <pre>{{ json(configData?.config?.module) }}</pre>
+          </article>
+          <article>
+            <h2>Server Config</h2>
+            <pre>{{ json(configData?.config?.server) }}</pre>
+          </article>
+        </template>
+      </section>
+    </main>
   </div>
 </template>
 
 <style>
-:root{--background:#fff;--foreground:#0c0a09;--card:#fff;--card-foreground:#0c0a09;--muted-foreground:#78716c;--border:#e7e5e4;--destructive:#ef4444;--tab-active-bg:#eeedec}.dark{--background:#0c0a09;--foreground:#fafaf9;--card:#0c0a09;--card-foreground:#fafaf9;--muted-foreground:#a8a29e;--border:#292524;--destructive:#7f1d1d;--tab-active-bg:#292524}.bg-background{background-color:var(--background)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-destructive{color:var(--destructive)}.border-border{border-color:var(--border)}.header-link{align-items:center;color:var(--muted-foreground);display:flex;font-size:.75rem;padding:.5rem .75rem;position:relative;transition:color .2s}.header-link:hover{color:var(--foreground)}.header-link:after{background:var(--foreground);bottom:0;content:"";height:1px;left:.75rem;position:absolute;right:.75rem;transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}.header-link:hover:after{transform:scaleX(1)}.config-section{border:1px solid var(--border);padding:.5rem}.config-header{color:var(--muted-foreground);font-size:.8125rem;font-weight:500;gap:.375rem;margin-bottom:.375rem}.config-header,.config-row{align-items:center;display:flex}.config-row{font-size:.75rem;justify-content:space-between;padding:.125rem 0}.config-label{color:var(--muted-foreground)}
+:root{--ba-bg:#fff;--ba-fg:#1f1f1f;--ba-muted:#707070;--ba-border:#e5e5e5;--ba-soft:#f7f7f7;--ba-hover:#efefef;--ba-good:#047857;--ba-bad:#b91c1c}.dark{--ba-bg:#111;--ba-fg:#f4f4f5;--ba-muted:#a1a1aa;--ba-border:#2d2d2d;--ba-soft:#191919;--ba-hover:#242424;--ba-good:#34d399;--ba-bad:#f87171}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.devtools-shell{background:var(--ba-bg);color:var(--ba-fg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;min-height:100vh}.devtools-header{border-bottom:1px solid var(--ba-border);gap:16px;justify-content:space-between;min-height:48px;padding:0 16px}.actions,.brand,.confirm,.devtools-header,.links,.pagination,.toolbar,.toolbar-meta{align-items:center;display:flex}.brand{font-weight:600;gap:10px}.brand-mark{height:auto;width:24px}.links a{color:var(--ba-muted);padding:8px 10px;text-decoration:none}.links a:hover{color:var(--ba-fg)}.tabs{border-bottom:1px solid var(--ba-border);display:flex;gap:4px;padding:8px 12px 0}.actions button,.confirm button,.pagination button,.tabs button,.toolbar button{background:transparent;border:1px solid var(--ba-border);color:var(--ba-fg);cursor:pointer;min-height:30px;padding:5px 10px}.tabs button{border-bottom:0}.tabs button.active,button:hover:not(:disabled){background:var(--ba-hover)}button:disabled{color:var(--ba-muted);cursor:default}button.danger{color:var(--ba-bad)}.panel{padding:16px}.section{display:grid;gap:14px}.toolbar{gap:12px;justify-content:space-between}.actions,.confirm,.pagination,.toolbar-meta{gap:8px}input{background:var(--ba-bg);border:1px solid var(--ba-border);color:var(--ba-fg);padding:7px 10px;width:min(340px,100%)}table{border:1px solid var(--ba-border);border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--ba-border);padding:9px 10px;text-align:left;vertical-align:top}th{background:var(--ba-soft);font-weight:500}td small,th{color:var(--ba-muted)}td small{display:block;margin-top:3px}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.badge{background:var(--ba-soft);border:1px solid var(--ba-border);color:var(--ba-muted);display:inline-flex;padding:2px 8px}.badge.good{color:var(--ba-good)}.badge.bad,.error{color:var(--ba-bad)}.confirm,.empty,.notice{background:var(--ba-soft);border:1px solid var(--ba-border);padding:10px 12px}.empty,.notice{color:var(--ba-muted)}.config-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.config-grid .error,.config-grid .toolbar{grid-column:1/-1}article{background:var(--ba-soft);border:1px solid var(--ba-border)}h2{border-bottom:1px solid var(--ba-border);font-size:13px;padding:10px 12px}h2,pre{margin:0}pre{font-size:12px;line-height:1.5;overflow:auto;padding:12px}.capitalize{text-transform:capitalize}@media (max-width:720px){.devtools-header,.toolbar,.toolbar-meta{align-items:stretch;flex-direction:column}.actions,.tabs{flex-wrap:wrap}table{display:block;overflow-x:auto}}
 </style>

package/dist/runtime/composables.d.ts

@@ -1,3 +1,4 @@
+export { runWithSessionRefresh } from './app/composables/runWithSessionRefresh.js';
 export { useAction } from './app/composables/useAction.js';
 export { useAuthAsyncData } from './app/composables/useAuthAsyncData.js';
 export { useAuthClient } from './app/composables/useAuthClient.js';

package/dist/runtime/composables.js

@@ -1,3 +1,4 @@
+export { runWithSessionRefresh } from "./app/composables/runWithSessionRefresh.js";
 export { useAction } from "./app/composables/useAction.js";
 export { useAuthAsyncData } from "./app/composables/useAuthAsyncData.js";
 export { useAuthClient } from "./app/composables/useAuthClient.js";

package/dist/runtime/internal/auth-route-rules.d.ts

@@ -0,0 +1 @@
+export declare function shouldSkipAuthRouteRules(path: string): boolean;

package/dist/runtime/internal/auth-route-rules.js

@@ -0,0 +1,24 @@
+const internalRouteRuleAuthPaths = /* @__PURE__ */ new Set([
+  "/_ipx",
+  "/_nuxt",
+  "/__better-auth-devtools",
+  "/__nuxt_devtools__",
+  "/__nuxt_error",
+  "/__nuxt_vite_node__",
+  "/api/_better-auth",
+  "/api/_nuxt_icon",
+  "/api/auth"
+]);
+const internalRouteRuleAuthPrefixes = [
+  "/_ipx/",
+  "/_nuxt/",
+  "/__nuxt_devtools__/",
+  "/__nuxt_vite_node__/",
+  "/api/_better-auth/",
+  "/api/_nuxt_icon/",
+  "/api/auth/"
+];
+export function shouldSkipAuthRouteRules(path) {
+  const pathname = path.split(/[?#]/, 1)[0] || "/";
+  return internalRouteRuleAuthPaths.has(pathname) || internalRouteRuleAuthPrefixes.some((prefix) => pathname.startsWith(prefix));
+}

package/dist/runtime/server/middleware/route-access.js

@@ -1,12 +1,13 @@
 import { createError, defineEventHandler, getRequestURL } from "h3";
 import { getRouteRules } from "#imports";
+import { shouldSkipAuthRouteRules } from "../../internal/auth-route-rules.js";
 import { matchesUser } from "../../utils/match-user.js";
 import { getUserSession, requireUserSession } from "../utils/session.js";
 export default defineEventHandler(async (event) => {
   const path = getRequestURL(event).pathname;
   if (!path.startsWith("/api/"))
     return;
-  if (path.startsWith("/api/auth/"))
+  if (shouldSkipAuthRouteRules(path))
     return;
   const rules = getRouteRules(event);
   if (!rules.auth)

package/dist/runtime/server/utils/session.d.ts

@@ -2,6 +2,7 @@ import type { H3Event } from 'h3';
 import type { AppSession, AuthSession, RequireSessionOptions } from '#nuxt-better-auth';
 export declare function getRequestSession(event: H3Event): Promise<AppSession | null>;
 export declare function getUserSession(event: H3Event): Promise<AppSession | null>;
+export declare function refreshSessionCookieCache(event: H3Event): Promise<AppSession | null>;
 export declare function setSessionCookie(event: H3Event, token: string): Promise<void>;
 export declare function createSession(event: H3Event, userId: string): Promise<AuthSession>;
 export declare function requireUserSession(event: H3Event, options?: RequireSessionOptions): Promise<AppSession>;

package/dist/runtime/server/utils/session.js

@@ -1,4 +1,4 @@
-import { createError } from "h3";
+import { createError, splitCookiesString } from "h3";
 import { matchesUser } from "../../utils/match-user.js";
 import { serverAuth } from "./auth.js";
 const requestSessionLoadKey = Symbol.for("nuxt-better-auth.requestSessionLoad");
@@ -23,6 +23,14 @@ function loadSession(event) {
   const auth = serverAuth(event);
   return auth.api.getSession({ headers: getRequestHeaders(event) });
 }
+function loadFreshSession(event) {
+  const auth = serverAuth(event);
+  return auth.api.getSession({
+    headers: getRequestHeaders(event),
+    query: { disableCookieCache: true },
+    returnHeaders: true
+  });
+}
 function getServerAuthContext(event) {
   const auth = serverAuth(event);
   return auth.$context;
@@ -108,6 +116,18 @@ function appendCookieHeader(event, header) {
   const responseHeaders = event.response?.headers;
   responseHeaders?.append("set-cookie", header);
 }
+function getSetCookieHeaders(headers) {
+  const getSetCookie = headers.getSetCookie;
+  const cookies = getSetCookie?.call(headers);
+  if (cookies?.length)
+    return cookies.flatMap((cookie) => splitCookiesString(cookie));
+  const header = headers.get("set-cookie");
+  return header ? splitCookiesString(header) : [];
+}
+function appendSetCookieHeaders(event, headers) {
+  for (const header of getSetCookieHeaders(headers))
+    appendCookieHeader(event, header);
+}
 function parseRequestCookies(cookieHeader) {
   const cookies = /* @__PURE__ */ new Map();
   if (!cookieHeader)
@@ -192,6 +212,25 @@ export async function getUserSession(event) {
     return inFlight;
   return loadSession(event);
 }
+export async function refreshSessionCookieCache(event) {
+  const context = getRequestSessionContext(event);
+  const inFlight = context[requestSessionLoadKey];
+  if (inFlight)
+    await inFlight.catch(() => void 0);
+  delete context.requestSession;
+  const load = loadFreshSession(event).then(({ headers, response }) => {
+    appendSetCookieHeaders(event, headers);
+    context.requestSession = response;
+    return response;
+  });
+  context[requestSessionLoadKey] = load;
+  try {
+    return await load;
+  } finally {
+    if (context[requestSessionLoadKey] === load)
+      delete context[requestSessionLoadKey];
+  }
+}
 export async function setSessionCookie(event, token) {
   const context = await getServerAuthContext(event);
   const sessionCookie = await serializeSignedCookie(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onmax/nuxt-better-auth",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "packageManager": "pnpm@11.1.0",
   "description": "Nuxt module for Better Auth integration with NuxtHub, route protection, session management, and role-based access",
   "author": "onmax",
@@ -44,11 +44,13 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
+    "build": "pnpm build:docs",
     "dev": "pnpm dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
     "dev:docs": "nuxi dev docs",
     "build:docs": "nuxi build docs",
+    "deploy": "wrangler deploy",
     "release": "bumpp --push --no-push-all",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -70,7 +72,6 @@
   "dependencies": {
     "@better-auth/cli": "1.5.0-beta.13",
     "@nuxt/kit": "^4.3.1",
-    "@nuxt/ui": "^4.5.0",
     "defu": "^6.1.4",
     "h3": "^1.15.11",
     "jiti": "^2.6.1",
@@ -93,7 +94,7 @@
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "latest",
     "better-auth": "1.5.5",
-    "better-call": "1.3.2",
+    "better-call": "1.3.5",
     "better-sqlite3": "^12.6.2",
     "bumpp": "^11.0.0",
     "changelogen": "^0.6.2",
@@ -113,6 +114,7 @@
     "vitest-package-exports": "^1.2.0",
     "vue": "3.5.29",
     "vue-tsc": "^3.2.7",
+    "wrangler": "4.72.0",
     "yaml": "^2.8.3"
   }
 }