f0:"ExplicitChatIdProvider" f1:I[903690,["$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"$f0"] f2:I[838238,["$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76"],"SWRDataProvider"] f3:T59f5,[V0_FILE]plaintext:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/vercel-marketplace-neon-auth-main/app/favicon-K2dp1YVEs9WHdrGR7EjhIH0Mx26muU.ico" isMerged="true" [V0_FILE]typescriptreact:file="app/account/[path]/page.tsx" isMerged="true" import Link from "next/link"; import { AccountView } from "@neondatabase/auth/react"; import { accountViewPaths } from "@neondatabase/auth/react/ui/server"; import { UserButton } from "@/components/user-button"; export const dynamicParams = false; export function generateStaticParams() { return Object.values(accountViewPaths).map((path) => ({ path })); } export default async function AccountPage({ params, }: { params: Promise<{ path: string }>; }) { const { path } = await params; return (

Home

); } [V0_FILE]typescriptreact:file="app/auth/[path]/page.tsx" isMerged="true" import Link from "next/link"; import { AuthView } from "@neondatabase/auth/react"; export const dynamicParams = false; export default async function AuthPage({ params, }: { params: Promise<{ path: string }>; }) { const { path } = await params; return (

Home

); } [V0_FILE]typescriptreact:file="components/user-button.tsx" isMerged="true" "use client"; import { UserButton as BaseUserButton } from "@neondatabase/auth/react"; export function UserButton() { return ; } [V0_FILE]typescript:file="lib/auth/client.ts" isMerged="true" "use client"; import { createAuthClient } from "@neondatabase/auth/next"; export const authClient = createAuthClient(); [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" const config = { plugins: { "@tailwindcss/postcss": {}, }, }; export default config; [V0_FILE]xml:file="public/arrow.svg" isMerged="true" [V0_FILE]xml:file="public/discord.svg" isMerged="true" [V0_FILE]xml:file="public/docs.svg" isMerged="true" [V0_FILE]xml:file="public/logo-dark.svg" isMerged="true" [V0_FILE]xml:file="public/logo.svg" isMerged="true" [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", "**/*.mts" ], "exclude": ["node_modules"] } [V0_FILE]plaintext:file=".npmrc" isMerged="true" legacy-peer-deps=true [V0_FILE]javascript:file="app/fonts.js" isMerged="true" import { Geist, Geist_Mono } from "next/font/google"; export const geistSans = Geist({ subsets: ["latin"], display: "swap", variable: "--font-geist-sans", }); export const geistMono = Geist_Mono({ subsets: ["latin"], display: "swap", variable: "--font-geist-mono", }); [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from "next"; import "./globals.css"; import { geistSans, geistMono } from "./fonts"; import { authClient } from "@/lib/auth/client"; import { NeonAuthUIProvider } from "@neondatabase/auth/react"; export const metadata: Metadata = { title: "Vercel + Neon", description: "Use Neon with Vercel and Neon Auth", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "@neondatabase/auth/ui/tailwind"; @custom-variant dark (&:is(.dark *)); :root { /* Core colors */ --background: #ffffff; --foreground: #171717; --popover: var(--background); /* Added from shadcn */ --popover-foreground: var(--foreground); /* Added from shadcn */ /* Card */ --card: #ffffff; --card-foreground: #171717; /* Muted */ --muted: #fafafa; --muted-foreground: #61646b; /* Accent (for hover states, etc.) */ --accent: #f5f5f5; --accent-foreground: #171717; /* Secondary */ --secondary: #f5f5f5; --secondary-foreground: #171717; /* Borders and inputs */ --border: #e4e5e7; --input: #e4e5e7; /* Primary (dark buttons) */ --primary: #171717; --primary-foreground: #ffffff; /* Brand (Neon green) */ --brand: #00e599; --brand-hover: #00e5bf; --brand-foreground: #0c0d0d; /* Destructive */ --destructive: #dc2626; --destructive-foreground: #ffffff; /* Ring/focus */ --ring: #00e599; /* Sidebar */ --sidebar: #ffffff; --sidebar-foreground: #171717; --sidebar-accent: #f5f5f5; --sidebar-accent-foreground: #171717; --sidebar-border: #e4e5e7; --sidebar-primary: var(--primary); /* Added from shadcn, preserving user's primary */ --sidebar-primary-foreground: var(--primary-foreground); /* Added from shadcn */ --sidebar-ring: var(--ring); /* Added from shadcn */ /* Shadcn default chart colors (new) */ --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --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); --radius: 0.625rem; /* Added from shadcn */ } /* Dark mode - system preference AND .dark class */ /* The existing media query is replaced by the .dark class as per shadcn defaults, while preserving user-defined dark mode colors. */ .dark { /* Core colors */ --background: #0a0a0a; --foreground: #ededed; --popover: var(--background); /* Added from shadcn */ --popover-foreground: var(--foreground); /* Added from shadcn */ /* Card */ --card: #0a0a0a; --card-foreground: #ededed; /* Muted */ --muted: #141414; --muted-foreground: #94979e; /* Accent */ --accent: #1a1a1a; --accent-foreground: #ededed; /* Secondary */ --secondary: #1a1a1a; --secondary-foreground: #ededed; /* Borders and inputs */ --border: #303236; --input: #303236; /* Primary (light buttons in dark mode) */ --primary: #ededed; --primary-foreground: #0a0a0a; /* Brand (Neon green, remains same as it's a brand color) */ --brand: #00e599; --brand-hover: #00e5bf; --brand-foreground: #0c0d0d; /* Destructive */ --destructive: #ef4444; --destructive-foreground: #ffffff; /* Ring/focus */ --ring: #00e599; /* Sidebar */ --sidebar: #0a0a0a; --sidebar-foreground: #ededed; --sidebar-accent: #1a1a1a; --sidebar-accent-foreground: #ededed; --sidebar-border: #303236; --sidebar-primary: var(--primary); /* Added from shadcn, preserving user's primary */ --sidebar-primary-foreground: var(--primary-foreground); /* Added from shadcn */ --sidebar-ring: var(--ring); /* Added from shadcn */ /* Shadcn default chart colors (new for dark mode) */ --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); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-border: var(--border); --color-input: var(--input); --color-brand: var(--brand); --color-brand-hover: var(--brand-hover); --color-brand-foreground: var(--brand-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-ring: var(--ring); /* Added from shadcn */ --color-popover: var(--popover); /* Added from shadcn */ --color-popover-foreground: var(--popover-foreground); /* Added from shadcn */ --color-chart-1: var(--chart-1); /* Added from shadcn */ --color-chart-2: var(--chart-2); /* Added from shadcn */ --color-chart-3: var(--chart-3); /* Added from shadcn */ --color-chart-4: var(--chart-4); /* Added from shadcn */ --color-chart-5: var(--chart-5); /* Added from shadcn */ --radius-sm: calc(var(--radius) - 4px); /* Added from shadcn */ --radius-md: calc(var(--radius) - 2px); /* Added from shadcn */ --radius-lg: var(--radius); /* Added from shadcn */ --radius-xl: calc(var(--radius) + 4px); /* Added from shadcn */ --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); /* Added from shadcn */ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); /* Added from shadcn */ --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Added from shadcn */ } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Ensure clickable elements have pointer cursor */ button, a, [role="button"], [role="menuitem"], [data-slot="menu-item"] { cursor: pointer; } [V0_FILE]typescript:file="next.config.ts" isMerged="true" import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, }; export default nextConfig; [V0_FILE]typescript:file="lib/db.ts" isMerged="true" /** * Database connection module using pg (PostgreSQL client) * Updated: Force cache invalidation */ import { Pool } from "pg"; const getConnectionString = () => { const url = process.env.DATABASE_URL || ""; if (url.includes("sslmode=verify-full")) { return url; } if (url.includes("sslmode=")) { return url.replace(/sslmode=[^&]+/, "sslmode=verify-full"); } return `${url}${url.includes("?") ? "&" : "?"}sslmode=verify-full`; }; const pool = new Pool({ connectionString: getConnectionString() }); export async function checkDbConnection() { if (!process.env.DATABASE_URL) { return "No DATABASE_URL environment variable"; } try { await pool.query("SELECT version()"); return "Database connected"; } catch (error) { console.error("Error connecting to the database:", error); return "Database not connected"; } } export { pool }; [V0_FILE]json:file="package.json" isMerged="true" { "name": "neon-auth-v0-template", "version": "0.1.1", "private": true, "dependencies": { "@neondatabase/auth": "^0.2.0-beta.1", "pg": "8.18.0", "date-fns": "3.6.0", "react-day-picker": "8.10.1", "next": "16.1.6", "react": "19.2.4", "react-dom": "19.2.4", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.563.0", "tailwind-merge": "3.4.0", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@types/react": "19.2.10", "@types/react-dom": "19.2.3", "@types/node": "25.2.0", "typescript": "5.9.3", "tailwindcss": "4.1.18", "postcss": "8.5.6" } } [V0_FILE]typescript:file="lib/auth/server.ts" isMerged="true" import { createNeonAuth } from "@neondatabase/auth/next/server"; export const auth = createNeonAuth({ baseUrl: process.env.NEON_AUTH_BASE_URL!, cookies: { secret: process.env.NEON_AUTH_COOKIE_SECRET!, }, }); [V0_FILE]typescript:file="app/api/auth/[...path]/route.ts" isMerged="true" import { auth } from "@/lib/auth/server"; export const { GET, POST } = auth.handler(); [V0_FILE]typescript:file="proxy.ts" isMerged="true" import { auth } from "@/lib/auth/server"; export default auth.middleware({ // Redirects unauthenticated users to sign-in page loginUrl: "/auth/sign-in", }); export const config = { matcher: [ // Protected routes requiring authentication "/account/:path*", ], }; [V0_FILE]typescriptreact:file="app/page.tsx" import Image from "next/image"; import Link from "next/link"; import { checkDbConnection } from "@/lib/db"; import { UserButton } from "@/components/user-button"; export default async function Home() { const result = await checkDbConnection(); return (

v0 with Neon Postgres & Neon Auth

A minimal template for building full-stack React applications using Next.js, Vercel, and Neon with Neon Auth.

); }ea:["$","$Lf1",null,{"chatId":"Wn4yRxYYtLk","children":["$","$Lf2",null,{"data":{"@\"active-block\",\"Wn4yRxYYtLk\",":{"id":"b_XGSwHHCSICG","messageId":"cC3h4lcll6TNbTCguWWezXsiwRvFfC33","source":"$f3","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Removing fork button","taskNameComplete":"Removed fork button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Wn4yRxYYtLk\",":true,"/chat/api/snapshots/proxy?blockId=b_XGSwHHCSICG&v=v2":null},"children":"$Lf4"}]}] ef:["$","div",null,{"data-testid":"template-detail-related","className":"w-full flex flex-col gap-9","children":[["$","$L7a",null,{"title":"More from neonpostgres","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lf5","$Lf6","$Lf7"]}]}]}],["$","$L7a",null,{"title":"More Templates Like This","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lf8","$Lf9","$Lfa"]}]}]}]]}]

About

Tags

Share

About

Tags

Share

More from neonpostgres

More Templates Like This

More from neonpostgres

More Templates Like This