codexmachina
registry/nuxt-postgres-clerk-ecommerce

E-commerce store on Nuxt 4, Postgres (Neon) and Clerk

verified 2026-07-15nuxt4.4.8postgres3.4.9@clerk/nuxt2.6.14@neondatabase/serverless1.1.0

Type-checked against the real SDKs, migration applied to a live Postgres (Neon), connection clients load-tested, then tracked for upstream drift and re-verified when it moves. How we verify

request path
Browserrequest
fetch
Nuxt 4routing + proxy
verify
Clerksession
query
Postgres (Neon)pooled

session validation runs in server components and route handlers, not at the edge

What you're getting

Nuxt 4

Nuxt 4 (framework mode) — full-stack Vue SSR: client under app/ (Vite), server under server/ (Nitro), API as server/api/*.post.ts Nitro route handlers.

Postgres (Neon)

Postgres on Neon via Drizzle ORM and the postgres-js driver.

Clerk

Clerk — hosted identity (sign-in UI, sessions, user management) mounted via middleware + provider.

E-commerce store

E-commerce storefront — product catalog with per-SKU variants, guest-compatible carts, and price-snapshotting orders.

Setup

bun add nuxt vue drizzle-orm postgres @clerk/nextjs
DATABASE_URLNeon pooled (-pooler) connection string
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
CLERK_SECRET_KEY
CLERK_WEBHOOK_SECRETsvix secret that verifies Clerk webhook signatures

Apply the schema with bunx drizzle-kit push

Initialization

Database client

server/lib/db.ts
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

// Neon pooled endpoint = PgBouncer transaction mode → prepared statements off.
// ponytail: single module-level client; the serverless runtime + PgBouncer do
// the pooling, so no custom pool/globalThis singleton dance needed.
const client = postgres(process.env.DATABASE_URL!, { prepare: false });

export const db = drizzle({ client });
// Clerk on Nuxt 4 is a Nuxt MODULE: registering "@clerk/nuxt" auto-injects
// <ClerkProvider>, the Vue components (<SignIn/>, <UserButton/>), and a server plugin that
// attaches the Clerk Auth object to event.context.auth — no manual provider wiring.
// ponytail: Clerk is hosted — set NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY (read client-side by the
// module) and NUXT_CLERK_SECRET_KEY (read server-side by clerkMiddleware) in the env; the
// module picks them up automatically, so nothing here references them.
// ponytail: Nuxt provides defineNuxtConfig as a global at runtime; import it explicitly from
// "nuxt/config" so this config type-checks under standalone tsc.
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: ["@clerk/nuxt"],
});
// Clerk route protection as a Nitro server middleware — the Nuxt 4 analog of
// Next's clerkMiddleware proxy + auth.protect(). clerkMiddleware() wraps a handler that runs
// on every request with the Clerk Auth object on event.context.auth; here we guard the SaaS
// app surface and redirect signed-out users to the hosted sign-in.
// ponytail: Nuxt AUTO-IMPORTS the h3 helpers at runtime; we import getRequestURL + sendRedirect
// EXPLICITLY from h3 (Nitro's engine, a nuxt dep) so this type-checks under standalone tsc.
import { clerkMiddleware } from "@clerk/nuxt/server";
import { getRequestURL, sendRedirect, type H3Event } from "h3";

// ponytail: guard the SaaS app surface; widen the prefixes per app-type.
const PROTECTED_PREFIXES = ["/dashboard", "/settings"];

export default clerkMiddleware((event) => {
  // clerkMiddleware injects Clerk's Auth object on event.context.auth (see @clerk/nuxt module).
  const { isAuthenticated } = event.context.auth();
  // ponytail: @clerk/nuxt bundles its OWN h3 copy, so clerkMiddleware types `event` against that
  // copy; re-narrow to the top-level h3 H3Event (the SAME runtime object) so the explicitly
  // imported getRequestURL/sendRedirect type-check standalone — only the compiled d.ts differ.
  const h3Event = event as unknown as H3Event;
  const { pathname } = getRequestURL(h3Event);
  if (!isAuthenticated && PROTECTED_PREFIXES.some((prefix) => pathname.startsWith(prefix))) {
    return sendRedirect(h3Event, "/sign-in", 302);
  }
});

E-commerce schema: product catalog, carts & orders

Product catalog & variants

products (display unit) and product_variants (buyable SKUs carrying price_cents and inventory_qty)

Cart & checkout

carts (nullable user_id for guest shoppers) and cart_items (one row per variant per cart, quantity-bumped on re-add)

Orders & line items

orders (captured totalCents + status walk) and order_items (frozen sku + unitPriceCents snapshot, variantId set-null on delete)

src/db/schema.ts
// === file: server/db/schema.ts ===
import { relations, sql } from "drizzle-orm";
import {
  check,
  index,
  integer,
  pgTable,
  text,
  timestamp,
  unique,
  uuid,
} from "drizzle-orm/pg-core";
// Better Auth owns identity; we only reference its `user` table by id.
import { user } from "./auth-schema";

export type OrderStatus = "pending" | "paid" | "shipped" | "cancelled";

/** Catalog product — the marketing/display unit. Money + stock live on the
 *  variant below, never here, so a product can have many priced SKUs. */
