create-vexcms 0.0.3

package/templates/base-nextjs/src/app/admin/layout.tsx

@@ -0,0 +1,33 @@
+import { SidebarTrigger } from "@vexcms/ui"
+import { sanitizeConfigForClient } from "@vexcms/core"
+
+import config from "~/../vex.config"
+import { getCurrentUser } from "~/auth/serverUtils"
+import { AdminLayoutWrapper } from "./AdminLayoutWrapper"
+
+const clientConfig = sanitizeConfigForClient(config)
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const user = await getCurrentUser()
+
+  const permissionUser = user
+    ? {
+        id: user.id,
+        roles: Array.isArray(user.role) ? user.role : [user.role].filter(Boolean),
+        name: user.name,
+        email: user.email,
+        avatar: user.image,
+      }
+    : undefined
+
+  return (
+    <AdminLayoutWrapper
+      config={clientConfig}
+      user={user ? { name: user.name, avatar: user.image, email: user.email } : undefined}
+      permissionUser={permissionUser}
+    >
+      <SidebarTrigger />
+      <div className="flex flex-col flex-1 min-h-0 overflow-hidden">{children}</div>
+    </AdminLayoutWrapper>
+  )
+}

package/templates/base-nextjs/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,6 @@
+import { handler } from "~/auth/server"
+
+export const dynamic = "force-dynamic"
+export const runtime = "nodejs"
+
+export const { GET, POST } = handler

