@onmax/nuxt-better-auth 0.0.1 → 0.0.2-alpha.1

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

@@ -0,0 +1,20 @@
+import type { AuthUser } from '#nuxt-better-auth';
+export interface SignOutOptions {
+    onSuccess?: () => void | Promise<void>;
+}
+export declare function useUserSession(): {
+    client: any;
+    session: any;
+    user: any;
+    loggedIn: any;
+    ready: any;
+    signIn: any;
+    signUp: any;
+    signOut: (options?: SignOutOptions) => Promise<any>;
+    waitForSession: () => Promise<void>;
+    fetchSession: (options?: {
+        headers?: HeadersInit;
+        force?: boolean;
+    }) => Promise<void>;
+    updateUser: (updates: Partial<AuthUser>) => void;
+};

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

@@ -0,0 +1,155 @@
+import { createAppAuthClient } from "#auth/client";
+import { computed, useRequestHeaders, useRequestURL, useRuntimeConfig, useState, watch } from "#imports";
+import { consola } from "consola";
+let _client = null;
+function getClient(baseURL) {
+  if (!_client)
+    _client = createAppAuthClient(baseURL);
+  return _client;
+}
+export function useUserSession() {
+  const runtimeConfig = useRuntimeConfig();
+  const requestURL = useRequestURL();
+  const client = import.meta.client ? getClient(runtimeConfig.public.siteUrl || requestURL.origin) : null;
+  const session = useState("auth:session", () => null);
+  const user = useState("auth:user", () => null);
+  const authReady = useState("auth:ready", () => false);
+  const ready = computed(() => authReady.value);
+  const loggedIn = computed(() => Boolean(session.value && user.value));
+  function clearSession() {
+    session.value = null;
+    user.value = null;
+  }
+  function updateUser(updates) {
+    if (user.value)
+      user.value = { ...user.value, ...updates };
+  }
+  if (import.meta.client && client) {
+    const clientSession = client.useSession();
+    watch(
+      () => clientSession.value,
+      (newSession) => {
+        if (newSession?.data?.session && newSession?.data?.user) {
+          session.value = newSession.data.session;
+          user.value = newSession.data.user;
+        } else if (!newSession?.isPending) {
+          clearSession();
+        }
+        if (!authReady.value && !newSession?.isPending)
+          authReady.value = true;
+      },
+      { immediate: true, deep: true }
+    );
+  }
+  function waitForSession() {
+    return new Promise((resolve) => {
+      if (loggedIn.value) {
+        resolve();
+        return;
+      }
+      const unwatch = watch(loggedIn, (isLoggedIn) => {
+        if (isLoggedIn) {
+          unwatch();
+          resolve();
+        }
+      });
+      setTimeout(() => {
+        unwatch();
+        resolve();
+      }, 5e3);
+    });
+  }
+  function wrapOnSuccess(cb) {
+    return async (ctx) => {
+      await fetchSession({ force: true });
+      await cb(ctx);
+    };
+  }
+  function wrapAuthMethod(method) {
+    return (async (...args) => {
+      const [data, options] = args;
+      if (data?.fetchOptions?.onSuccess) {
+        return method({ ...data, fetchOptions: { ...data.fetchOptions, onSuccess: wrapOnSuccess(data.fetchOptions.onSuccess) } }, options);
+      }
+      if (options?.onSuccess) {
+        return method(data, { ...options, onSuccess: wrapOnSuccess(options.onSuccess) });
+      }
+      return method(data, options);
+    });
+  }
+  const signIn = client?.signIn ? new Proxy(client.signIn, {
+    get(target, prop) {
+      const method = target[prop];
+      if (typeof method !== "function")
+        return method;
+      return wrapAuthMethod((...args) => target[prop](...args));
+    }
+  }) : new Proxy({}, {
+    get: (_, prop) => {
+      throw new Error(`signIn.${String(prop)}() can only be called on client-side`);
+    }
+  });
+  const signUp = client?.signUp ? new Proxy(client.signUp, {
+    get(target, prop) {
+      const method = target[prop];
+      if (typeof method !== "function")
+        return method;
+      return wrapAuthMethod((...args) => target[prop](...args));
+    }
+  }) : new Proxy({}, {
+    get: (_, prop) => {
+      throw new Error(`signUp.${String(prop)}() can only be called on client-side`);
+    }
+  });
+  async function fetchSession(options = {}) {
+    if (import.meta.server) {
+      if (!authReady.value)
+        authReady.value = true;
+      return;
+    }
+    if (client) {
+      try {
+        const headers = options.headers || useRequestHeaders(["cookie"]);
+        const fetchOptions = headers ? { headers } : void 0;
+        const query = options.force ? { disableCookieCache: true } : void 0;
+        const result = await client.getSession({ query }, fetchOptions);
+        const data = result.data;
+        if (data?.session && data?.user) {
+          session.value = data.session;
+          user.value = data.user;
+        } else {
+          clearSession();
+        }
+      } catch (error) {
+        clearSession();
+        if (import.meta.dev)
+          consola.error("Failed to fetch auth session:", error);
+      } finally {
+        if (!authReady.value)
+          authReady.value = true;
+      }
+    }
+  }
+  async function signOut(options) {
+    if (!client)
+      throw new Error("signOut can only be called on client-side");
+    const response = await client.signOut();
+    clearSession();
+    if (options?.onSuccess)
+      await options.onSuccess();
+    return response;
+  }
+  return {
+    client,
+    session,
+    user,
+    loggedIn,
+    ready,
+    signIn,
+    signUp,
+    signOut,
+    waitForSession,
+    fetchSession,
+    updateUser
+  };
+}