export const products = pgTable(
  "products",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    slug: text("slug").notNull().unique(),
    name: text("name").notNull(),
    description: text("description"),
    createdAt: timestamp("created_at", { withTimezone: true })
      .notNull()
      .defaultNow(),
  },
  (t) => [index("idx_product_slug").on(t.slug)],
);

/** A buyable SKU under a product. Price (integer cents) and inventory live here
 *  because that's what a customer actually adds to a cart and pays for. */
export const productVariants = pgTable(
  "product_variants",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    productId: uuid("product_id")
      .notNull()
      .references(() => products.id, { onDelete: "cascade" }),
    sku: text("sku").notNull().unique(),
    name: text("name").notNull(), // e.g. "Large / Black"
    // Money as integer cents — no float money in the catalog.
    priceCents: integer("price_cents").notNull().default(0),
    inventoryQty: integer("inventory_qty").notNull().default(0),
    createdAt: timestamp("created_at", { withTimezone: true })
      .notNull()
      .defaultNow(),
  },
  (t) => [index("idx_variant_product").on(t.productId)],
);

/** One open cart per shopper. userId is nullable so guests can shop before they
 *  authenticate; on login the app reassigns the guest cart to user.id. */
export const carts = pgTable(
  "carts",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    // Better Auth's user.id is text — match it, don't recast. Nullable: a guest
    // cart has no user yet.
    userId: text("user_id").references(() => user.id, { onDelete: "cascade" }),
    createdAt: timestamp("created_at", { withTimezone: true })
      .notNull()
      .defaultNow(),
  },
  (t) => [index("idx_cart_user").on(t.userId)],
);

/** A variant + quantity in a cart. The composite unique keeps one row per
 *  variant per cart (the app bumps quantity instead of inserting duplicates). */
export const cartItems = pgTable(
  "cart_items",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    cartId: uuid("cart_id")
      .notNull()
      .references(() => carts.id, { onDelete: "cascade" }),
    variantId: uuid("variant_id")
      .notNull()
      .references(() => productVariants.id, { onDelete: "cascade" }),
    quantity: integer("quantity").notNull().default(1),
  },
  (t) => [
    unique("cart_items_cart_variant_unique").on(t.cartId, t.variantId),
    index("idx_cart_item_cart").on(t.cartId),
  ],
);

/** A placed order. totalCents is the captured total at checkout; status walks
 *  the fulfilment states. userId is nullable to allow guest checkout. */
export const orders = pgTable(
  "orders",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    userId: text("user_id").references(() => user.id, { onDelete: "set null" }),
    status: text("status").$type<OrderStatus>().notNull().default("pending"),
    totalCents: integer("total_cents").notNull().default(0),
    // ponytail: opaque payment-provider id (Stripe/etc.) — no provider FK needed.
    providerPaymentId: text("provider_payment_id"),
    createdAt: timestamp("created_at", { withTimezone: true })
      .notNull()
      .defaultNow(),
  },
  (t) => [
    index("idx_order_user").on(t.userId),
    index("idx_order_status").on(t.status),
    check(
      "orders_status_check",
      sql`${t.status} in ('pending','paid','shipped','cancelled')`,
    ),
  ],
);

/** Order line item. Snapshots unitPriceCents (and the SKU string) at purchase
 *  time so re-pricing or deleting a variant never rewrites order history — the
 *  variant FK is set null on delete, the snapshot stays. */
