npm - @sansavision/create-pulse - Versions diffs - 0.4.1 → 0.4.2 - Mend

@sansavision/create-pulse 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md CHANGED Viewed

@@ -26,18 +26,37 @@ npx @sansavision/create-pulse my-pulse-app
 When you run `create-pulse`, you'll be prompted to select a template.
-### 1. Watch Together (React + TS)
+### 1. Next.js + Auth (Full Demo) ⭐
+An **investor-ready** demo application showcasing the full capabilities of Pulse.
+- **Better Auth** with email/password, local SQLite + Drizzle ORM
+- **Webhook auth** — Pulse relay verifies tokens via your Next.js API
+- 5 comprehensive demos: Real-time Chat, Watch Together, Durable Queues (with offline simulation), Game State Sync, E2E Encrypted Chat
+- Multi-user testing with separate browser tabs/incognito windows
+- Built with **Next.js 16**, **React 19**, **Tailwind CSS v4**, **TypeScript**
+### 2. Watch Together (React + TS)
 A clean implementation of the "Watch Together" synchronized video player.
 - Features a custom `usePulse` hook for lifecycle management.
 - Handles syncing `play`, `pause`, and `seek` events across clients natively via the Pulse Relay.
 - Built with React, Vite, Tailwind CSS, and TypeScript.
-### 2. All Features (React + TS)
+### 3. All Features (React + TS)
 A kitchen-sink boilerplate that integrates multiple features.
 - Perfect for exploring the SDK limits.
 - Contains stubs and route setups for Chat, Metrics, and Video sync.
 - Built with React, Vite, Tailwind CSS, and TypeScript.
+### 4. Durable Queues (React + TS)
+Demonstrates persistent message queues with publish/consume/ack workflows.
+- Supports multiple storage backends (Memory, WAL, Postgres, Redis).
+- Shows offline resilience and message recovery.
+- Built with React, Vite, Tailwind CSS, and TypeScript.
+### 5. Vanilla JS (Basic)
+A minimal setup with zero frameworks.
+- Raw WebSocket connection to the Pulse Relay.
+- Good for understanding the protocol at a low level.
 ## Running Your Scaffolded App
 After your app is generated:
@@ -55,4 +74,9 @@ After your app is generated:
    npm run dev
    ```
-**Note:** The templates are configured by default to connect to a local Pulse Relay running at `ws://localhost:4001`. Ensure your local Rust relay is running, or update `src/App.tsx` to point to a production relay URL.
+**Note:** The templates are configured by default to connect to a local Pulse Relay running at `ws://localhost:4001`. Start the server with `pulse serve` (or `pulse dev` for the full dev environment), or update your config to point to a production relay URL.
+For the **Next.js + Auth** template, also start the relay with webhook auth:
+```bash
+npx @sansavision/pulse-cli serve --auth-mode webhook --auth-webhook http://localhost:3000/api/pulse/verify
+```

package/dist/index.js CHANGED Viewed

