create-vexcms 0.0.3

package/templates/base-nextjs/src/components/ui/input-group.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { Button } from "~/components/ui/button"
+import { Input } from "~/components/ui/input"
+import { Textarea } from "~/components/ui/textarea"
+import { cn } from "~/lib/utils"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        className
+      )}
+      data-slot="input-group"
+      role="group"
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    defaultVariants: {
+      align: "inline-start",
+    },
+    variants: {
+      align: {
+        "block-end":
+          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+        "block-start":
+          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "inline-end": "pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last",
+        "inline-start": "pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first",
+      },
+    },
+  }
+)
+
+function InputGroupAddon({
+  align = "inline-start",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      data-align={align}
+      data-slot="input-group-addon"
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      role="group"
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
+  defaultVariants: {
+    size: "xs",
+  },
+  variants: {
+    size: {
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      sm: "",
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+    },
+  },
+})
+
+function InputGroupButton({
+  type = "button",
+  className,
+  size = "xs",
+  variant = "ghost",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "reset" | "submit"
+  }) {
+  return (
+    <Button
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      data-size={size}
+      type={type}
+      variant={variant}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <Input
+      className={cn(
+        "rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1",
+        className
+      )}
+      data-slot="input-group-control"
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      className={cn(
+        "rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none",
+        className
+      )}
+      data-slot="input-group-control"
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+}

package/templates/base-nextjs/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import { Input as InputPrimitive } from "@base-ui/react/input"
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Input({ type, className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      className={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      data-slot="input"
+      type={type}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/templates/base-nextjs/src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      className={cn(
+        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        className
+      )}
+      data-slot="label"
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/templates/base-nextjs/src/components/ui/select.tsx

@@ -0,0 +1,189 @@
+"use client"
+
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+function SelectContent({
+  align = "center",
+  alignItemWithTrigger = true,
+  alignOffset = 0,
+  children,
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: Pick<
+  SelectPrimitive.Positioner.Props,
+  "align" | "alignItemWithTrigger" | "alignOffset" | "side" | "sideOffset"
+> &
+  SelectPrimitive.Popup.Props) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        alignOffset={alignOffset}
+        className="isolate z-50"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <SelectPrimitive.Popup
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto",
+            className
+          )}
+          data-slot="select-content"
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      className={cn("scroll-my-1 p-1", className)}
+      data-slot="select-group"
+      {...props}
+    />
+  )
+}
+
+function SelectItem({ children, className, ...props }: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      data-slot="select-item"
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      data-slot="select-label"
+      {...props}
+    />
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+        className
+      )}
+      data-slot="select-scroll-down-button"
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+        className
+      )}
+      data-slot="select-scroll-up-button"
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
+      data-slot="select-separator"
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  children,
+  className,
+  size = "default",
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      data-size={size}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />}
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      className={cn("flex flex-1 text-left", className)}
+      data-slot="select-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/templates/base-nextjs/src/components/ui/separator.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "~/lib/utils"
+
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        className
+      )}
+      data-slot="separator"
+      orientation={orientation}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/templates/base-nextjs/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      className={cn(
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      data-slot="textarea"
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/templates/base-nextjs/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { type ComponentPropsWithRef } from "react"
+
+import { Button } from "~/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu"
+
+export function ThemeToggle({ ...divProps }: ComponentPropsWithRef<"div">) {
+  const { resolvedTheme, setTheme, theme } = useTheme()
+
+  return (
+    <div {...divProps}>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button size="icon" variant="outline" />}
+          suppressHydrationWarning
+        >
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem
+            checked={Boolean(theme && theme === "light")}
+            disabled={Boolean(theme && theme === "light")}
+            onCheckedChange={(val) => {
+              if (val) {
+                setTheme("light")
+              }
+            }}
+          >
+            Light
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={Boolean(theme && theme === "dark")}
+            disabled={Boolean(theme && theme === "dark")}
+            onCheckedChange={(val) => {
+              if (val) {
+                setTheme("dark")
+              }
+            }}
+          >
+            Dark
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={Boolean(theme && theme === "system")}
+            disabled={Boolean(theme && theme === "system")}
+            onCheckedChange={(val) => {
+              if (val) {
+                setTheme("system")
+              }
+            }}
+          >
+            System
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/templates/base-nextjs/src/db/constants/auth.ts

@@ -0,0 +1,8 @@
+export const USER_ROLES = {
+  admin: "admin",
+  user: "user",
+  editor: "editor",
+  member: "member",
+  author: "author",
+} as const
+export type UserRole = (typeof USER_ROLES)[keyof typeof USER_ROLES]

package/templates/base-nextjs/src/db/constants/index.ts

@@ -0,0 +1,44 @@
+export * from "./auth"
+
+// Better Auth
+export const TABLE_SLUG_USERS = "user" as const
+export const TABLE_SLUG_ACCOUNTS = "account" as const
+export const TABLE_SLUG_SESSIONS = "session" as const
+export const TABLE_SLUG_VERIFICATIONS = "verification" as const
+export const TABLE_SLUG_JWKS = "jwks" as const
+
+export const TABLE_SLUG_MEDIA = "media" as const
+
+export const AUTH_PROVIDERS = {
+  apple: "apple",
+  atlassian: "atlassian",
+  cognito: "cognito",
+  discord: "discord",
+  dropbox: "dropbox",
+  facebook: "facebook",
+  figma: "figma",
+  github: "github",
+  gitlab: "gitlab",
+  google: "google",
+  huggingface: "huggingface",
+  kakao: "kakao",
+  kick: "kick",
+  line: "line",
+  linear: "linear",
+  linkedin: "linkedin",
+  microsoft: "microsoft",
+  naver: "naver",
+  notion: "notion",
+  paypal: "paypal",
+  reddit: "reddit",
+  roblox: "roblox",
+  salesforce: "salesforce",
+  slack: "slack",
+  spotify: "spotify",
+  tiktok: "tiktok",
+  twitch: "twitch",
+  twitter: "twitter",
+  vk: "vk",
+  zoom: "zoom",
+} as const
+export type AuthProvider = (typeof AUTH_PROVIDERS)[keyof typeof AUTH_PROVIDERS]

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

@@ -0,0 +1,6 @@
+import { type Doc, type Id } from "@convex/_generated/dataModel"
+
+import { type TABLE_SLUG_USERS } from "./constants"
+
+export type User = Doc<typeof TABLE_SLUG_USERS>
+export type UserID = Id<typeof TABLE_SLUG_USERS>

package/templates/base-nextjs/src/env.mjs

@@ -0,0 +1,48 @@
+import { createEnv } from "@t3-oss/env-nextjs"
+import { z } from "zod"
+
+export const env = createEnv({
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    NEXT_PUBLIC_CONVEX_SITE_URL: z.string(),
+    NEXT_PUBLIC_CONVEX_URL: z.string(),
+    NEXT_PUBLIC_SITE_URL: z.string(),
+  },
+
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
+    // {{OAUTH_ENV_RUNTIME_MAPPING}}
+    NEXT_PUBLIC_CONVEX_SITE_URL: process.env.NEXT_PUBLIC_CONVEX_SITE_URL,
+    NEXT_PUBLIC_CONVEX_URL: process.env.NEXT_PUBLIC_CONVEX_URL,
+    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+    NODE_ENV: process.env.NODE_ENV,
+  },
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    BETTER_AUTH_SECRET: z.string(),
+    // {{OAUTH_ENV_SERVER_SCHEMA}}
+    NODE_ENV: z.enum(["development", "test", "production"]),
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+})

package/templates/base-nextjs/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/base-nextjs/src/proxy.ts

@@ -0,0 +1,23 @@
+import { cookies } from "next/headers"
+import { type NextRequest, NextResponse } from "next/server"
+
+export async function proxy(request: NextRequest) {
+  if (request.nextUrl.pathname === "/") {
+    return NextResponse.next()
+  }
+
+  const cookieStore = await cookies()
+  const sessionToken = cookieStore.get("better-auth.session_token")
+
+  if (!sessionToken) {
+    return NextResponse.redirect(new URL("/auth/sign-in", request.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: [
+    "/((?!api|_next/static|_next/image|favicon.ico|models/*|staging/*|auth/sign-in|auth/sign-up|$).*)",
+  ],
+}

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

@@ -0,0 +1,28 @@
+import { defineAccess } from "@vexcms/core"
+
+import { TABLE_SLUG_USERS, USER_ROLES } from "~/db/constants"
+import { users } from "~/vexcms/collections"
+
+export const access = defineAccess({
+  permissions: {
+    admin: {
+      // Admins have full access to all resources
+      user: true,
+    },
+    user: {
+      [TABLE_SLUG_USERS]: {
+        create: false,
+        delete: false,
+        read: ({ data: targetUser, user }) => {
+          return targetUser._id === user._id
+        },
+        update: ({ data: targetUser, user }) => {
+          return targetUser._id === user._id
+        },
+      },
+    },
+  },
+  resources: [users],
+  roles: [USER_ROLES.user, USER_ROLES.admin],
+  userCollection: users,
+})

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

@@ -0,0 +1,4 @@
+import { betterAuthOptions } from "@convex/auth/options"
+import { vexBetterAuth } from "@vexcms/better-auth"
+
+export const auth = vexBetterAuth({ config: betterAuthOptions })

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

@@ -0,0 +1 @@
+// Add your collection exports here

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

@@ -0,0 +1,15 @@
+import { defineMediaCollection } from "@vexcms/core"
+
+import { TABLE_SLUG_MEDIA } from "~/db/constants"
+
+export const media = defineMediaCollection({
+  slug: TABLE_SLUG_MEDIA,
+  admin: {
+    group: "Media",
+    useAsTitle: "filename",
+  },
+  labels: {
+    plural: "Media",
+    singular: "Media",
+  },
+})