package/dist/runtime/app/middleware/auth.global.d.ts

@@ -0,0 +1,13 @@
+import type { AuthMeta } from '../../types.js';
+declare module '#app' {
+    interface PageMeta {
+        auth?: AuthMeta;
+    }
+}
+declare module 'vue-router' {
+    interface RouteMeta {
+        auth?: AuthMeta;
+    }
+}
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,31 @@
+import { createError, defineNuxtRouteMiddleware, getRouteRules, navigateTo, useRequestHeaders, useRuntimeConfig } from "#imports";
+import { matchesUser } from "../../utils/match-user.js";
+export default defineNuxtRouteMiddleware(async (to) => {
+  if (to.meta.auth === void 0) {
+    const rules = await getRouteRules({ path: to.path });
+    if (rules.auth !== void 0)
+      to.meta.auth = rules.auth;
+  }
+  const auth = to.meta.auth;
+  if (auth === void 0 || auth === false)
+    return;
+  const config = useRuntimeConfig().public.auth;
+  const { fetchSession, user, loggedIn, ready } = useUserSession();
+  if (!loggedIn.value && !ready.value) {
+    const headers = import.meta.server ? useRequestHeaders(["cookie"]) : void 0;
+    await fetchSession({ headers });
+  }
+  const mode = typeof auth === "string" ? auth : auth?.only ?? "user";
+  const redirectTo = typeof auth === "object" ? auth.redirectTo : void 0;
+  if (mode === "guest") {
+    if (loggedIn.value)
+      return navigateTo(redirectTo ?? config?.redirects?.guest ?? "/");
+    return;
+  }
+  if (!loggedIn.value)
+    return navigateTo(redirectTo ?? config?.redirects?.login ?? "/login");
+  if (typeof auth === "object" && auth.user) {
+    if (!user.value || !matchesUser(user.value, auth.user))
+      throw createError({ statusCode: 403, statusMessage: "Access denied" });
+  }
+});

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,426 @@
+<script setup>
+import { useDevtoolsClient } from "@nuxt/devtools-kit/iframe-client";
+import { refDebounced } from "@vueuse/core";
+definePageMeta({ layout: false });
+const toast = useToast();
+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) {
+    document.documentElement.classList.toggle("dark", isDark.value);
+  }
+});
+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);
+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 { 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];
+});
+function isExpired(date) {
+  if (!date)
+    return false;
+  return new Date(date) < /* @__PURE__ */ new Date();
+}
+function formatDate(date) {
+  if (!date)
+    return "-";
+  return new Date(date).toLocaleString();
+}
+function truncate(str, len = 12) {
+  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)}`;
+}
+async function copyToClipboard(text, label = "Value") {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast.add({ title: `${label} copied`, icon: "i-lucide-check", color: "success" });
+  } catch {
+    toast.add({ title: "Copy failed", icon: "i-lucide-x", color: "error" });
+  }
+}
+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}
+\`\`\`
+
+## Server Config (\`server/auth.config.ts\`)
+
+\`\`\`json
+${serverJson}
+\`\`\`
+`;
+}
+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" });
+    deleteConfirm.value = null;
+    refreshSessions();
+  } catch {
+    toast.add({ title: "Failed to delete session", icon: "i-lucide-x", color: "error" });
+  }
+}
+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") }]];
+}
+</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" />
+        </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>
+      </div>
+    </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) }]" />
+
+          <p v-if="sessionsData?.error" class="text-destructive text-sm">
+            {{ sessionsData.error }}
+          </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>
+          </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>
+
+          <p v-else class="text-muted-foreground text-sm py-8 text-center">
+            No users found
+          </p>
+
+          <UPagination v-if="(usersData?.total ?? 0) > 20" v-model:page="usersPage" :total="usersData?.total ?? 0" :items-per-page="20" />
+        </div>
+      </template>
+
+      <!-- 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>
+          </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>
+
+          <UPagination v-if="(accountsData?.total ?? 0) > 20" v-model:page="accountsPage" :total="accountsData?.total ?? 0" :items-per-page="20" />
+        </div>
+      </template>
+
+      <!-- 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>
+          </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>
+
+            <!-- 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">Login</span><span class="font-mono">{{ configData.config.module?.redirects?.login }}</span>
+                </div>
+                <div class="config-row">
+                  <span class="config-label">Guest</span><span class="font-mono">{{ configData.config.module?.redirects?.guest }}</span>
+                </div>
+                <div class="config-row">
+                  <span class="config-label">DB</span><UBadge :color="configData.config.module?.useDatabase ? 'success' : 'neutral'" variant="subtle" size="sm">
+                    {{ configData.config.module?.useDatabase ? "Hub" : "Off" }}
+                  </UBadge>
+                </div>
+                <div class="config-row">
+                  <span class="config-label">KV</span><UBadge :color="configData.config.module?.secondaryStorage ? 'success' : 'neutral'" variant="subtle" size="sm">
+                    {{ configData.config.module?.secondaryStorage ? "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>
+
+            <!-- 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>
+        </div>
+      </template>
+    </UTabs>
+  </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)}
+</style>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/plugins/session.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;