mirror of
https://github.com/karpathy/nanochat.git
synced 2026-05-08 00:39:50 +00:00
aa7a907063
Remove NextAuth and replace with token-based auth against the backend
auth service (OAuth + JWT). The frontend now redirects login to
/api/auth/google and /api/auth/github (proxied by nginx to the auth
service), captures the JWT from the redirect query param, and uses it
for all API calls.
Key changes:
- Remove next-auth dependency and all NextAuth config/routes
- Add lib/auth-client.ts (JWT token storage + auth headers)
- Add hooks/useAuth.ts (client-side auth state + token capture)
- Rewrite middleware.ts to pass-through (client-side auth only)
- Login page uses plain <a> links to /api/auth/{provider}
- Chat page captures access_token from OAuth redirect
- Zustand store fetches conversations from real chat-api via JWT
- API routes proxy /api/conversations/* to chat-api with auth
- chat/stream route supports conversationId + auth header forwarding
- useSSE hook accepts auth headers for authenticated streaming
- Sidebar loads conversations from API, supports delete
- Landing page (Hero, LandingNav) uses useAuth instead of useSession
- Add .env.production.example and scripts/generate-jwt-keys.sh
Mock echo fallback preserved when CHAT_API_URL is not set.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| app | ||
| components | ||
| hooks | ||
| lib | ||
| public | ||
| store | ||
| types | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| auth.ts | ||
| Dockerfile | ||
| index.html | ||
| middleware.ts | ||
| next-env.d.ts | ||
| next.config.mjs | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| README.md | ||
| tailwind.config.ts | ||
| tsconfig.json | ||
samosaChaat — Frontend Service
Next.js 14 (App Router) application that replaces the legacy nanochat/ui.html. It blends Sarvam.ai's clean split-screen layout with samosaChaat's warm desi personality — samosa and chai illustrations, lemon-mirchi toran, gold + cream palette.
Pages
/Landing — Devanagari + Great Vibes calligraphy, animated samosa (float), chai kettle (wobble + steam), toran (pendulum), ambient doodles, CTA./loginSign-in — left: architectural/mandala motif with saffron-cream gradient; right: Google + GitHub OAuth, disabled email input./chatChat — collapsible 260px sidebar (grouped history, model selector, user avatar, logout), main area with empty state + suggestion chips, markdown rendering with code-copy, auto-expanding textarea, slash commands (/temperature,/topk,/clear,/help), SSE streaming with steam typing indicator.
Tech
- Next.js 14 (App Router, standalone output)
- Tailwind CSS (theme tokens carried from
ui.html) - Zustand (persisted conversations/settings)
- NextAuth.js v5 (Google + GitHub)
- Framer Motion (hero transitions)
- Lucide React (icons)
- react-markdown + rehype-highlight (assistant rendering)
Environment
Copy .env.example → .env.local and fill in:
| Var | Purpose |
|---|---|
NEXT_PUBLIC_APP_URL |
Public URL (defaults to http://localhost:3000) |
AUTH_SERVICE_URL |
Auth microservice (BFF only; reserved for future) |
CHAT_API_URL |
Upstream chat service. If unset the frontend serves mock echo responses — perfect for local dev. |
NEXTAUTH_SECRET |
openssl rand -base64 32 |
GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET |
Google OAuth (optional in dev) |
GITHUB_CLIENT_ID / GITHUB_CLIENT_SECRET |
GitHub OAuth (optional in dev) |
Middleware protects /chat/* — unauthenticated users are redirected to /login?callbackUrl=/chat.
Run locally
cd services/frontend
npm install
cp .env.example .env.local # then edit
npm run dev
# → http://localhost:3000
Without any OAuth keys the /login buttons will show the NextAuth error page; the rest of the UI works via the mocked API routes.
API routes (BFF pattern)
All client calls hit Next.js routes — the frontend never talks to the chat backend directly.
GET /api/health— service info + upstream config flagsGET /api/conversations— mocked conversation listPOST /api/chat/stream— proxies toCHAT_API_URL/chat/completionsif set, otherwise streams a mock echo. Emits SSE:data: {"token": "...", "gpu": 0}\n\nand terminates withdata: {"done": true}\n\n.
Docker
docker build -t samosachaat-frontend .
docker run --rm -p 3000:3000 \
-e NEXTAUTH_SECRET=... \
-e CHAT_API_URL=http://host.docker.internal:8000 \
samosachaat-frontend
The image is based on node:20-alpine, uses Next.js output: standalone, and runs as a non-root user.
Porting notes
All SVG assets (samosa, chai kettle, toran, steam, doodles, logo) are componentized under components/svg/. CSS keyframes (pendulum, float, wobble, steamFloat, steamType) moved into tailwind.config.ts — reference via the animate-* utilities. The original single-file UI lives at nanochat/ui.html for reference.