package/templates/base-nextjs/src/app/globals.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@source "../../node_modules/@vexcms/ui/dist/**/*.js";
+@source "../../node_modules/@vexcms/admin-next/dist/**/*.js";
+@source "../../node_modules/@vexcms/admin-next/src/**/*.tsx";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0.004 240);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.004 240);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.004 240);
+  --primary: oklch(0.205 0.003 240);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.965 0.002 240);
+  --secondary-foreground: oklch(0.205 0.003 240);
+  --muted: oklch(0.965 0.002 240);
+  --muted-foreground: oklch(0.556 0.002 240);
+  --accent: oklch(0.965 0.002 240);
+  --accent-foreground: oklch(0.205 0.003 240);
+  --destructive: oklch(0.577 0.184 27.3);
+  --border: oklch(0.922 0.003 240);
+  --input: oklch(0.922 0.003 240);
+  --ring: oklch(0.708 0.003 240);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.714);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0.004 240);
+  --sidebar-primary: oklch(0.205 0.003 240);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.965 0.002 240);
+  --sidebar-accent-foreground: oklch(0.205 0.003 240);
+  --sidebar-border: oklch(0.922 0.003 240);
+  --sidebar-ring: oklch(0.708 0.003 240);
+}
+
+.dark {
+  --background: oklch(0.145 0.004 240);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0.004 240);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0.004 240);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0.003 240);
+  --secondary: oklch(0.269 0.006 240);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0.006 240);
+  --muted-foreground: oklch(0.708 0.003 240);
+  --accent: oklch(0.269 0.006 240);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.768);
+  --border: oklch(0.269 0.006 240);
+  --input: oklch(0.269 0.006 240);
+  --ring: oklch(0.439 0.003 240);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0.003 240);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0.006 240);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0.006 240);
+  --sidebar-ring: oklch(0.439 0.003 240);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/base-nextjs/src/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next"
+import { Geist, Geist_Mono, Inter } from "next/font/google"
+
+import ClientProviders from "~/components/providers/client"
+import ServerProviders from "~/components/providers/server"
+
+import "./globals.css"
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
+const geistSans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" })
+const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })
+
+export const metadata: Metadata = {
+  description: "Test application for Vex CMS development",
+  title: "Vex CMS Test App",
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${geistSans.variable} ${geistMono.variable}`}>
+      <body className="antialiased">
+        <ServerProviders>
+          <ClientProviders>
+            {children}
+          </ClientProviders>
+        </ServerProviders>
+      </body>
+    </html>
+  )
+}

package/templates/base-nextjs/src/auth/client.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react"
+
+import { convexClient } from "@convex-dev/better-auth/client/plugins"
+import { AuthUIProvider } from "@daveyplate/better-auth-ui"
+import { adminClient, apiKeyClient } from "better-auth/client/plugins"
+import { createAuthClient } from "better-auth/react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+
+import { env } from "~/env.mjs"
+
+export const authClient = createAuthClient({
+  basePath: "/api/auth",
+  baseURL: env.NEXT_PUBLIC_SITE_URL,
+  plugins: [adminClient(), apiKeyClient(), convexClient()],
+})
+
+export const { signIn, signOut, useSession } = authClient
+
+// copied from code example, unsure if this is actually useful or not
+// eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/no-empty-function
+authClient.$store.listen("$sessionSignal", async () => { })
+
+export default function BetterAuthClientProvider({ children }: { children: ReactNode }) {
+  const router = useRouter()
+  return (
+    <AuthUIProvider
+      authClient={authClient}
+      /* {{EMAIL_PASSWORD_CREDENTIALS}} */
+      // {{OAUTH_UI_PROVIDERS}}
+      Link={Link}
+      navigate={router.push}
+      onSessionChange={() => {
+        router.refresh()
+      }}
+      replace={router.replace}
+    >
+      {children}
+    </AuthUIProvider>
+  )
+}

package/templates/base-nextjs/src/auth/permissions.ts

@@ -0,0 +1,102 @@
+import type { User } from "~/db/types"
+
+import { TABLE_SLUG_USERS, USER_ROLES, type UserRole } from "~/db/constants"
+
+export const AUTH_ACTIONS = {
+  create: "create",
+  delete: "delete",
+  read: "read",
+  update: "update",
+} as const
+export type AuthAction = (typeof AUTH_ACTIONS)[keyof typeof AUTH_ACTIONS]
+
+export const RESOURCES = {
+  users: TABLE_SLUG_USERS,
+} as const
+export type Permissions = {
+  [TABLE_SLUG_USERS]: {
+    action: AuthAction
+    dataType: User
+  }
+}
+
+export type Resource = (typeof RESOURCES)[keyof typeof RESOURCES]
+
+export type RolesWithPermissions = Record<
+  UserRole,
+  Partial<{
+    [Key in keyof Permissions]: Partial<Record<Permissions[Key]["action"], PermissionCheck<Key>>>
+  }>
+>
+
+type PermissionCheck<Key extends keyof Permissions> =
+  | (({ data, user }: { data: Permissions[Key]["dataType"]; user: User }) => boolean)
+  | boolean
+
+// type PermissionDataTypeExcluding<K extends keyof Permissions> = Permissions[Exclude<keyof Permissions, K>]["dataType"];
+// usage: T extends PermissionDataTypeExcluding<"orgs" | "users">
+
+const ROLES = {
+  [USER_ROLES.admin]: {
+    [TABLE_SLUG_USERS]: {
+      create: true,
+      delete: true,
+      read: true,
+      update: true,
+    },
+  },
+  [USER_ROLES.editor]: {
+    [TABLE_SLUG_USERS]: {
+      read: true,
+    },
+  },
+  [USER_ROLES.author]: {
+    [TABLE_SLUG_USERS]: {
+      read: ({ data: targetUser, user }) => user._id === targetUser._id,
+      update: ({ data: targetUser, user }) => user._id === targetUser._id,
+    },
+  },
+  [USER_ROLES.member]: {
+    [TABLE_SLUG_USERS]: {
+      read: ({ data: targetUser, user }) => user._id === targetUser._id,
+    },
+  },
+  [USER_ROLES.user]: {
+    [TABLE_SLUG_USERS]: {
+      create: false,
+      delete: ({ data: targetUser, user }) => user._id === targetUser._id,
+      read: ({ data: targetUser, user }) => user._id === targetUser._id,
+      update: ({ data: targetUser, user }) => user._id === targetUser._id,
+    },
+  },
+} as const satisfies RolesWithPermissions
+
+export function hasPermission<Resource extends keyof Permissions>({
+  action,
+  data,
+  resource,
+  user,
+}: {
+  action: Permissions[Resource]["action"]
+  data?: Permissions[Resource]["dataType"]
+  resource: Resource
+  user?: null | User
+}): boolean {
+  if (!user?.role) {
+    return false
+  }
+
+  return user.role.some((role) => {
+    const permission = (ROLES as RolesWithPermissions)[role as UserRole][resource]?.[action]
+
+    if (!permission) {
+      return false
+    }
+
+    if (typeof permission === "boolean") {
+      return permission
+    }
+
+    return data != null && permission({ data, user })
+  })
+}

package/templates/base-nextjs/src/auth/server.ts

@@ -0,0 +1,16 @@
+import { convexBetterAuthNextJs } from "@convex-dev/better-auth/nextjs"
+
+import { env } from "~/env.mjs"
+
+export const {
+  fetchAuthAction,
+  fetchAuthMutation,
+  fetchAuthQuery,
+  getToken,
+  handler,
+  isAuthenticated,
+  preloadAuthQuery,
+} = convexBetterAuthNextJs({
+  convexSiteUrl: env.NEXT_PUBLIC_CONVEX_SITE_URL,
+  convexUrl: env.NEXT_PUBLIC_CONVEX_URL,
+})

package/templates/base-nextjs/src/auth/serverUtils.ts

@@ -0,0 +1,64 @@
+import { api } from "@convex/_generated/api"
+import { fetchQuery } from "convex/nextjs"
+import { cookies } from "next/headers"
+
+export async function getSessionToken() {
+  const cookieStore = await cookies()
+  const sessionToken = cookieStore.get("better-auth.session_token")?.value.split(".")[0]
+  if (!sessionToken) {
+    console.error("Error getting session token")
+    return null
+  }
+  return sessionToken
+}
+
+/**
+ * Get current user session in Next.js server components/actions
+ * Validates the Better Auth session token from cookies and fetches user data
+ */
+export const getCurrentUser = async () => {
+  try {
+    const sessionToken = await getSessionToken()
+
+    if (!sessionToken) {
+      return null
+    }
+
+    const session = await fetchQuery(api.auth.sessions.getSessionWithUser, {
+      sessionToken,
+    })
+    if (!session?.user) {
+      return null
+    }
+    return session.user
+  } catch (error) {
+    console.error("Error getting current user:", error)
+    return null
+  }
+}
+
+/**
+ * Get full session (user + session data) in Next.js server components/actions
+ */
+export async function getSession() {
+  try {
+    const sessionToken = await getSessionToken()
+
+    if (!sessionToken) {
+      console.log("no session token")
+      return null
+    }
+
+    const session = await fetchQuery(api.auth.sessions.getSessionWithUser, {
+      sessionToken,
+    })
+    if (!session?.user) {
+      console.log("no session")
+      return null
+    }
+    return session
+  } catch (error) {
+    console.error("Error getting session:", error)
+    return null
+  }
+}

package/templates/base-nextjs/src/auth/types.ts

@@ -0,0 +1,3 @@
+import type { getSession } from "./serverUtils"
+
+export type ServerAuthContext = Awaited<ReturnType<typeof getSession>>