nanochat/services/frontend/hooks/useAuth.ts
Manmohan Sharma aa7a907063
feat(frontend): wire frontend to real backend auth + chat-api services
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>
2026-04-16 13:21:38 -07:00

50 lines
1.2 KiB
TypeScript

'use client';
import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import {
getToken,
setToken,
clearToken,
isAuthenticated,
getUser,
type TokenUser,
} from '@/lib/auth-client';
export function useAuth() {
const [authenticated, setAuthenticated] = useState(false);
const [loading, setLoading] = useState(true);
const [user, setUser] = useState<TokenUser | null>(null);
const router = useRouter();
useEffect(() => {
setAuthenticated(isAuthenticated());
setUser(getUser());
setLoading(false);
}, []);
const logout = () => {
clearToken();
setAuthenticated(false);
setUser(null);
router.push('/');
};
return { authenticated, loading, user, logout };
}
/** Hook to capture access_token from the OAuth redirect query param */
export function useTokenCapture() {
const searchParams = useSearchParams();
const router = useRouter();
useEffect(() => {
const token = searchParams.get('access_token');
if (token) {
setToken(token);
// Remove token from URL for cleanliness / security
router.replace('/chat');
}
}, [searchParams, router]);
}