Implement User Authentication UI (Login/Signup) and Backend Integration

.agents/skills/neon-postgres/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: neon-postgres
+description: Guides and best practices for working with Neon Serverless Postgres. Covers getting started, local development with Neon, choosing a connection method, Neon features, authentication (@neondatabase/auth), PostgREST-style data API (@neondatabase/neon-js), Neon CLI, and Neon's Platform API/SDKs. Use for any Neon-related questions.
+---
+
+# Neon Serverless Postgres
+
+Neon is a serverless Postgres platform that separates compute and storage to offer autoscaling, branching, instant restore, and scale-to-zero. It's fully compatible with Postgres and works with any language, framework, or ORM that supports Postgres.
+
+## Neon Documentation
+
+The Neon documentation is the source of truth for all Neon-related information. Always verify claims against the official docs before responding. Neon features and APIs evolve, so prefer fetching current docs over relying on training data.
+
+### Fetching docs as markdown
+
+Any Neon doc page can be fetched as markdown in two ways:
+
+1. **Append `.md` to the URL** (simplest): `https://neon.com/docs/introduction/branching.md`
+2. **Request `text/markdown`** on the standard URL: `curl -H "Accept: text/markdown" https://neon.com/docs/introduction/branching`
+
+Both return the same markdown content. Use whichever method your tools support.
+
+### Finding the right page
+
+The docs index lists every available page with its URL and a short description:
+
+```
+https://neon.com/docs/llms.txt
+```
+
+Common doc URLs are listed in the tables below. If you need a page not listed here, search the [docs index](https://neon.com/docs/llms.txt) — don't guess URLs.
+
+### Common Documentation Paths
+
+| Topic               | URL                                                       |
+| ------------------- | --------------------------------------------------------- |
+| Introduction        | https://neon.com/docs/introduction.md                     |
+| Branching           | https://neon.com/docs/introduction/branching.md           |
+| Autoscaling         | https://neon.com/docs/introduction/autoscaling.md         |
+| Scale to Zero       | https://neon.com/docs/introduction/scale-to-zero.md       |
+| Instant Restore     | https://neon.com/docs/introduction/branch-restore.md      |
+| Read Replicas       | https://neon.com/docs/introduction/read-replicas.md       |
+| Connection Pooling  | https://neon.com/docs/connect/connection-pooling.md       |
+| IP Allow Lists      | https://neon.com/docs/introduction/ip-allow.md            |
+| Neon Auth           | https://neon.com/docs/auth/overview.md                    |
+| Data API            | https://neon.com/docs/data-api/overview.md                |
+| Serverless Driver   | https://neon.com/docs/serverless/serverless-driver.md     |
+| JavaScript SDK      | https://neon.com/docs/reference/javascript-sdk.md         |
+| API Reference       | https://neon.com/docs/reference/api-reference.md          |
+| TypeScript SDK      | https://neon.com/docs/reference/typescript-sdk.md         |
+| Python SDK          | https://neon.com/docs/reference/python-sdk.md             |
+| Neon CLI            | https://neon.com/docs/reference/neon-cli.md               |
+| Logical Replication | https://neon.com/docs/guides/logical-replication-guide.md |
+
+### Framework & Language Guides
+
+| Framework/Language | URL                                       |
+| ------------------ | ----------------------------------------- |
+| Next.js            | https://neon.com/docs/guides/nextjs.md    |
+| Django             | https://neon.com/docs/guides/django.md    |
+| Drizzle ORM        | https://neon.com/docs/guides/drizzle.md   |
+| Prisma             | https://neon.com/docs/guides/prisma.md    |
+| ORMs Guide         | https://neon.com/docs/get-started/orms.md |
+
+### Platform API
+
+For managing Neon resources programmatically (projects, branches, endpoints, databases, roles):
+
+| Method          | Documentation                                                      |
+| --------------- | ------------------------------------------------------------------ |
+| REST API        | https://neon.com/docs/reference/api-reference.md                   |
+| Interactive API | https://api-docs.neon.tech/reference/getting-started-with-neon-api |
+| OpenAPI Spec    | https://neon.com/api_spec/release/v2.json                          |
+| TypeScript SDK  | https://neon.com/docs/reference/typescript-sdk.md                  |
+| Python SDK      | https://neon.com/docs/reference/python-sdk.md                      |
+| CLI             | https://neon.com/docs/reference/neon-cli.md                        |
+
+**Quick cross-reference** (common operations across interfaces):
+
+| Operation          | REST API                       | TypeScript SDK              | Python SDK             |
+| ------------------ | ------------------------------ | --------------------------- | ---------------------- |
+| List projects      | `GET /projects?org_id=...`     | `listProjects({ org_id })`  | `projects(org_id=...)` |
+| Create project     | `POST /projects`               | `createProject({...})`      | `project_create(...)`  |
+| Get connection URI | `GET .../connection_uri`       | `getConnectionUri({...})`   | `connection_uri(...)`  |
+| Create branch      | `POST .../branches`            | `createProjectBranch(...)`  | `branch_create(...)`   |
+| Start endpoint     | `POST .../endpoints/.../start` | `startProjectEndpoint(...)` | `endpoint_start(...)`  |
+
+## Overview of Resources
+
+Reference the appropriate resource file based on the user's needs:
+
+### Core Guides
+
+| Area               | Resource                           | When to Use                                                    |
+| ------------------ | ---------------------------------- | -------------------------------------------------------------- |
+| What is Neon       | `references/what-is-neon.md`       | Understanding Neon concepts, architecture, core resources      |
+| Features           | `references/features.md`           | Branching, autoscaling, scale-to-zero, connection pooling      |
+| Getting Started    | `references/getting-started.md`    | Setting up a project, connection strings, dependencies, schema |
+| Connection Methods | `references/connection-methods.md` | Choosing drivers based on platform and runtime                 |
+| Developer Tools    | `references/devtools.md`           | VSCode extension, MCP server, Neon CLI (`neon init`)           |
+
+### Database Drivers & ORMs
+
+HTTP/WebSocket queries for serverless/edge functions.
+
+| Area              | Resource                        | When to Use                                         |
+| ----------------- | ------------------------------- | --------------------------------------------------- |
+| Serverless Driver | `references/neon-serverless.md` | `@neondatabase/serverless` - HTTP/WebSocket queries |
+| Drizzle ORM       | `references/neon-drizzle.md`    | Drizzle ORM integration with Neon                   |
+
+### Auth & Data API SDKs
+
+Authentication and PostgREST-style data API for Neon.
+
+| Area        | Resource                  | When to Use                                                                                           |
+| ----------- | ------------------------- | ----------------------------------------------------------------------------------------------------- |
+| Neon Auth   | `references/neon-auth.md` | `@neondatabase/auth` or `@neondatabase/neon-js` - Setup, UI components, auth methods, common mistakes |
+| Neon JS SDK | `references/neon-js.md`   | `@neondatabase/neon-js` - Auth + Data API (PostgREST-style queries)                                   |
+
+### Neon Platform API & CLI
+
+Managing Neon resources programmatically via REST API, SDKs, or CLI.
+
+| Area           | Resource                            | When to Use                                      |
+| -------------- | ----------------------------------- | ------------------------------------------------ |
+| REST API       | `references/neon-rest-api.md`       | Direct HTTP calls - auth, endpoints, rate limits |
+| Neon CLI       | `references/neon-cli.md`            | Terminal workflows, scripts, CI/CD pipelines     |
+| TypeScript SDK | `references/neon-typescript-sdk.md` | `@neondatabase/api-client`                       |
+| Python SDK     | `references/neon-python-sdk.md`     | `neon-api` package                               |

.agents/skills/neon-postgres/references/connection-methods.md

@@ -0,0 +1,177 @@
+# Connection Methods
+
+Guide to selecting the optimal connection method for your Neon Postgres database based on deployment platform and runtime environment.
+
+See the [official connection guide](https://neon.com/docs/connect/choose-connection.md) for complete details.
+
+## Decision Tree
+
+Follow this flow to determine the right connection approach:
+
+### 1. What Language Are You Using?
+
+**Not TypeScript/JavaScript** → Use **TCP with connection pooling** from a secure server.
+
+For non-TypeScript languages, connect from a secure backend server using your language's native Postgres driver with connection pooling enabled.
+
+| Language/Framework  | Documentation                                 |
+| ------------------- | --------------------------------------------- |
+| Django (Python)     | https://neon.com/docs/guides/django.md        |
+| SQLAlchemy (Python) | https://neon.com/docs/guides/sqlalchemy.md    |
+| Elixir Ecto         | https://neon.com/docs/guides/elixir-ecto.md   |
+| Laravel (PHP)       | https://neon.com/docs/guides/laravel.md       |
+| Ruby on Rails       | https://neon.com/docs/guides/ruby-on-rails.md |
+| Go                  | https://neon.com/docs/guides/go.md            |
+| Rust                | https://neon.com/docs/guides/rust.md          |
+| Java                | https://neon.com/docs/guides/java.md          |
+
+**TypeScript/JavaScript** → Continue to step 2.
+
+---
+
+### 2. Client-Side App Without Backend?
+
+**Yes** → Use **Neon Data API** via `@neondatabase/neon-js`
+
+This is the only option for client-side apps since browsers cannot make direct TCP connections to Postgres. See `neon-js.md` for setup and the [JavaScript SDK docs](https://neon.com/docs/reference/javascript-sdk.md) for the full reference.
+
+**No** → Continue to step 3.
+
+---
+
+### 3. Long-Running Server? (Railway, Render, traditional VPS)
+
+**Yes** → Use **TCP with connection pooling** via `node-postgres`, `postgres.js`, or `bun:pg`
+
+Long-running servers maintain persistent connections, so standard TCP drivers with pooling are optimal.
+
+**No** → Continue to step 4.
+
+---
+
+### 4. Edge Environment Without TCP Support?
+
+Some edge runtimes don't support TCP connections. Rarely the case anymore.
+
+**Yes** → Continue to step 5 to check transaction requirements.
+
+**No** → Continue to step 6 to check pooling support.
+
+---
+
+### 5. Does Your App Use SQL Transactions?
+
+**Yes** → Use **WebSocket transport** via `@neondatabase/serverless` with `Pool`
+
+WebSocket maintains connection state needed for transactions. See `neon-serverless.md` for setup.
+
+**No** → Use **HTTP transport** via `@neondatabase/serverless`
+
+HTTP is faster for single queries (~3 roundtrips vs ~8 for TCP). See `neon-serverless.md` for setup and the [serverless driver docs](https://neon.com/docs/serverless/serverless-driver.md) for the full reference.
+
+---
+
+### 6. Serverless Environment With Connection Pooling Support?
+
+**Vercel (Fluid Compute)** → Use **TCP with `@vercel/functions`**
+
+Vercel's Fluid compute supports connection pooling. Use `attachDatabasePool` for optimal connection management. See the [Vercel connection methods guide](https://neon.com/docs/guides/vercel-connection-methods.md) for details.
+
+**Cloudflare (with Hyperdrive)** → Use **TCP via Hyperdrive**
+
+Cloudflare Hyperdrive provides connection pooling for Workers. Use `node-postgres` or any native TCP driver.
+
+See the [Cloudflare Hyperdrive guide](https://neon.com/docs/guides/cloudflare-hyperdrive.md) for connecting with Cloudflare Workers and Hyperdrive.
+
+**No pooling support (Netlify, Deno Deploy)** → Use `@neondatabase/serverless`
+
+Fall back to the decision in step 5 based on transaction requirements.
+
+---
+
+## Quick Reference Table
+
+| Platform                | TCP Support | Pooling             | Recommended Driver         |
+| ----------------------- | ----------- | ------------------- | -------------------------- |
+| Vercel (Fluid)          | Yes         | `@vercel/functions` | `pg` (node-postgres)       |
+| Cloudflare (Hyperdrive) | Yes         | Hyperdrive          | `pg` (node-postgres)       |
+| Cloudflare Workers      | No          | No                  | `@neondatabase/serverless` |
+| Netlify Functions       | No          | No                  | `@neondatabase/serverless` |
+| Deno Deploy             | No          | No                  | `@neondatabase/serverless` |
+| Railway / Render        | Yes         | Built-in            | `pg` (node-postgres)       |
+| Client-side (browser)   | No          | N/A                 | `@neondatabase/neon-js`    |
+
+---
+
+## ORM Support
+
+Popular TypeScript/JavaScript ORMs all work with Neon:
+
+| ORM     | Drivers Supported                               | Documentation                           |
+| ------- | ----------------------------------------------- | --------------------------------------- |
+| Drizzle | `pg`, `postgres.js`, `@neondatabase/serverless` | https://neon.com/docs/guides/drizzle.md |
+| Kysely  | `pg`, `postgres.js`, `@neondatabase/serverless` | https://neon.com/docs/guides/kysely.md  |
+| Prisma  | `pg`, `@neondatabase/serverless`                | https://neon.com/docs/guides/prisma.md  |
+| TypeORM | `pg`                                            | https://neon.com/docs/guides/typeorm.md |
+
+All ORMs support both TCP drivers and Neon's serverless driver depending on your platform.
+
+For Drizzle ORM integration with Neon, see `neon-drizzle.md`.
+
+---
+
+## Vercel Fluid + Drizzle Example
+
+Complete database client setup for Vercel with Drizzle ORM and connection pooling. See `neon-drizzle.md` for more examples.
+
+```typescript
+// src/lib/db/client.ts
+import { attachDatabasePool } from "@vercel/functions";
+import { drizzle } from "drizzle-orm/node-postgres";
+import { Pool } from "pg";
+
+import * as schema from "./schema";
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+});
+attachDatabasePool(pool);
+
+export const db = drizzle({ client: pool, schema });
+```
+
+**Why `attachDatabasePool`?**
+
+- First request establishes the TCP connection (~8 roundtrips)
+- Subsequent requests reuse the connection instantly
+- Ensures idle connections close gracefully before function suspension
+- Prevents connection leaks in serverless environments
+
+---
+
+## Gathering Requirements
+
+When helping a user choose their connection method, gather this information:
+
+1. **Deployment platform**: Where will the app run? (Vercel, Cloudflare, Netlify, Railway, browser, etc.)
+2. **Runtime type**: Serverless functions, edge functions, or long-running server?
+3. **Transaction requirements**: Does the app need SQL transactions?
+4. **ORM preference**: Using Drizzle, Kysely, Prisma, or raw SQL?
+
+Then provide:
+
+- The recommended driver/package
+- A working code example for their setup
+- The correct npm install command
+
+---
+
+## Documentation Resources
+
+| Topic                      | URL                                                       |
+| -------------------------- | --------------------------------------------------------- |
+| Choosing Connection Method | https://neon.com/docs/connect/choose-connection.md        |
+| Serverless Driver          | https://neon.com/docs/serverless/serverless-driver.md     |
+| JavaScript SDK             | https://neon.com/docs/reference/javascript-sdk.md         |
+| Connection Pooling         | https://neon.com/docs/connect/connection-pooling.md       |
+| Vercel Connection Methods  | https://neon.com/docs/guides/vercel-connection-methods.md |