create-vexcms 0.1.0-alpha.2 → 0.1.0-alpha.21

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

@@ -11,8 +11,16 @@ import { images, users } from "~/vexcms/collections"
  * Access control (RBAC) for the admin panel and every registered collection.
  *
  * `admin` gets unrestricted access. `user` can read and update only their own
- * profile row and cannot reach the admin panel. Add a resource here whenever
- * you register a new collection in `vex.config.ts`.
+ * profile row, cannot reach the admin panel, and can read `images`. Add a
+ * resource here whenever you register a new collection in `vex.config.ts`.
+ *
+ * `anonRole: user` also covers every unauthenticated public-site request,
+ * including the build-time metadata fetch. `images.read` is what lets the
+ * public site show uploaded media at all: `MediaImage` and
+ * `src/lib/metadata.ts` resolve uploads through the RBAC-gated
+ * `vex/media:getUrl`, so without it anonymous visitors get no images and the
+ * page ships no `og:image`. Narrow it with a `constraints` rule if some media
+ * must stay private; do not remove it.
  *
  * @see https://vexcms.dev/docs/access-control
  */
@@ -32,6 +40,10 @@ export const access = defineAccess({
       adminPanel: {
         access: false,
       },
+      images: {
+        "*": false,
+        read: true,
+      },
       user: {
         "*": false,
         read: {

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

@@ -2,11 +2,25 @@ import { api } from "@convex/_generated/api"
 import { fetchQuery } from "convex/nextjs"
 import { cookies } from "next/headers"
 
+const SESSION_COOKIE = "better-auth.session_token"
+
+/**
+ * Read the Better Auth session token from cookies.
+ *
+ * Better Auth prefixes its cookies with `__Secure-` whenever the resolved
+ * `baseURL` is https. Locally over http the cookie is
+ * `better-auth.session_token`; on a real domain it is
+ * `__Secure-better-auth.session_token`. Reading only the bare name works in
+ * development and silently returns `null` in production — no error, just an
+ * anonymous caller. Check the prefixed name first, as Better Auth's own reader
+ * does.
+ */
 export async function getSessionToken() {
   const cookieStore = await cookies()
-  const sessionTokenCookie = cookieStore.get("better-auth.session_token")?.value
+  const sessionTokenCookie =
+    cookieStore.get(`__Secure-${SESSION_COOKIE}`)?.value ?? cookieStore.get(SESSION_COOKIE)?.value
 
-  if (!sessionTokenCookie) return null
+  if (!sessionTokenCookie) {return null}
 
   // better-auth stores tokens as "<raw_token>.<hmac_signature>" (2 parts, not a JWT)
   // The raw token (first part) is what's indexed in the DB by_token
@@ -24,12 +38,12 @@ export async function getSessionToken() {
 export const getCurrentUser = async () => {
   try {
     const sessionToken = await getSessionToken()
-    if (!sessionToken) return null
+    if (!sessionToken) {return null}
 
     const session = await fetchQuery(api.auth.sessions.getSessionWithUser, {
       sessionToken,
     })
-    if (!session?.user) return null
+    if (!session?.user) {return null}
     return session.user
   } catch (error) {
     console.error("Error getting current user:", error)
@@ -43,12 +57,12 @@ export const getCurrentUser = async () => {
 export async function getSession() {
   try {
     const sessionToken = await getSessionToken()
-    if (!sessionToken) return null
+    if (!sessionToken) {return null}
 
     const session = await fetchQuery(api.auth.sessions.getSessionWithUser, {
       sessionToken,
     })
-    if (!session?.user) return null
+    if (!session?.user) {return null}
     return session
   } catch (error) {
     console.error("[getSession] Error:", error)

package/templates/base-nextjs/src/components/WelcomePage.tsx

@@ -1,25 +1,12 @@
 "use client"
 
+import { api } from "@convex/_generated/api"
 import { useMutation, useQuery } from "convex/react"
 import { usePathname, useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
-import { api } from "@convex/_generated/api"
 import { useSession } from "~/auth/client"
 
-function LoadingSpinner() {
-  return (
-    <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  )
-}
-
 /**
  * Landing UI for a project that has not been bootstrapped yet (no admin user),
  * and the "Go to Admin" / "Sign in" entry point once it has.
@@ -41,33 +28,44 @@ export function WelcomePage() {
   const [promoting, setPromoting] = useState(false)
   const [navigating, setNavigating] = useState(false)
 
-  // Reset navigating state when the user comes back to the home page
-  // (e.g. closing the intercepting auth dialog)
-  useEffect(() => {
-    if (pathname === "/") {
-      setNavigating(false)
-    }
-  }, [pathname])
+  // Reset `navigating` when the user lands back on the home page (e.g. they
+  // dismissed the intercepting auth dialog). Adjusting state during render on
+  // a changed input is the pattern React documents for this; an effect would
+  // paint the stale spinner for a frame first.
+  const [lastPathname, setLastPathname] = useState(pathname)
+  if (lastPathname !== pathname) {
+    setLastPathname(pathname)
+    if (pathname === "/") {setNavigating(false)}
+  }
+
+  // Run-once latch. `promoting` and `navigating` both render, so they stay
+  // state; the guard does not, so it is a ref — that keeps it out of the
+  // dependency array and stops the effect re-running just to re-read it.
+  const promotingRef = useRef(false)
 
-  // If the user is signed in and this is a fresh project, try to promote them
   useEffect(() => {
-    if (session?.user && isBootstrapped === false && !promoting) {
-      setPromoting(true)
-      setNavigating(true)
-      promoteFirstAdmin()
-        .then((result) => {
-          if (result.promoted) {
-            router.push("/admin")
-          } else {
-            setNavigating(false)
-          }
-        })
-        .catch(() => {
-          setPromoting(false)
-          setNavigating(false)
-        })
-    }
-  }, [session, isBootstrapped, promoting, promoteFirstAdmin, router])
+    if (!session?.user || isBootstrapped !== false || promotingRef.current) {return}
+
+    promotingRef.current = true
+    setPromoting(true)
+    setNavigating(true)
+
+    promoteFirstAdmin()
+      .then((result) => {
+        if (result.promoted) {
+          router.push("/admin")
+          return
+        }
+        promotingRef.current = false
+        setPromoting(false)
+        setNavigating(false)
+      })
+      .catch(() => {
+        promotingRef.current = false
+        setPromoting(false)
+        setNavigating(false)
+      })
+  }, [session, isBootstrapped, promoteFirstAdmin, router])
 
   // Treat undefined (query still loading) as not bootstrapped — show the welcome page immediately
   const bootstrapped = isBootstrapped === true
@@ -93,17 +91,17 @@ export function WelcomePage() {
 
       <div className="flex gap-4">
         {session?.user ? (
-          <button onClick={() => handleNavigate("/admin")} disabled={navigating} className={buttonClass}>
+          <button className={buttonClass} disabled={navigating} onClick={() => handleNavigate("/admin")}>
             {navigating && <LoadingSpinner />}
             {navigating ? "Loading..." : "Go to Admin Panel"}
           </button>
         ) : bootstrapped ? (
-          <button onClick={() => handleNavigate("/auth/sign-in")} disabled={navigating} className={buttonClass}>
+          <button className={buttonClass} disabled={navigating} onClick={() => handleNavigate("/auth/sign-in")}>
             {navigating && <LoadingSpinner />}
             {navigating ? "Loading..." : "Sign In"}
           </button>
         ) : (
-          <button onClick={() => handleNavigate("/auth/sign-up")} disabled={navigating} className={buttonClass}>
+          <button className={buttonClass} disabled={navigating} onClick={() => handleNavigate("/auth/sign-up")}>
             {navigating && <LoadingSpinner />}
             {navigating ? "Loading..." : "Create Admin Account"}
           </button>
@@ -114,3 +112,16 @@ export function WelcomePage() {
     </div>
   )
 }
+
+function LoadingSpinner() {
+  return (
+    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/templates/base-nextjs/src/components/component-example.tsx

@@ -59,7 +59,7 @@ export function ComponentExample() {
       </div>
 
       <code className="bg-muted text-muted-foreground rounded-lg px-4 py-2 font-mono text-sm">
-        npx create-vexcms@latest
+        npx create-vexcms@alpha
       </code>
     </div>
   );

package/templates/base-nextjs/src/components/providers/server.tsx

@@ -2,17 +2,25 @@ import { ThemeProvider } from "@vexcms/react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { type PropsWithChildren } from "react";
 
-import { AuthServerProvider } from "./auth";
-import ConvexClientProvider from "./convex";
-
+/**
+ * Server-side provider shell: theme context + the nuqs URL-state adapter.
+ *
+ * `AuthServerProvider` used to wrap `NuqsAdapter` here, putting a `getToken()`
+ * cookie read on every route's render path. It now mounts directly in
+ * `app/(vexcms)/admin/layout.tsx`, the only route group that needs it.
+ *
+ * Deliberately does **not** mount `ConvexClientProvider` — `ClientProviders`
+ * renders it, and `ClientProviders` is nested inside this component, so its
+ * copy is the one that actually reaches `children`. Mounting it here as well
+ * built a second `ConvexReactClient` + `QueryClient` pair on every server
+ * render (`providers/convex.tsx` intentionally creates fresh clients per call
+ * server-side to avoid cross-request leaks) whose only consumer was the
+ * discarded outer subtree.
+ */
 export default function ServerProviders({ children }: PropsWithChildren) {
   return (
     <ThemeProvider defaultTheme="system">
-      <ConvexClientProvider>
-        <AuthServerProvider>
-          <NuqsAdapter>{children}</NuqsAdapter>
-        </AuthServerProvider>
-      </ConvexClientProvider>
+      <NuqsAdapter>{children}</NuqsAdapter>
     </ThemeProvider>
   );
 }

package/templates/base-nextjs/src/vex.config.server.ts

@@ -0,0 +1,30 @@
+import { betterAuthAdapter } from "@vexcms/better-auth"
+import { defineServerConfig } from "@vexcms/core"
+import { convexFileStorage } from "@vexcms/file-storage-convex"
+
+import { authOptions } from "@convex/auth/options"
+
+import vexConfig from "./vex.config"
+
+/**
+ * VexCMS server-only configuration for this project.
+ *
+ * Layers the Better Auth adapter and Convex file storage onto the
+ * client-safe `vexConfig`. You write this file once at scaffold time and
+ * rarely revisit it — day-to-day settings live in `vex.config.ts`.
+ *
+ * @see defineServerConfig in @vexcms/core
+ * @see betterAuthAdapter in @vexcms/better-auth
+ * @see ./vex.config for the client-safe half this layers onto
+ */
+const config = defineServerConfig({
+  config: vexConfig,
+  server: {
+    auth: { adapter: betterAuthAdapter({ config: authOptions }) },
+    storage: {
+      adapters: [convexFileStorage()],
+    },
+  },
+})
+
+export default config

package/templates/base-nextjs/src/vex.config.ts

@@ -1,35 +1,38 @@
-import { betterAuthAdapter } from "@vexcms/better-auth"
+import { betterAuthCollections } from "@vexcms/better-auth/client"
 import { defineConfig } from "@vexcms/core"
-import { convexFileStorage } from "@vexcms/file-storage-convex"
+import { uploadFile } from "@vexcms/file-storage-convex/client"
 
-import { authOptions } from "@convex/auth/options"
+import { authSchema } from "@convex/auth/schema"
 
 import { access } from "~/auth/access"
 import { images, users } from "~/vexcms/collections"
 
 /**
- * VexCMS configuration for this project.
+ * VexCMS client-safe configuration for this project.
  *
- * Registers the admin sidebar layout, the Better Auth adapter, Convex file
- * storage, and every collection. Add collections/globals here as you define
- * them — `vex dev` / `vex generate` derive the Convex schema and TypeScript
- * types from this file.
+ * Registers the admin sidebar layout and every collection, global, and
+ * media collection. Add collections/globals here as you define them —
+ * `vex dev` / `vex generate` derive the Convex schema and TypeScript types
+ * from this file, and the browser imports it directly via
+ * `VexConfigProvider`, so nothing here may reach a server SDK or an
+ * environment variable.
  *
  * @see defineConfig in @vexcms/core
- * @see betterAuthAdapter in @vexcms/better-auth
+ * @see ./vex.config.server for the auth adapter and storage adapter wiring
  */
 const vexConfig = defineConfig({
   access,
+  authCollections: betterAuthCollections(authSchema),
   admin: {
     sidebar: {
       side: "right",
     },
   },
-  authAdapter: betterAuthAdapter({ config: authOptions }),
   storage: {
-    adapters: [convexFileStorage({ mediaCollections: [images] })],
+    clientUploads: { convex: uploadFile },
   },
   collections: [users],
+  mediaCollections: [images],
 })
 
 export default vexConfig

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

@@ -135,6 +135,7 @@ export interface Image extends VexDocument {
   src: string
   width?: number
   height?: number
+  updatedAt?: number
 }
 
 export type CollectionSlug =
@@ -263,7 +264,7 @@ declare module "@vexcms/core" {
       }
       images: {
         text: "filename" | "alt" | "mimeType" | "storageId" | "src"
-        number: "size" | "width" | "height"
+        number: "size" | "width" | "height" | "updatedAt"
         checkbox: "deleted"
       }
     }

package/templates/base-nextjs/src/vexcms/collections/images.ts

@@ -1,4 +1,4 @@
-import { defineMediaCollection } from "@vexcms/file-storage-convex";
+import { defineMediaCollection } from "@vexcms/file-storage-convex/client";
 
 import { TABLE_SLUG_IMAGES } from "~/db/constants";
 

package/templates/base-nextjs/src/vexcms/collections/users.ts

@@ -1,10 +1,11 @@
-import { defineCollection } from "@vexcms/core"
+import { defineCollection, text } from "@vexcms/core"
 
 import { TABLE_SLUG_USERS } from "~/db/constants"
 
 export const users = defineCollection({
   slug: TABLE_SLUG_USERS,
   admin: {
+    useAsTitle: "name",
     icon: "Users",
   },
   labels: {
@@ -12,6 +13,7 @@ export const users = defineCollection({
     plural: "Users",
   },
   fields: {
+    name: text({ label: "Name", required: true }),
     // Add custom user fields here — the auth adapter already contributes
     // name/email/roles/etc. from Better Auth's schema.
   },

package/templates/marketing-site/convex/pages.ts

@@ -1,7 +1,7 @@
 import { v } from "convex/values"
 
 import { TABLE_SLUG_PAGES } from "~/db/constants"
-import { find } from "~/vexcms/api"
+import { find, publishedSlugs as readPublishedSlugs } from "~/vexcms/api"
 
 import { query } from "./_generated/server"
 
@@ -29,3 +29,22 @@ export const getBySlug = query({
     })
   },
 })
+
+/**
+ * Returns `{ slug, createdAt, updatedAt? }` for every page document.
+ *
+ * Consumed by `app/sitemap.ts` and `[slug]/page.tsx`'s `generateStaticParams`.
+ * Access is bypassed for the same reason `getBySlug` bypasses it: both are
+ * read at build time and by anonymous crawlers, neither of which carries a
+ * session.
+ */
+export const publishedSlugs = query({
+  args: {},
+  handler: async (ctx) => {
+    return await readPublishedSlugs({
+      access: { bypass: true },
+      collection: TABLE_SLUG_PAGES,
+      ctx,
+    })
+  },
+})

package/templates/marketing-site/convex/schema.ts

@@ -5,14 +5,14 @@ import { TABLE_SLUG_ACCOUNTS, TABLE_SLUG_USERS } from "~/db/constants"
 
 import {
   apikey,
+  footers,
+  headers,
   images,
   jwks,
-  session,
-  verification,
   pages,
-  headers,
-  footers,
+  session,
   themes,
+  verification,
 } from "./vex.schema"
 
 export default defineSchema({