fix(settings): use NextAuth session instead of undefined Firebase auth
The settings page imported `auth` from `@/lib/firebase/config` and called
`auth.currentUser` inside an unguarded `useEffect`. Since the app runs on
PostgreSQL + NextAuth (Firebase isn't configured), `auth` was `undefined`
and the uncaught TypeError crashed React's commit, leaving the page blank
behind the Next.js dev error overlay. The WorkspaceKeysPanel never got a
chance to mount even though `/api/workspaces` was returning fine.
Swap to `useSession()` from `next-auth/react` to read display name + email
from the existing NextAuth session. Drop the dead fetch to
`/api/workspace/{slug}/settings`, which was never implemented.
Made-with: Cursor
This commit is contained in:
@@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { auth } from '@/lib/firebase/config';
|
import { useSession } from 'next-auth/react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { Settings, User, Bell, Shield, Trash2 } from 'lucide-react';
|
import { Settings, User, Bell, Shield, Trash2 } from 'lucide-react';
|
||||||
import { useParams, useRouter } from 'next/navigation';
|
import { useParams, useRouter } from 'next/navigation';
|
||||||
@@ -32,6 +32,7 @@ export default function SettingsPage() {
|
|||||||
const params = useParams();
|
const params = useParams();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const workspace = params.workspace as string;
|
const workspace = params.workspace as string;
|
||||||
|
const { data: session, status } = useSession();
|
||||||
const [settings, setSettings] = useState<WorkspaceSettings | null>(null);
|
const [settings, setSettings] = useState<WorkspaceSettings | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
@@ -39,51 +40,19 @@ export default function SettingsPage() {
|
|||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadSettings();
|
if (status === 'loading') return;
|
||||||
loadUserProfile();
|
setDisplayName(session?.user?.name ?? '');
|
||||||
}, []);
|
setEmail(session?.user?.email ?? '');
|
||||||
|
|
||||||
const loadSettings = async () => {
|
|
||||||
try {
|
|
||||||
const user = auth.currentUser;
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
const token = await user.getIdToken();
|
|
||||||
const response = await fetch(`/api/workspace/${workspace}/settings`, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
setSettings(data);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading settings:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}, [session, status]);
|
||||||
};
|
|
||||||
|
|
||||||
const loadUserProfile = () => {
|
|
||||||
const user = auth.currentUser;
|
|
||||||
if (user) {
|
|
||||||
setDisplayName(user.displayName || '');
|
|
||||||
setEmail(user.email || '');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSaveProfile = async () => {
|
const handleSaveProfile = async () => {
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
const user = auth.currentUser;
|
if (!session?.user) {
|
||||||
if (!user) {
|
|
||||||
toast.error('Please sign in');
|
toast.error('Please sign in');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update profile logic would go here
|
|
||||||
toast.success('Profile updated successfully');
|
toast.success('Profile updated successfully');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error saving profile:', error);
|
console.error('Error saving profile:', error);
|
||||||
|
|||||||
Reference in New Issue
Block a user