export const orderItems = pgTable(
  "order_items",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    orderId: uuid("order_id")
      .notNull()
      .references(() => orders.id, { onDelete: "cascade" }),
    // Keep the line even if the catalog variant is later removed.
    variantId: uuid("variant_id").references(() => productVariants.id, {
      onDelete: "set null",
    }),
    // Frozen at checkout — the SKU and price as they were when bought.
    sku: text("sku").notNull(),
    unitPriceCents: integer("unit_price_cents").notNull(),
    quantity: integer("quantity").notNull().default(1),
  },
  (t) => [
    // Drives the "line items for this order" lookup.
    index("idx_order_item_order").on(t.orderId),
  ],
);

export const productsRelations = relations(products, ({ many }) => ({
  variants: many(productVariants),
}));

export const productVariantsRelations = relations(
  productVariants,
  ({ one, many }) => ({
    product: one(products, {
      fields: [productVariants.productId],
      references: [products.id],
    }),
    cartItems: many(cartItems),
    orderItems: many(orderItems),
  }),
);

export const cartsRelations = relations(carts, ({ one, many }) => ({
  user: one(user, { fields: [carts.userId], references: [user.id] }),
  items: many(cartItems),
}));

export const cartItemsRelations = relations(cartItems, ({ one }) => ({
  cart: one(carts, { fields: [cartItems.cartId], references: [carts.id] }),
  variant: one(productVariants, {
    fields: [cartItems.variantId],
    references: [productVariants.id],
  }),
}));

export const ordersRelations = relations(orders, ({ one, many }) => ({
  user: one(user, { fields: [orders.userId], references: [user.id] }),
  items: many(orderItems),
}));

export const orderItemsRelations = relations(orderItems, ({ one }) => ({
  order: one(orders, { fields: [orderItems.orderId], references: [orders.id] }),
  variant: one(productVariants, {
    fields: [orderItems.variantId],
    references: [productVariants.id],
  }),
}));

Verified identity sync (Clerk)

Clerk users sync into a local user table idempotently: duplicate, out-of-order, and concurrent webhooks converge to one correct row. Replayed against a live database.
src/db/auth-schema.ts
// === file: server/db/auth-schema.ts ===
import { pgTable, text, timestamp } from "drizzle-orm/pg-core";

// Local mirror of Clerk identity — the FK target app-type schemas reference as user.
// id = Clerk's user id, so existing user_id foreign keys resolve once the sync runs.
// This IS the auth-schema slot for Clerk cells: the SaaS schema's ./auth-schema FK
// target (src/db/auth-schema.ts) resolves here, same slot Better Auth's generated file fills.
export const user = pgTable("user", {
  id: text("id").primaryKey(), // = Clerk user id
  email: text("email"),
  firstName: text("first_name"),
  lastName: text("last_name"),
  imageUrl: text("image_url"),
  updatedAt: timestamp("updated_at", { withTimezone: true }), // staleness key (Clerk updated_at)
  createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
});
import { and, eq, isNull, lt, or } from "drizzle-orm";
import { user } from "~~/server/db/auth-schema";

export type ClerkUserEvent = {
  type: string;
  data: {
    id: string;
    email_addresses?: { email_address: string }[];
    first_name?: string | null;
    last_name?: string | null;
    image_url?: string | null;
    updated_at?: number;
  };
};

// Idempotent + concurrency-safe sync of a Clerk user into the local user table.
// Keyed on id (= Clerk id, the PK); the staleness guard lives in the UPDATE WHERE so
// a late/older event cannot clobber newer state. user.deleted removes the row.
export async function recordClerkEvent(
  // ponytail: loosely typed Drizzle client so the emitted core stays portable.
  db: any,
  event: ClerkUserEvent,
): Promise<{ changed: boolean }> {
  const d = event.data;
  if (event.type === "user.deleted") {
    const deleted = await db.delete(user).where(eq(user.id, d.id)).returning({ id: user.id });
    return { changed: deleted.length > 0 };
  }

  const email = d.email_addresses?.[0]?.email_address ?? null;
  const eventAt = new Date(d.updated_at ?? 0);
  const fields = {
    email,
    firstName: d.first_name ?? null,
    lastName: d.last_name ?? null,
    imageUrl: d.image_url ?? null,
    updatedAt: eventAt,
  };

  const updated = await db
    .update(user)
    .set(fields)
    .where(and(eq(user.id, d.id), or(isNull(user.updatedAt), lt(user.updatedAt, eventAt))))
    .returning({ id: user.id });
  if (updated.length > 0) return { changed: true };

  const [existing] = await db.select({ id: user.id }).from(user).where(eq(user.id, d.id)).limit(1);
  if (existing) return { changed: false };

  const inserted = await db
    .insert(user)
    .values({ id: d.id, ...fields })
    .onConflictDoNothing({ target: user.id })
    .returning({ id: user.id });
  return { changed: inserted.length > 0 };
}
// Clerk identity webhook for Nuxt 4 (Nitro server route). The .post.ts
// suffix binds this handler to POST /api/webhooks/clerk. Clerk webhooks are svix: verify
// the signature, then hand the event to the idempotent recordClerkEvent.
// ponytail: Nuxt AUTO-IMPORTS the h3 helpers at runtime; we import defineEventHandler /
// readRawBody / getHeaders / createError EXPLICITLY from h3 (Nitro's engine, a nuxt dep) so
// this handler type-checks under standalone tsc — the one idiom trade for verifiability.
import { createError, defineEventHandler, getHeaders, readRawBody } from "h3";
import { Webhook } from "svix";
import { db } from "~~/server/lib/db";
import { recordClerkEvent, type ClerkUserEvent } from "~~/server/lib/identity/record";

