mirror of
https://github.com/karpathy/nanochat.git
synced 2026-05-11 10:20:22 +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>
107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useRef, useState } from 'react';
|
|
|
|
export interface SSEOptions {
|
|
onToken?: (token: string, gpu?: number) => void;
|
|
onDone?: () => void;
|
|
onError?: (err: Error) => void;
|
|
}
|
|
|
|
export interface StreamRequest {
|
|
messages: Array<{ role: string; content: string }>;
|
|
model?: string;
|
|
temperature?: number;
|
|
topK?: number;
|
|
conversationId?: string;
|
|
auth?: Record<string, string>;
|
|
}
|
|
|
|
export function useSSE(endpoint: string, options: SSEOptions = {}) {
|
|
const [isStreaming, setIsStreaming] = useState(false);
|
|
const abortRef = useRef<AbortController | null>(null);
|
|
|
|
const stop = useCallback(() => {
|
|
abortRef.current?.abort();
|
|
abortRef.current = null;
|
|
setIsStreaming(false);
|
|
}, []);
|
|
|
|
const start = useCallback(
|
|
async (body: StreamRequest) => {
|
|
stop();
|
|
const ac = new AbortController();
|
|
abortRef.current = ac;
|
|
setIsStreaming(true);
|
|
|
|
try {
|
|
const headers: Record<string, string> = { 'Content-Type': 'application/json' };
|
|
if (body.auth) {
|
|
Object.assign(headers, body.auth);
|
|
}
|
|
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers,
|
|
body: JSON.stringify({
|
|
messages: body.messages,
|
|
model: body.model,
|
|
temperature: body.temperature,
|
|
topK: body.topK,
|
|
conversationId: body.conversationId,
|
|
}),
|
|
signal: ac.signal,
|
|
});
|
|
|
|
if (!res.ok || !res.body) {
|
|
throw new Error(`HTTP ${res.status}`);
|
|
}
|
|
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
buffer += decoder.decode(value, { stream: true });
|
|
let nl: number;
|
|
while ((nl = buffer.indexOf('\n')) !== -1) {
|
|
const line = buffer.slice(0, nl).trim();
|
|
buffer = buffer.slice(nl + 1);
|
|
if (!line.startsWith('data:')) continue;
|
|
const payload = line.slice(5).trim();
|
|
if (!payload) continue;
|
|
try {
|
|
const data = JSON.parse(payload);
|
|
if (data.done) {
|
|
options.onDone?.();
|
|
setIsStreaming(false);
|
|
return;
|
|
}
|
|
if (typeof data.token === 'string') {
|
|
options.onToken?.(data.token, data.gpu);
|
|
}
|
|
} catch {
|
|
/* swallow malformed chunks */
|
|
}
|
|
}
|
|
}
|
|
|
|
options.onDone?.();
|
|
} catch (err) {
|
|
if ((err as Error).name !== 'AbortError') {
|
|
options.onError?.(err as Error);
|
|
}
|
|
} finally {
|
|
setIsStreaming(false);
|
|
abortRef.current = null;
|
|
}
|
|
},
|
|
[endpoint, options, stop],
|
|
);
|
|
|
|
return { start, stop, isStreaming };
|
|
}
|