fix: make the username & appear on the menu after change

Author: sheriffjimoh

apps/web/auth.ts

@@ -68,10 +68,10 @@ export const authOptions: NextAuthOptions = {
 						credentials.password,
 						user[0].password,
 					)
-					// if (!isValid) {
-					// 	console.error('NextUser authentication failed: Invalid password')
-					// 	throw new Error('Invalid credentials')
-					// }
+					if (!isValid) {
+						console.error('NextUser authentication failed: Invalid password')
+						throw new Error('Invalid credentials')
+					}
 					console.log('NextUser authenticated successfully')
 					//* Return user details to be attached to the token
 					return {
@@ -98,7 +98,28 @@ export const authOptions: NextAuthOptions = {
 		strategy: 'jwt', //* NextAuth V > 4 needs to specify the session strategy
 	},
 	callbacks: {
-		async jwt({ token, user, account }) {
+		async jwt({ token, user, account, trigger, session }) {
+			console.log(
+				'JWT callback → trigger:',
+				trigger,
+				'session:',
+				session ? 'present' : 'none',
+				'user:',
+				user ? 'present' : 'none',
+			)
+
+			if (trigger === 'update' && session) {
+				console.log(
+					'JWT callback → handling update trigger, session payload:',
+					session,
+				)
+				token.name = session.name ?? token.name
+				token.slug = session.slug ?? token.slug
+				token.email = session.email ?? token.email
+				// If you want to refresh hasuraJwt on update, do it here (carefully, with try/catch).
+				return token
+			}
+
 			if (user) {
 				//* Add user role to the token when signing in with Google
 				if (account?.provider === 'google') {

apps/web/components/auth/user-login.tsx

@@ -4,6 +4,7 @@ import { UserMenu } from '@/components/layout/header/user-menu'
 import { ProfileSidebar } from '@/components/layout/sidebar/profile-sidebar'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
+import { useProfile } from '@/lib/hooks/use-profile'
 import { isTokenExpired } from 'mb-lib'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
@@ -12,8 +13,9 @@ import { ProfileSidebarSkeleton } from '../shared/skeletons/profile-sidebar-skel
 
 export function UserLogin() {
 	const { data: session, status } = useSession()
+	const { sessionUser } = useProfile()
 
-	if (status === 'loading') {
+	if (status === 'loading' && sessionUser === null) {
 		return <Skeleton className="h-6 w-24" />
 	}
 
@@ -32,9 +34,9 @@ export function UserLogin() {
 		return (
 			<>
 				<Suspense fallback={<ProfileSidebarSkeleton />}>
-					<ProfileSidebar user={session.user} />
+					{sessionUser && <ProfileSidebar user={sessionUser} />}
 				</Suspense>
-				<UserMenu user={session.user} />
+				{sessionUser && <UserMenu user={sessionUser} />}
 			</>
 		)
 	}

apps/web/components/routes/preferences/preference-section.tsx

@@ -43,6 +43,7 @@ import type { PreferenceSetInput } from 'mb-genql'
 import { toSlug } from 'mb-lib'
 import { signOut, useSession } from 'next-auth/react'
 import { useTheme } from 'next-themes'
+import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import GoogleTranslate from './google-translation'
@@ -54,13 +55,15 @@ export function PreferenceSection({ title, items }: PreferenceSectionProps) {
 	const [buttonType, setButtonType] = useState('')
 	const { data: session, update } = useSession()
 	const { customSonner } = useSonner()
-	const { currentUser, getUserInfo, updateUserDetails } = useProfile()
+	const { currentUser, getUserInfo, updateUserDetails, updateSessionUser } =
+		useProfile()
 	const [errorMessage, setErrorMessage] = useState('')
 	const [isLoading, setIsLoading] = useState(false)
 	const [sendindVEmail, setSendingVEmail] = useState(false)
 	const [inputValue, setInputValue] = useState({ username: '', email: '' })
 	const { setTheme, theme } = useTheme()
 	const { fontSize, setFontSize } = useAccessibility()
+	const router = useRouter()
 
 	useEffect(() => {
 		if (currentUser) {
@@ -275,20 +278,13 @@ export function PreferenceSection({ title, items }: PreferenceSectionProps) {
 
 			await updateUserDetails(email ?? null, username ?? null, slug ?? null)
 
-			await update({
-				...session,
-				user: {
-					...session.user,
-					email: email || session.user.email,
-					name: username || session.user.name,
-					slug: slug || session.user.slug,
-				},
+			await updateSessionUser({
+				...session.user,
+				slug,
+				name: username,
 			})
 
-			//reidrect to updated profile
-
-			window.location.href = `/u/${slug}/s/pref`
-
+			router.push(`/u/${slug}/s/pref`)
 			customSonner({
 				type: 'success',
 				text: 'Profile updated successfully.',

apps/web/lib/hooks/use-profile.tsx

@@ -1,15 +1,19 @@
 'use client'
 
 import {
+	getUserByID,
 	getUserBySlug,
 	updateUser,
 	updateUserPersonality,
 } from '@/services/hasura'
 import type { User } from 'mb-genql'
+import type { Session } from 'next-auth'
 import { useSession } from 'next-auth/react'
-import * as React from 'react'
+import React, { useEffect } from 'react'
 import { useSonner } from './useSonner'
 
+type sessionUserType = Session['user'] | null
+
 interface profileContextProps {
 	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 	getUserInfo: (username: string) => Promise<any>
@@ -26,6 +30,8 @@ interface profileContextProps {
 		name: string | null,
 		slug: string | null,
 	) => void
+	sessionUser: sessionUserType
+	updateSessionUser: (user: sessionUserType) => void
 }
 
 const profileContext = React.createContext<profileContextProps | undefined>(
@@ -48,8 +54,32 @@ export function ProfileProvider({ children }: ProfileProviderProps) {
 	const { data: session } = useSession()
 
 	const [currentUser, setCurrentUser] = React.useState<User | null>(null)
+	const [sessionUser, setSessionUser] = React.useState<sessionUserType>(null)
 	const { customSonner } = useSonner()
 
+	useEffect(() => {
+		const loadUser = async () => {
+			if (!session?.user?.id) return
+
+			const { user } = await getUserByID(session.user.id)
+			if (user) {
+				setSessionUser({
+					id: user.userId,
+					name: user.username,
+					email: user.email,
+					image: user.profilePicture,
+					slug: user.slug,
+					role: user.role,
+					hasuraJwt: session.user.hasuraJwt,
+				})
+			}
+		}
+		loadUser()
+	}, [session])
+	const updateSessionUser = (user: sessionUserType) => {
+		setSessionUser(user)
+	}
+
 	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 	const getUserInfo = async (slug: string): Promise<any> => {
 		if (!slug?.trim()) {
@@ -157,6 +187,8 @@ export function ProfileProvider({ children }: ProfileProviderProps) {
 				currentUser,
 				setCurrentUser,
 				updateUserDetails,
+				updateSessionUser,
+				sessionUser,
 			}}
 		>
 			{children}

apps/web/services/hasura/hasura.service.ts

@@ -185,7 +185,6 @@ export async function getAllChatbots() {
 			},
 		},
 	})
-
 	return chatbot as Chatbot[]
 }
 
@@ -232,7 +231,6 @@ export async function getChatbots({
 			},
 		},
 	})
-
 	return chatbot as Chatbot[]
 }
 
@@ -467,7 +465,6 @@ export async function getThread({
 		} else {
 			console.error('Error fetching thread: ', error)
 		}
-
 		return null
 	}
 }
@@ -658,7 +655,6 @@ export async function createThread({
 	model,
 	slug,
 	jwt,
-	userId,
 	parentThreadId,
 	isPublic = false,
 }: Partial<CreateThreadParams>) {
@@ -1649,8 +1645,6 @@ export async function fetchChatbotMetadata({
 			),
 		}))
 
-		// console.log('transformedMetadata', transformedMetadata);
-
 		return transformedMetadata[0] as unknown as ChatbotMetadata
 	} catch (error) {
 		console.error('Error fetching chatbot metadata:', error)
@@ -2015,6 +2009,49 @@ export async function isUsernameTaken(username: string, jwt?: string) {
 	return result.user.length > 0
 }
 
+export async function getUserByID(userId: string) {
+	if (!userId) throw new Error('userId is required')
+
+	try {
+		const client = getHasuraClient({})
+
+		const { user } = await client.query({
+			user: {
+				__args: {
+					where: {
+						userId: { _eq: userId },
+					},
+				},
+				userId: true,
+				username: true,
+				email: true,
+				slug: true,
+				profilePicture: true,
+				role: true,
+			},
+		} as const)
+
+		if (!user || user.length === 0) {
+			return { user: null, error: 'User not found' }
+		}
+
+		return {
+			user: user[0],
+			error: null,
+		}
+	} catch (error) {
+		console.error('Error fetching user by ID:', {
+			error,
+			userId,
+			timestamp: new Date().toISOString(),
+		})
+		if (error instanceof Error) {
+			return { user: null, error: error.message }
+		}
+		return { user: null, error: 'Unexpected error while fetching user' }
+	}
+}
+
 export async function updateUser({
 	userId,
 	email,