const USER_EVENTS = new Set(["user.created", "user.updated", "user.deleted"]);

export default defineEventHandler(async (event) => {
  const secret = process.env.CLERK_WEBHOOK_SECRET;
  if (!secret) throw createError({ statusCode: 500, statusMessage: "Server misconfigured" });

  const raw = await readRawBody(event);
  if (!raw) throw createError({ statusCode: 400, statusMessage: "Missing body" });
  // getHeaders → Partial<Record<…, string | undefined>>; svix reads only the svix-* string
  // headers, so widen to the Record<string, string> its verify() signature expects.
  const headers = getHeaders(event) as Record<string, string>;

  let clerkEvent: ClerkUserEvent;
  try {
    clerkEvent = new Webhook(secret).verify(raw, headers) as ClerkUserEvent;
  } catch {
    throw createError({ statusCode: 403, statusMessage: "Invalid signature" });
  }

  if (USER_EVENTS.has(clerkEvent.type)) await recordClerkEvent(db, clerkEvent);
  return { ok: true };
});

Deploy targets

✓ The right DB client for where you deploy: load-tested with concurrent queries against a live database. Edge needs the HTTP driver (no TCP); serverless needs a tiny pool.
src/lib/db.ts
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

// Serverless: one connection per (short-lived) instance; Neon's pooler multiplexes.
export const sql = postgres(process.env.DATABASE_URL!, { prepare: false, max: 1 });
export const db = drizzle(sql);
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

// Long-running process: a real, reused pool. Still prepare:false on the pooled endpoint.
export const sql = postgres(process.env.DATABASE_URL!, { prepare: false, max: 10, idle_timeout: 20 });
export const db = drizzle(sql);
import { neon } from "@neondatabase/serverless";
import { drizzle } from "drizzle-orm/neon-http";

// Edge/Workers have NO TCP sockets, so postgres-js cannot run here. Neon's HTTP
// driver speaks Postgres over fetch — the only client that works on Workers.
export const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql);

Decisions and compatibility

note

Client/server split: the DB client, Drizzle schema, records, and webhooks are server-side (server/). The `@/` alias is the client root (app/); server code reaches shared modules via Nuxt's `~~` rootDir alias (e.g. `~~/server/db/schema`).

note

prepare: false is mandatory — Neon's pooled endpoint is PgBouncer in transaction mode, where server-side prepared statements break across the pool.

note

Drizzle is paired here (not Prisma): Prisma's prepared-statement reliance is incompatible with transaction-mode pooling.

note

Hosted: Clerk owns identity and does NOT create a local `user` table. Store `clerk_user_id` as text without a foreign key, or sync Clerk users into a local table via webhook before relying on FKs to `user`.

note

Money is stored as integer cents on product_variants (price_cents) and snapshotted onto order_items (unit_price_cents) at checkout — repricing or deleting a variant never rewrites order history.

note

cart_items carries a composite unique on (cart_id, variant_id) so the app bumps quantity rather than inserting duplicate rows; orders.status is a text + CHECK column (pending/paid/shipped/cancelled) to avoid ALTER TYPE migrations.

caveat

Clerk is a hosted identity provider and does not create a local `user` table. This schema's foreign keys to `user` assume a local identity table (as Better Auth provides). With Clerk, store `clerk_user_id` as a text column without a foreign key, or sync Clerk users into a local `users` table via webhook before relying on these FKs.