forge/frontend/components/AuthProvider.tsx

83 lines
2.6 KiB
TypeScript

'use client';
import { useEffect, useState } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { useStore } from '@/lib/store';
import { authApi } from '@/lib/api';
import { Loader2 } from 'lucide-react';
// Pages that don't require authentication
const PUBLIC_PAGES = ['/login', '/signup'];
export default function AuthProvider({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
const { user, token, setUser, setToken, logout } = useStore();
const [loading, setLoading] = useState(true);
useEffect(() => {
const initAuth = async () => {
try {
console.log('AuthProvider: initAuth started');
// If on a public page, no need to check auth
if (PUBLIC_PAGES.includes(pathname)) {
setLoading(false);
return;
}
// Try to verify auth with the backend (uses cookie automatically)
const response = await authApi.me();
if (response.data) {
console.log('AuthProvider: User authenticated', response.data.email);
const userData = {
id: response.data.id,
email: response.data.email,
name: response.data.display_name || response.data.email,
role: response.data.role,
avatar_url: response.data.avatar_url,
};
setUser(userData);
// Also set a dummy token for compatibility (actual auth is via cookie)
setToken('cookie-auth');
}
} catch (error) {
// Not authenticated, clear state and redirect
console.error('AuthProvider: Auth check failed', error);
logout();
// Only redirect if NOT on public page (redundant check but safe)
if (!PUBLIC_PAGES.includes(pathname)) {
router.push('/login');
}
} finally {
console.log('AuthProvider: initAuth finished, clearing loading');
setLoading(false);
}
};
initAuth();
}, [pathname]);
// Show loading spinner while checking auth
if (loading && !PUBLIC_PAGES.includes(pathname)) {
return (
<div className="min-h-screen bg-forge-gray flex items-center justify-center">
<div className="text-center">
<Loader2 className="w-8 h-8 text-forge-yellow animate-spin mx-auto mb-4" />
<p className="text-gray-500">Loading...</p>
</div>
</div>
);
}
// On public pages, just render children
if (PUBLIC_PAGES.includes(pathname)) {
return <>{children}</>;
}
// On protected pages, only render if we have a user
if (!user && !loading) {
return null;
}
return <>{children}</>;
}