@@ -51,6 +51,7 @@ async function main() {
         return p.select({
           message: "Pick a template:",
           options: [
+            { value: "nextjs-auth-demo", label: "Next.js + Auth (Full Demo)", hint: "Better Auth, all features, investor-ready" },
             { value: "react-watch-together", label: "Watch Together (React + TS)", hint: "Synchronized video playback" },
             { value: "react-all-features", label: "All Features (React + TS)", hint: "Chat, Video, Audio, RPC" },
             { value: "react-queue-demo", label: "Durable Queues (React + TS)", hint: "Persistent queues with WAL/Postgres/Redis" },
@@ -101,7 +102,8 @@ function copyDir(src, dest) {
   const entries = import_fs.default.readdirSync(src, { withFileTypes: true });
   for (const entry of entries) {
     const srcPath = import_path.default.join(src, entry.name);
-    if (entry.name === "node_modules" || entry.name === "dist") continue;
+    if (["node_modules", "dist", ".next", ".env", "package-lock.json"].includes(entry.name)) continue;
+    if (entry.name.endsWith(".db") || entry.name.endsWith(".db-journal")) continue;
     const destPath = import_path.default.join(dest, entry.name);
     if (entry.isDirectory()) {
       if (!import_fs.default.existsSync(destPath)) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sansavision/create-pulse",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Scaffold a new Pulse application",
   "main": "dist/index.js",
   "bin": {

package/templates/nextjs-auth-demo/.env.example ADDED Viewed

@@ -0,0 +1,6 @@
+# Better Auth
+BETTER_AUTH_SECRET=replace-me-with-a-32-char-secret-key
+BETTER_AUTH_URL=http://localhost:3000
+# Pulse Relay
+NEXT_PUBLIC_PULSE_URL=ws://localhost:4001

package/templates/nextjs-auth-demo/README.md ADDED Viewed

@@ -0,0 +1,74 @@
+# Pulse + Next.js Auth Demo
+An **investor-ready** demo application showcasing the full capabilities of [Pulse](https://github.com/Sansa-Organisation/pulse) — the real-time protocol for modern applications.
+## Features
+- 🔐 **Better Auth** — Full authentication with email/password, local SQLite + Drizzle ORM
+- 💬 **Real-time Chat** — Multi-user rooms with presence and typing indicators
+- 📹 **Watch Together** — Synchronized video playback across users
+- 📬 **Durable Queues** — Offline simulation with message persistence
+- 🎮 **Game State Sync** — Real-time tic-tac-toe with shared state
+- 🔒 **E2E Encrypted Chat** — End-to-end encryption with ciphertext visualization
+## Quick Start
+```bash
+# 1. Install dependencies
+npm install
+# 2. Create .env file
+cp .env.example .env
+# 3. Generate a secret and update .env
+openssl rand -base64 32
+# 4. Create database tables
+npx @auth/cli migrate
+# 5. Start the Pulse relay (in another terminal)
+npx @sansavision/pulse-cli serve --auth-mode webhook --auth-webhook http://localhost:3000/api/pulse/verify
+# 6. Start the app
+npm run dev
+```
+## Multi-User Testing
+1. Open `http://localhost:3000` in a browser
+2. Create an account and sign in
+3. Open a second browser tab (or incognito window)
+4. Create a different account
+5. Both users can now interact in real-time across all demos
+## Architecture
+```
+Next.js App (port 3000)              Pulse Relay (port 4001)
+├── /api/auth/[...all]  ◄──────┐     ├── WebSocket gateway
+├── /api/pulse/verify   ◄──────┼──── ├── Auth webhook verification
+├── / (Landing)                │     └── QUIC streams
+├── /auth/sign-in              │
+├── /auth/sign-up              │
+└── /dashboard (protected)     │
+    ├── /demos/chat            │
+    ├── /demos/watch-together  │
+    ├── /demos/queues         ─┘
+    ├── /demos/game-sync
+    └── /demos/encrypted-chat
+```
+## Technologies
+- **Next.js 16** + **React 19** + **Tailwind CSS v4**
+- **Better Auth** with **bearer plugin**
+- **SQLite** + **Drizzle ORM**
+- **Pulse SDK** (`@sansavision/pulse-sdk`)
+## Environment Variables
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `BETTER_AUTH_SECRET` | Auth encryption secret (32+ chars) | — |
+| `BETTER_AUTH_URL` | Base URL of the app | `http://localhost:3000` |
+| `NEXT_PUBLIC_PULSE_URL` | Pulse relay WebSocket URL | `ws://localhost:4001` |

package/templates/nextjs-auth-demo/_gitignore ADDED Viewed

@@ -0,0 +1,33 @@
+# dependencies
+node_modules/
+.pnp
+.pnp.js
+# builds
+.next/
+out/
+# database
+*.db
+*.db-journal
+# misc
+.DS_Store
+*.pem
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+# env files
+.env
+.env*.local
+# vercel
+.vercel
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/templates/nextjs-auth-demo/drizzle.config.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+export default defineConfig({
+    schema: "./src/lib/schema.ts",
+    out: "./drizzle",
+    dialect: "sqlite",
+    dbCredentials: {
+        url: "./sqlite.db",
+    },
+});

package/templates/nextjs-auth-demo/eslint.config.mjs ADDED Viewed

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+export default eslintConfig;

package/templates/nextjs-auth-demo/next-env.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextjs-auth-demo/next.config.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+const nextConfig: NextConfig = {
+  serverExternalPackages: ["better-sqlite3"],
+};
+export default nextConfig;

package/templates/nextjs-auth-demo/package.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "name": "pulse-nextjs-auth-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "db:push": "npx drizzle-kit push",
+    "db:studio": "npx drizzle-kit studio"
+  },
+  "dependencies": {
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "better-auth": "^1.2.0",
+    "better-sqlite3": "^12.0.0",
+    "drizzle-orm": "^0.41.0",
+    "@sansavision/pulse-sdk": "^0.4.2",
+    "lucide-react": "^0.412.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/better-sqlite3": "^7.6.0",
+    "drizzle-kit": "^0.31.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/templates/nextjs-auth-demo/postcss.config.mjs ADDED Viewed

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;

package/templates/nextjs-auth-demo/public/file.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/templates/nextjs-auth-demo/public/globe.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/templates/nextjs-auth-demo/public/next.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/templates/nextjs-auth-demo/public/vercel.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/templates/nextjs-auth-demo/public/window.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/templates/nextjs-auth-demo/src/app/api/auth/[...all]/route.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+export const { GET, POST } = toNextJsHandler(auth);

package/templates/nextjs-auth-demo/src/app/api/pulse/verify/route.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import { auth } from "@/lib/auth";
+import { NextRequest, NextResponse } from "next/server";
+/**
+ * Pulse Relay Auth Webhook
+ *
+ * The Pulse relay calls this endpoint during the CONNECT handshake
+ * to verify the client's auth token. We use Better Auth's session
+ * API to validate the bearer token and return user identity.
+ *
+ * Relay config: --auth-mode webhook --auth-webhook http://localhost:3000/api/pulse/verify
+ */
+export async function POST(req: NextRequest) {
+    try {
+        const body = await req.json();
+        const { token } = body;
+        if (!token) {
+            return NextResponse.json(
+                { allow: false, reason: "No token provided" },
+                { status: 200 }
+            );
+        }
+        // Verify the bearer token against Better Auth's session store
+        const session = await auth.api.getSession({
+            headers: new Headers({
+                Authorization: `Bearer ${token}`,
+            }),
+        });
+        if (!session?.user) {
+            return NextResponse.json(
+                { allow: false, reason: "Invalid or expired session token" },
+                { status: 200 }
+            );
+        }
+        return NextResponse.json({
+            allow: true,
+            user_id: session.user.id,
+            claims: {
+                email: session.user.email || "",
+                name: session.user.name || "",
+            },
+        });
+    } catch (error) {
+        console.error("[Pulse Verify] Error:", error);
+        return NextResponse.json(
+            { allow: false, reason: "Internal verification error" },
+            { status: 200 }
+        );
+    }
+}

package/templates/nextjs-auth-demo/src/app/auth/sign-in/page.tsx ADDED Viewed

@@ -0,0 +1,131 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { signIn } from "@/lib/auth-client";
+import { Zap, Mail, Lock, ArrowRight, Loader2 } from "lucide-react";
+export default function SignInPage() {
+    const router = useRouter();
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setError("");
+        setLoading(true);
+        try {
+            const result = await signIn.email({
+                email,
+                password,
+            });
+            if (result.error) {
+                setError(result.error.message || "Sign in failed");
+            } else {
+                router.push("/dashboard");
+            }
+        } catch {
+            setError("An unexpected error occurred");
+        } finally {
+            setLoading(false);
+        }
+    }
+    return (
+        <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
+            {/* Background effects */}
+            <div className="absolute top-1/4 left-1/3 w-80 h-80 bg-purple-500/15 rounded-full blur-[100px]" />
+            <div className="absolute bottom-1/4 right-1/3 w-80 h-80 bg-cyan-500/15 rounded-full blur-[100px]" />
+            <div className="w-full max-w-md relative z-10">
+                {/* Logo */}
+                <div className="text-center mb-8">
+                    <Link href="/" className="inline-flex items-center gap-2 mb-6">
+                        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
+                            <Zap className="w-6 h-6 text-white" />
+                        </div>
+                        <span className="text-2xl font-bold">Pulse</span>
+                    </Link>
+                    <h1 className="text-2xl font-bold mb-2">Welcome back</h1>
+                    <p className="text-slate-400">Sign in to access the demo dashboard</p>
+                </div>
+                {/* Form */}
+                <form
+                    onSubmit={handleSubmit}
+                    className="glass rounded-2xl p-8 space-y-5"
+                >
+                    {error && (
+                        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Email
+                        </label>
+                        <div className="relative">
+                            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                placeholder="you@example.com"
+                                required
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Password
+                        </label>
+                        <div className="relative">
+                            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                placeholder="••••••••"
+                                required
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                    </div>
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full py-2.5 bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 rounded-lg font-semibold transition-all hover:shadow-lg hover:shadow-purple-500/25 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                        {loading ? (
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                        ) : (
+                            <>
+                                Sign In
+                                <ArrowRight className="w-4 h-4" />
+                            </>
+                        )}
+                    </button>
+                    <p className="text-center text-sm text-slate-400">
+                        Don&apos;t have an account?{" "}
+                        <Link
+                            href="/auth/sign-up"
+                            className="text-purple-400 hover:text-purple-300 font-medium"
+                        >
+                            Create one
+                        </Link>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-auth-demo/src/app/auth/sign-up/page.tsx ADDED Viewed

@@ -0,0 +1,153 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { signUp } from "@/lib/auth-client";
+import { Zap, Mail, Lock, User, ArrowRight, Loader2 } from "lucide-react";
+export default function SignUpPage() {
+    const router = useRouter();
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setError("");
+        setLoading(true);
+        try {
+            const result = await signUp.email({
+                name,
+                email,
+                password,
+            });
+            if (result.error) {
+                setError(result.error.message || "Sign up failed");
+            } else {
+                router.push("/dashboard");
+            }
+        } catch {
+            setError("An unexpected error occurred");
+        } finally {
+            setLoading(false);
+        }
+    }
+    return (
+        <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
+            <div className="absolute top-1/4 left-1/3 w-80 h-80 bg-purple-500/15 rounded-full blur-[100px]" />
+            <div className="absolute bottom-1/4 right-1/3 w-80 h-80 bg-cyan-500/15 rounded-full blur-[100px]" />
+            <div className="w-full max-w-md relative z-10">
+                <div className="text-center mb-8">
+                    <Link href="/" className="inline-flex items-center gap-2 mb-6">
+                        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
+                            <Zap className="w-6 h-6 text-white" />
+                        </div>
+                        <span className="text-2xl font-bold">Pulse</span>
+                    </Link>
+                    <h1 className="text-2xl font-bold mb-2">Create your account</h1>
+                    <p className="text-slate-400">
+                        Start exploring the real-time protocol
+                    </p>
+                </div>
+                <form
+                    onSubmit={handleSubmit}
+                    className="glass rounded-2xl p-8 space-y-5"
+                >
+                    {error && (
+                        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Name
+                        </label>
+                        <div className="relative">
+                            <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="text"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder="Your name"
+                                required
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Email
+                        </label>
+                        <div className="relative">
+                            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                placeholder="you@example.com"
+                                required
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Password
+                        </label>
+                        <div className="relative">
+                            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                placeholder="••••••••"
+                                required
+                                minLength={8}
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                        <p className="text-xs text-slate-500 mt-1">
+                            Must be at least 8 characters
+                        </p>
+                    </div>
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full py-2.5 bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-500 hover:to-cyan-500 rounded-lg font-semibold transition-all hover:shadow-lg hover:shadow-purple-500/25 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                        {loading ? (
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                        ) : (
+                            <>
+                                Create Account
+                                <ArrowRight className="w-4 h-4" />
+                            </>
+                        )}
+                    </button>
+                    <p className="text-center text-sm text-slate-400">
+                        Already have an account?{" "}
+                        <Link
+                            href="/auth/sign-in"
+                            className="text-purple-400 hover:text-purple-300 font-medium"
+                        >
+                            Sign in
+                        </Link>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}